0

I have a react-table and I am trying to put into in the page so that the header row is in the fixed vertical position. The content of the react-table is controlled by the vertical browser scroll but the horizontal position is controlled by the horizontal scroll of the react-table, see the code: https://codesandbox.io/s/reacttable-simple-table-euzqs

Fixed header row is achieved by the code from React table with static header on browser scroll 

.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;
}

But the horizontal scroll is achieved by the style/width attribute:

<ReactTable
  data={data}
  style={{ width: "50%" }}
</ReactTable>

One can see that the horizontal scroll always remain at the end of the page and this horizontal scrollbar becomes visible only in the case when the bottom of the content page is achieved. But I would like to position the horizontal scroll always at the bottom of the visible space of the browser. Is it possible to achieve this somehow - to detach scrollbar from the element and position it in the other place or make the original scrollbar invisible and control the position of the react-table by some fake scrollbar at the desired location on the screen? Any hint in the right direction is welcome, maybe I can work out details myself.

Orlyyn
  • 2,296
  • 2
  • 20
  • 32
TomR
  • 2,696
  • 6
  • 34
  • 87

1 Answers1

1

I can't lay out the exact fix for your case here, but you could rework your "fixed header" to use the approach described in this article...

https://uxdesign.cc/position-stuck-96c9f55d9526.

This uses position: sticky with a top offset and then syncs horizontal scrolling between the table and the sticky header.

Once finished with that, you should have the know-how to use position: sticky with a bottom offset on a custom made scrollbar thumb element that will always stick within bottom edge of the table, like the header. And again, you can sync its own position/movement to the horizontal scroll position of the table.

jonjohnjohnson
  • 164
  • 2
  • 7