I do have a table with horizontal and vertical scroll with a fixed header with elements taking as much as space it needs. I am working with React. It would be awesome if there is a react based solution too if CSS alone cannot solve it.

Note:

• I did try other solutions here but it is not what I'm looking for
• It would be better if td can have min-width set on them too
• The header shows menu when it is clicked for sorting and filtering

I do have a table with horizontal and vertical scroll with a fixed header with elements taking as much as space it needs. I am working with React. It would be awesome if there is a react based solution too if CSS alone cannot solve it.

Note:

• I did try other solutions here but it is not what I'm looking for
• It would be better if td can have min-width set on them too
• The header shows menu when it is clicked for sorting and filtering

• javascript
• html
• css
• reactjs
• css-tables

• Have you tried this solution? – dutchess Commented May 8, 2019 at 11:51
• I don't know about React, but there is a nice and complete jQuery plugin to do so: datatables.net/examples/basic_init/scroll_xy.html – feeela Commented May 8, 2019 at 11:52
• React based solution would be nice since I cant include jQuery – user93 Commented May 8, 2019 at 11:53
• I did find a similar plugin in react react-sticky-table but the problem was the children could not connect to redux-store github.com/henrybuilt/react-sticky-table/issues/37 – user93 Commented May 8, 2019 at 11:55
• any codesandbox of what you have tried ? it will be helpful to the community to assist you :) – semuzaboi Commented May 9, 2019 at 7:03

1 Answer 1

There's a simple CSS solution to fix rows(headers) and columns in a table.

th {
  position: sticky:
  top: 0;
}

The above snippet will fix the header to the top. Then it's just a matter of adding a simple overflow to the parent container of the table. You can find a simple example below -

.table-container {
  overflow: auto;
  max-height: 160px;
  border: 1px solid red;
}

th {
  position: sticky;
  top: 0;
  background: white;
}

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>
</div>