Create Freezed Thead And Columns In Table - stickyColumn

stickyColumn is an extension to the floatThead plugin that makes the table thead and first n columns always be visible (sticky) when you scroll the page vertically or horizontally.

How to use it:

1. Load the needed jQuery library (slim build is recommended) and floatThead plugin in the document.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/jquery.floatThead.min.js"></script>

2. Place the stickyColumn plugin's script after jQuery.

<script src="./stickycolumn.js"></script>

3. Attach the plugin to your long/wide HTML table and done.

<table id="example">
  <thead>
    <tr>
      <th>Sticky 01</th>
      <th>Sticky 02</th>
      <th>Sticky 03</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>lorem ipsum</td>
      <td>lorem ipsum</td>
    </tr>
    <tr>
      <td>lorem ipsum</td>
      <td>lorem ipsum</td>
    </tr>
    <tr>
      <td>lorem ipsum</td>
      <td>lorem ipsum</td>
    </tr>
  </tbody>
</table>

$('table').floatThead({
  // stick thead to the top
});

$('table').stickyColumn({
 // stick columns to the left
});

4. Determine the number of columns should be sticky. Default: 1.

$('table').floatThead({
  // stick thead to the top
});

$('table').stickyColumn({
 columns: 3
});

---

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