React Table with Static Header on Browser Scroll

How to make react-table header and checkbox fixed?

I was able to do this using position: sticky;

Here is example of it.

https://codesandbox.io/s/54z882qno4

How to create sticky headers on scroll with react

You can just use position: sticky and top: 0 in your th. Here's an example:
https://codepen.io/ipetriniith/pen/JjGeOKQ

Sticky HTML table header works, but header outline disappears when scrolling

The problem is that your has the table has

table {
 border-collapse: collapse;
}

Which means that the borders are collapsed. I do not know the exact reason, why it is initially visible but disappears on the scroll.

If you want to retain your border on a scroll, try doing this

table {
 border-collapse: separate;
}

but this breaks the UI of the table, as it adds gaps between cells

My solution is to add a border using multiple box shadows

.table th {
    box-shadow: 0 1px #dee2e6, 0 -1px #dee2e6;/*1st for bottom, 2nd for top*/
}

Here is Sandbox link

Also change value of top to 1px

.react-bootstrap-table th {
  position: sticky;
  top: 1px;
  background-color: #fff;
}

Table fixed header and scrollable body

Here is the working solution:

table {    width: 100%;}
thead, tbody, tr, td, th { display: block; }
tr:after {    content: ' ';    display: block;    visibility: hidden;    clear: both;}
thead th {    height: 30px;
    /*text-align: left;*/}
tbody {    height: 120px;    overflow-y: auto;}
thead {    /* fallback */}

tbody td, thead th {    width: 19.2%;    float: left;}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">    <thead>        <tr>            <th>Make</th>            <th>Model</th>            <th>Color</th>            <th>Year</th>        </tr>    </thead>    <tbody>        <tr>            <td class="filterable-cell">Ford</td>            <td class="filterable-cell">Escort</td>            <td class="filterable-cell">Blue</td>            <td class="filterable-cell">2000</td>        </tr>        <tr>            <td class="filterable-cell">Ford</td>            <td class="filterable-cell">Escort</td>            <td class="filterable-cell">Blue</td>            <td class="filterable-cell">2000</td>        </tr>        <tr>            <td class="filterable-cell">Ford</td>            <td class="filterable-cell">Escort</td>            <td class="filterable-cell">Blue</td>            <td class="filterable-cell">2000</td>        </tr>        <tr>            <td class="filterable-cell">Ford</td>            <td class="filterable-cell">Escort</td>            <td class="filterable-cell">Blue</td>            <td class="filterable-cell">2000</td>        </tr>    </tbody></table>

---

Related Topics