Hi. I urgently need help on the following case.
To create a table (picture below) With the first 3 columns fixed (Product, manufactured date, expiry date.
-Then add columns of all active countries in the database and indicate whether a product is available (Y/N (Yes/No)) in that country. From the first column it must be scrollable.
Please Note: Products are dynamic, as we manufacture more products they will automatically appear on the list and as we add more countries they should appear on the list.
We have 3 aggregates:
Product
Id
Name
ManuafacturedOn
ExpiryDate
Country Entity
CountryName
IsActive
ProductCountry Entity
ProductId
CountryId
Please assist an OML will be greatly appreiated. I have tried the DynamicTable component, some CSS but all to no avail. Please assist me.
Hi @RUDO MURIEL MUNYAVI,
To fix the columns: you can use this JavaScript when a block or screen loads, with this JS we can get the width of the columns:
var NoOfColumn = "3" ;
var width = 0;
if(NoOfColumn >= 2){
for(var i = 1; i < NoOfColumn; i++){
$('table.TableRecords tr > td:nth-child(' + (i+1) + '),table tr > th:nth-child(' + (i+1) + ')').css('left', width);
}
and then apply this below CSS in table, this will fix the columns:
.desktop .col-three tbody td:nth-child(1),
.desktop .col-three tbody td:nth-child(2),
.desktop .col-three tbody td:nth-child(3),
.desktop .col-three thead th:nth-child(1),
.desktop .col-three thead th:nth-child(2),
.desktop .col-three thead th:nth-child(3){
position:sticky;
left:0px;
background-color: #efefef !important;
z-index: 4 !important;
.desktop .col-three tbody td:nth-child(3){
z-index: 2 !important;
Hope this helps!
Thanks
Hi Rudo,
this can be accomplished by just writing a CSS property as given below.
.research-table-first-sticky { position: sticky; left: 0px; z-index: 2; }
You can do the same to the second column but the only difference will be in the "left" property. it will be the width of the first column. Change the z-index accordingly to you need. You need to apply the class to both the Header Cell and the Row Cell you want to stick.
The same can be done for next number of columns too, just add the width of the previous columns and give it to the left property.
For example, if the width of the first column is 150px, It will look something like this
.research-table-second-sticky { position: sticky; left: 150px; z-index: 2; }
Now, for the scroll this can be done with CSS too.
Just give the below CSS to the parent container of the Table.
.custom_scroll { overflow: hidden; overflow-x: scroll;}
Edit : - refer to the sample OAP.