Enhance HTML Tables With Sorting, Filtering, and Paging Functions – Light Table

Category: Javascript , Table | September 25, 2023
Views Total:329 views
Official Page:Go to website
Last Update:September 25, 2023


Enhance HTML Tables With Sorting, Filtering, and Paging Functions – Light Table


Light table is a simple JavaScript library for building interactive data tables from regular HTML tables.

It has several capabilities that make presenting data easy and intuitive:

  • The search feature lets users find what they need by quickly filtering table rows.
  • Pagination breaks up long tables over multiple pages for improved load times and readability.
  • Sorting columns lets users re-order and prioritize information on the fly.
  • Excluding columns from search gives you granular control over the experience.
  • Theming options like light and dark modes cater to user preferences for accessibility.
  • Exports the table to a CSV file. NEW
  • Generates bar or line charts from tables. NEW

How to use it:

1. Download the package and include the light-table.js script on your page.

<script src="/js/light-table.js" ></script>

2. Add the data-sortable attribute to the target table columns which should be sortable.

<table id="table3" >
      <th data-sortable="yes">ID</th>
      <th data-sortable="yes">First Name</th>
      <th>Last Name</th>
      <th>Birth date</th>
      <th data-sortable="yes">Grade</th>

3. Initialize the LightTable on your HTML table. That’s it.

new LightTable({
    // selector of your html table
    selector : 'table',
    // enable table filtering
    search : true,
    // enable table pagination
    pagination : true,
    // number of pages
    paginationPerPage: 10,
    // stick the table head to the top while scrolling
    stickyHead : true,
    // custom theme CSS
    theme : 'black',
    // export options
    print: false,
    exportCSV: false,
    exportCSVFileName: '',
    // strings
    labels : {
      print : 'Print',
      exportCSV : 'Export CSV',
      searchAnyThing : 'Search any thing'

4. Generate a line or bar chart from your table.

new LightTable({
    // selector of your html table
    selector : 'table',
    charts : [
        id : 'bars', // or 'line'
        x : 1, //X column index, 0 for the first
        y : 4, //Y column index
        color: '#c90000',
        hover: true, 
        hoverColor: 'blue', 
        hideLabel: false, 
        horizintalLines: true,
        horizintalLinesColors: '#ccc',
        spacing: 10,
        axisScaleUnit: 5,
        hideAxis: false,

5. Apply your own CSS styles to the Light Table.

/* table styles */
.lt-table table{
  border-collapse: collapse;
.lt-table table th,
.lt-table table td{
  padding: 5px;
.lt-table.lt-sticky table thead{
  position: sticky;
  top: 0;
  z-index: 1;
.lt-table button{
  font-size: 11px; 
  cursor: pointer;
.lt-table button.current{
  opacity: 0.8;
  display: flex; 
  justify-content: space-between; 
  margin-bottom: 20px;
  display: flex; 
  justify-content: space-between;  
.lt-table-search {
  display: flex;
  gap: 10px;
.lt-table-search input{
  padding:0 10px; 
  border:1px solid #ccc
  display: flex; 
  gap: 5px;
  margin-bottom: 20px;
.lt-table th[data-sortable="yes"]{
  cursor: pointer; 
  position: relative;
.lt-table th[data-sortable="yes"]::after{
  content: '*'; 
  display: inline-block;  
  vertical-align: midd;e;
/* add your themes here */
.lt-black table th,.lt-black table td {
  border: 1px solid #000;
.lt-black .lt-table-pagination button, .lt-black table thead{
  background-color: #000;
.lt-black table tbody *{
  color: #000;
.lt-black .lt-table-pagination button, .lt-black table thead *{

6. Use the lt-exclude-search class to exclude specified cells from search results.

  <td class="lt-exclude-search">Ernst</td>


v1.0.3 (09/25/2023)

  • Add CSV export
  • Add line/bar charts

You Might Be Interested In:

Leave a Reply