Cross-browser jQuery Plugin For Fixed Table Header - uicTable

File Size: 11.6 KB
Views Total: 1738
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Cross-browser jQuery Plugin For Fixed Table Header - uicTable

uicTable is a lightweight and cross-browser jQuery plugin that makes the table header fixed on the top using CSS position:sticky or position:absolute (legacy browsers) property.

How to use it:

1. You simply include the JavaScript file jquery.uic-table.js into your webpage and make sure to have JQuery installed as well.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="jquery.uic-table.js"></script>

2. Make sure your html table has thead and tbody elements.

<table>
  <thead>
    ...
  </thead>

  <tbody>
    ...
  </tbody>
</table>

3. Call the plugin on the table and done.

$('table').uicTable();

4. Plugin settings available.

$('table').uicTable({

  // override the initial set of css rules that should to be transferred from the th elements to the divs
  css: ['paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'backgroundColor', 'backgroundImage'],

  // provide some more css rules than the initial ones that should to be transferred from the th elements to the divs
  additionalCSS: []
  
});

This awesome jQuery plugin is developed by omanshardt. For more Advanced Usages, please check the demo page or visit the official website.