jQuery Plugin To Freeze Table Columns And/Or Rows On Scroll

File Size: 73.9 KB
Views Total: 58111
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Freeze Table Columns And/Or Rows On Scroll

Yet another jQuery plugin that allows freezing of a given number of rows and columns in your html table just like the Excel spreadsheet.

Both rows and columns can be frozen. Rows to be frozen should be placed in 'thead' (whole frozen header). You can freeze rows and columns combined with colspan or rowspan.

How to use it:

1. Load the style sheet ScrollTabla.css in the header, and the JavaScript file CongelarFilaColumna.js at the bottom of the webpage.

<link href="ScrollTabla.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.CongelarFilaColumna.js"></script>

2. Assuming your have a complex large table like this:

<table id="pruebatabla" class="fht-table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody
</table>

3. Calling the function on this table will freeze both the header and the first table column.

$("#pruebatabla").CongelarFilaColumna();

4. Specify how many table columns to be frozen.

$("#pruebatabla").CongelarFilaColumna({
  Columnas:  1
});

5. Only freeze table header.

$("#pruebatabla").CongelarFilaColumna({
  soloThead : true
});

6. Set the height & width of your html table.

$("#pruebatabla").CongelarFilaColumna({
  width:      '100%',
  height:     '100%'
});

Changelog:

2018-08-04

  • Fixed CSS

2018-04-21

  • Bug fixed.

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