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

Answer 2

You can add this style in the example.js.

const style = {
  table: {
    width: '100%',
    display: 'table',
    borderSpacing: 0,
    borderCollapse: 'separate',
  },
  th: {
    top: 0,
    left: 0,
    zIndex: 2,
    position: 'sticky',
    backgroundColor: '#fff',
  },
};

And then use the style on the Table & th element tag

<Table bordered height="200" style={style.table}>
   <thead>
      <tr>
        <th style={style.th}>#</th>
        <th style={style.th}>First Name</th>
        <th style={style.th}>Last Name</th>
        <th style={style.th}>Username</th>
      </tr>
 </thead>

Here's the working example code on Stackblitz

Check the result

Patterned with MUI V4 Fixed Header

Answer 3

simple option is to just use 2 tables for the head and body separately:

    <Table>
      <thead>
        <tr>
          <th>ID</th>
        </tr>
      </thead>
    </Table>
    <div style={{ maxHeight: '10rem' }}>
      <Table>
        <tbody>
          <tr>
            <th>1</th>
          </tr>
          <tr>
            <th>2</th>
          </tr>
        </thead>
      </Table>
    </div>