Fix Table Header To The Top Of Page On Scroll

Preview:

Description:

A vanilla JavaScript solution that sticks the table header to the top of the page when your scroll past it.

How to use it:

1. Install and import the library with NPM.

# NPM
$ npm i @shkrabovleonid/fixed-table-clean-js --save

import fixedTable from 'fixed-table-clean-js';

2. Attach the fixedTable to your HTML table. Note that the table must have a <thead> element as follows:

<table id="fixedTable">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

try{
  new fixedTable({tableSelector: "#fixedTable"});
}catch (e){
  console.error(e);
}