cssreactjshtml-tableantdaffix

Tree data table with fixed (affix) parent rows

There is a table that is performed using Ant Design Table component with React, that has tree-like data structure:

table

Some columns are fixed to the left.

There is a requirement that while scrolling the table up and down, those columns' rows should stick to the top of the table, so that user can always see parents.

Is there any suitable way to do that? I've searched for such library, however found only affix headers, not arbitrary rows with table structure.

Solution

  • Turns out there is an easy fix:

    .ant-table-row-level-0 {
  position: sticky;
  top: 0;
  background: white;
  z-index: 99;
}

.ant-table-row-level-1 {
  position: sticky;
  top: (height of first row);
  background: white;
  z-index: 99;
}

...