React table with static header on browser scroll

Question

Is there a table component for react, which would have fixed header while browser scrollbar scrolls it's long body? (The table height grows as user clicks "Load more"). Here's a code sample: https://codesandbox.io/s/rm0x6lmypm The table header should remain static on browser scroll.

Answer 1

Ok, I have made some horrible css changes, now it seems to work as needed: https://codesandbox.io/s/18kqoyjq8j Basically I added styles to react-table as follows:

.ReactTable {
  margin-top: 74px;
}

.ReactTable .rt-tbody {
  margin-top: 30px;
}

.ReactTable .rt-thead {
  background-color: white;
  position: fixed;
  top: 1;
  z-index: 1;
  width: calc(100% - 17px);
  height: 31px;
}

So the table header is now fixed under the page header and we can use browser scrollbar to scroll table's body.