Article
0 comment

Freeze columns in Office UI Fabric table component

Freeze Table Columns

In the last blog post on how to use the Office UI Fabric table and showed how making the table responsive too. This time I like to show what can be done to make the checkboxes fixed in its position.

Change positioning reference of table row

Before we can freeze the checkbox column, we need to tweak the table row positioning first. This needs to be done because any table row should be our new reference point for further repositioning of the columns.

.ms-Table-row{
    position: relative;
}

Simple as that setting the position to relative is enough for our use case.

Freeze checkboxes in place

Through the ‘ms-Table-overflow’ introduced in the previous blog the table is scrollable. When the scroll happens all columns scroll which is good for reading the data. The negative effect is that if we have found our date we need to scroll all the way back in order to select the data. To select it right away we need to have the checkbox always to be present. Only a few tweaks are needed to freeze the first column.

.ms-Table-rowCheck {
    min-width: 20px; // Make sure the checkbox use at lest 20px
    position: absolute; // Freeze this checkbox in position
    height: 5em; // Make sure the background covers container
    overflow: hidden; // Hide overflow because of the height.
    background-color: white; // make sure the scrolled text vanish
}

The applied minimum width makes sure that the checkbox column not collapse and will always be shown in any case.
All the magic happens by assigning the position now to absolute. You might notice that I haven’t assigned values for top, bottom, left or right because they are simply not needed. What we don’t like to do is to move the checkbox column around.
The final fix needs to be done on the second column. Through the repositioning the table virtually has one column less than before.

.ms-Table-cell:nth-child(2){
    padding-left: 30px;
}

By assigning an additional padding on the second column, we make sure the virtual removal of the column will be compensated. Otherwise the text of the second column will hide behind the checkbox column.
For selection this specific column I used the pseudo-selector nth-child.
The minimum checkbox width is set to 20px this is the value that needs at least compensated by the second column. To match up the table design I added additional 10px. This makes overall 30px we need to move the content of the second column.
After all the final result can be seen in the code snippet below.

See the Pen Office UI Fabric – Table with freezed column by Stefan Bauer (@StfBauer) on CodePen.14928

Now our table behaves somehow like Microsoft Excel.

Final considerations

Once again tables are not your enemy. Plan your content and the behavior well get the most out of your html elements and make the user happy.
In most cases it’s enough to freeze just the first column, but you can do the same with additional columns too. In this case a little JavaScript should be considered to perfectly align all columns.
In addition to the direct manipulation of the classes it might be useful to have additional classes such as .ms-Table-cellFreeze and .ms-Table-cellOffset.