React-table: Support for fixed header

[bruth]

Are there any plans to support a fixed header like fixed-data-table does?

[mlukaszczyk]

I just did this with a custom CSS (actually sass). Works great!

$headerHeight: 40px;
$rowHeight: 60px;

.ReactTable {
  position: absolute; // This is not really necesarry. I do this to span the table to the width and heigth of the parent component
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border: none;

  .rt-table {
    height: 100%;
    display: block;

    .rt-thead {
      height: $headerHeight;
    }

    .rt-tbody { // I setup the body of the table to behave as a scroll container
      height: calc(100% - $headerHeight);
      overflow: scroll; 
      display: block;

      .rt-tr-group {
        background: white;
        height: $rowHeight;
      }
    }
  }
}

[bruth]

Look at that! Thank you thank you. My CSS skills are severely lacking these days.. I remember doing this with JavaScript years ago and it was never good.

[mlukaszczyk]

You´re welcome!

It´s amazing what you can do with css today. Definetly check this flexbox guide for your secret css super weapons.

[micahsteinberg]

This works, but it would be really nice if you could have the table use the same scroll as the rest of the page so you can't get stuck only partially scrolled to it and then switch over to the table's separate scroll.

I tried getting this behavior with this css:

.ReactTable .rt-thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

but it didn't work.

Any suggestions for how to do this?

[Koriit]

You can do this with pure CSS: https://css-tricks.com/position-sticky-and-table-headers/