Scrollable Table with Fixed Header using Reactstrap responsive table

Question

I have this Table https://stackblitz.com/edit/reactstrap-v8-pwyocr?file=Example.js implemented in one of my projects just wanted is its possible to Make the Header Constant and just make the Body of Table Move (Some Thing like this: https://v4.mui.com/components/tables/#fixed-header)

Can Anyone Please Help me in this

Answer 1

Use sticky position for the header cells, and make sure with z-index and background that they will be seen above the body cells

React:

...
<Table height="200" bordered className="fixed-header">
...

CSS:

.fixed-header thead th { /* the thead selector is required because there are th elements in the body */
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
}

Note: that solution might cause issue with the borders of the header - they will not be seen on scroll. Possible solutions for that issue are suggested in this question: Table headers position:sticky and border issue