Fix First Column Table

Need help
1

How can we make the first column of a table to be sticky so that if we scroll right (horizontally), the first column doesn’t move?

Thank you

2

I don’t think there is a way to do this in the built-in table.

However, you can put two tables side-by-side and the first table would show the first column, and the second table would show the rest of the columns and can be scrollable.

3

We were actually able to do it @hergin :slight_smile:

Need to apply a custom css on each first cell of the first column. Here’s the HTML below where master-table-sticky is applied to the main table object.

call-a0 is the first cell of the first column/row. and so on (not on the repeating rows though). Also make sure to apply a solid background on those cells so that when scrolling it’s on top of the content

<style>
#master-table-sticky{
    overflow-x: auto !important;
}

#master-table-sticky.row {
    display: flex !important;
}

#master-table-sticky #cell-a0 {
    position: sticky !important;
    left: 0 !important;
    z-index: 100 !important;
    overflow: visible !important;
}

#master-table-sticky #cell-a1 {
    position: sticky !important;
    left: 0 !important;
    z-index: 100 !important;
    overflow: visible !important; 
}

#master-table-sticky #cell-a2 {
    position: sticky !important;
    left: 0 !important;
    z-index: 100 !important;
    overflow: visible !important;
}

#master-table-sticky #cell-a3 {
    position: sticky !important;
    left: 0 !important;
    z-index: 100 !important;
    overflow: visible !important; 
}

#master-table-sticky #row-0 {
    overflow: visible !important; 
}

#master-table-sticky #row-1 {
    overflow: visible !important; 
}

#master-table-sticky #row-2 {
    overflow: visible !important; 
}


#master-table-sticky .cell {
    overflow: visible !important;
}



</style>
1 Like
4

This topic was automatically closed after 70 days. New replies are no longer allowed.