In our last release (v1.22), we’ve supported the ability for you to freeze your table header. This is of the many minor enhancements our engineers make under the hood to improve our overall software user experience!

What this means for you

This is especially helpful for data analysts and product teams who need to browse through massive volumes of data records such as your customer listings and transactions records! No more scrolling up and down just to get an idea of what each of your columns are referring to (especially if there are multiple similar column types such as date type or category codes).

How we built it (for technical reader)

From engineering standpoint, this looks like a simple task, but we soon realize it’s a lot more complicated, especially when (1) the user resizes the window or (2) when the user do a horizontal scroll (when there’s too many columns)

We looked at some existing open-source libraries, but none of them are working as we expected. There’s a lot of small quirks we had to do behind the scene to make this work (thanks to browser’s standards).

Our table structure looks like this:

<table>
 <thead>
   <tr>
     <th>Header 1</th>
     <th>Header 2</th>
     <th>Header 3</th>
   </tr>
   ...
 </thead>
 <tbody>
   <tr>
     <td>Value 1</td>
     <td>Value 2</td>
     <td>Value 3</td>
   </tr>
   ...
 </tbody>
</table>

We started by changing <thead> to absolute position, but doing that breaks the original table’s layout. After thinking through it, we realized it’s absolutely necessary to keep the original table structure untouched and to rely on the browser’s complex grid/positioning system.

We eventually cloned the <thead> element into a floating element, and bind the original <thead> and its <th> cells’ widths to this new <thead>. So when a user scrolls past the original header, the new <thead>’s visibility is toggled, giving end-user the real experience of sticky header.