Skip to content

Latest commit

 

History

History
93 lines (81 loc) · 2.31 KB

README.md

File metadata and controls

93 lines (81 loc) · 2.31 KB

#Sticky Table jQuery Plugin

Make header and a left column stick when scroll large tables.

Usage

This basic usage will make the headers of the table stick.

$('table').sticky();

This will attach an event handler to the window.scroll to detach that call

$('table').sticky('unstick');

To get sticky columns must specify how many columns to stick, the following example will stick the first 2 columns

$('table').sticky( {columnCount: 2} );

Options

The sticky plugin supports the following options

Name Default Description
offset { top: 0, left: 0 } Offset of fixed top and fixed left position. Specify these to change where the fixed header and column will start. 
  Offset may be specified as an array, like so: <code>[{width:900, top:0, left:0}, {top:40,left:0}]</code>.
  This will make the stickyheader responsive, so that top:0 is used in windows widths smaller than 900 and top:40 as default.
  </td>
</tr>
<tr>
  <td>scrollContainer</td>
  <td>window</td>
  <td>Which container should scroll. </td>
</tr>
<tr>
  <td>headerCssClass</td>
  <td>'sticky-header'</td>
  <td>css class of the sticky header</td>
</tr>
<tr>
  <td>columnCssClass</td>
  <td>'sticky-column'</td>
  <td>css class of the sticky column</td>
</tr>
<tr>
  <td>cornerCssClass</td>
  <td>'sticky-corner'</td>
  <td>css class of the sticky corner</td>
</tr>
<tr>
  <td>columnCount</td>
  <td>0</td>
  <td>How many columns should stick</td>
</tr>
<tr>
  <td>cellWidth</td>
  <td>60</td>
  <td>How wide are the cells</td>
</tr>
<tr>
  <td>cellHeight</td>
  <td>20</td>
  <td>How tall are the cells</td>
</tr>
<tr>
  <td>cellCount</td>
  <td>-1</td>
  <td>How many cells are there in a row. Will be calculated based on first row if -1</td>
</tr>

Limitations

The table cells must have a fixed width and height. That can be specified with the cellWidth and cellHeight options.

The table cannot change position, e.g. get more margin after .sticky function has been applied.