
RWD Freeze Table is a powerful yet easy-to-use jQuery plugin to make table columns and/or headers stay in place when scrolling.
Key Features:
- Sticks table headers to the top when scrolling down.
- Sticks table columns to the left when the table width is greater than the container width.
- Custom styles for the sticky table headers and columns.
- Supports dynamic table content.
- Compatible with the latest Bootstrap 4 framework.
How to use it:
1. Load the JavaScript file freeze-table.js
after loading jQuery library.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="dist/js/freeze-table.js"></script>
2. Wrap your HTML table into a container element.
<div class="example"> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> </div>
3. Call the function on the top container to freeze the table header and the first column.
$(".example").freezeTable();
4. To freeze multiple table columns:
$(".example").freezeTable({ 'columnNum': 2 });
5. More configuration options with default values:
$(".example").freezeTable({ // freeze table header freezeHead: true, // freeze table columns freezeColumn: true, // freeze column(s) header (entire column) freezeColumnHead: true, // show fixed scrollbar scrollBar: false, // css class for the fixed navbar (Bootstrap) fixedNavbar: '.navbar-fixed-top', // namespace namespace: 'freeze-table', // the number of table columns to freeze columnNum: 1, // border width columnBorderWidth: 1, // custom styles columnWrapStyles: null, headWrapStyles: null, columnHeadWrapStyles: null, backgroundColor: 'white', // show shadow effect shadow: false, // callback callback: null });
6. Update the plugin for dynamic HTML table.
$(".example").freezeTable('update');
7. Disable the plugin.
$(".example").freezeTable('unbind');
8. Destroy the plugin.
$(".example").freezeTable('destroy');
This awesome jQuery plugin is developed by yidas. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 14.11.2018
- Source