Fix Table Header To The Top Of Page On Scroll

Category: Javascript , Table | September 16, 2021
Author:ShkrabovLeonid
Views Total:65 views
Official Page:Go to website
Last Update:September 16, 2021
License:MIT

Preview:

Fix Table Header To The Top Of Page On Scroll

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);
}

You Might Be Interested In:


Leave a Reply