7

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
user93
  • 1,866
  • 5
  • 26
  • 45
  • Have you tried [this solution](https://stackoverflow.com/q/21168521/9540991)? – dutchess May 08 '19 at 11:51
  • I don't know about React, but there is a nice and complete jQuery plugin to do so: https://datatables.net/examples/basic_init/scroll_xy.html – feeela May 08 '19 at 11:52
  • React based solution would be nice since I cant include jQuery – user93 May 08 '19 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 https://github.com/henrybuilt/react-sticky-table/issues/37 – user93 May 08 '19 at 11:55
  • any codesandbox of what you have tried ? it will be helpful to the community to assist you :) – semuzaboi May 09 '19 at 07:03

1 Answers1

17

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>
dbigpot
  • 410
  • 4
  • 11