Flexible Interactive Data Table In Pure JavaScript – JSTable

Preview:

Description:

JSTable is a tiny, flexible, powerful data table library to make your HTML table interactive with sorting, filtering, and pagination functionalities.

Inspired by Vanilla-DataTables and DataTables jQuery plugin.

Works both with static HTML table and dynamic tabular data stored on the server-side (JSON, PHP, etc).

How to use it:

1. Add JSTable’s JavaScript and Stylesheet to the webpage.

<link rel="stylesheet" href="jstable.css" />
<script src="jstable.min.js"></script>

2. Load optional polyfills if your visitors are still using legacy browsers.

<script src="polyfill-babel.min.js"></script>
<script src="polyfill-promise.min.js"></script>
<script src="polyfill-fetch.min.js"></script>

3. Initialize the JSTable on your existing HTML table and done.

<table id="example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Country</th>
      <th>Date</th>
      <th>Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rhona Carey</td>
      <td>Northern Mariana Islands</td>
      <td>2020-03-12 03:47:43</td>
      <td>9761</td>
    </tr>
    ...
  </tbody>
</table>

new JSTable("#example");

4. Or load tabular data from an external data source via AJAX as follows:

new JSTable("#example", {
      serverSide: true,
      deferLoading: 1000,
      ajax: 'data.json', 
      ajaxParams: {
        // ajax params here
      }
    }
);

5. Determine how many rows to display per page. Default: 5.

new JSTable("#example", {
    perPage: 5,
    perPageSelect: [5, 10, 15, 20, 25]
});

6. Customize the pagination controls.

new JSTable("#example", {
    nextPrev: true,
    firstLast: false,
    prevText: "‹",
    nextText: "›",
    firstText: "«",
    lastText: "»",
    ellipsisText: "…",
    truncatePager: true,
    pagerDelta: 2,
});

7. Enable/disable the table filter functionality. Default: true.

new JSTable("#example", {
    searchable: false
});

8. Enable/disable the table sort functionality. Default: true.

new JSTable("#example", {
    sortable: false
});

9. You’re also allowed to specify the options for each column:

new JSTable("#example", {
    columns: [
      {
        select: 3,
        sortable: true,
        searchable: true
        sort: "asc",
        render: function(cell, idx){
          // custom render function 
        }
      }
    ]
});

10. Or by using data attributes:

<table id="example">
  <thead>
    <tr>
      <th data-sortable="false">Name</th>
      <th data-sort="asc">Country</th>
      <th>Date</th>
      <th>Number</th>
    </tr>
  </thead>
</table>

11. Override the default CSS classes.

new JSTable("#example", {
    top: "dt-top",
    info: "dt-info",
    input: "dt-input",
    table: "dt-table",
    bottom: "dt-bottom",
    search: "dt-search",
    sorter: "dt-sorter",
    wrapper: "dt-wrapper",
    dropdown: "dt-dropdown",
    ellipsis: "dt-ellipsis",
    selector: "dt-selector",
    container: "dt-container",
    pagination: "dt-pagination",
    loading: "dt-loading",
    message: "dt-message"
});

12. Customize the display text.

new JSTable("#example", {
    labels: {
      placeholder: "Search...",
      perPage: "{select} entries per page",
      noRows: "No entries found",
      info: "Showing {start} to {end} of {rows} entries",
      loading: "Loading...",
      infoFiltered: "Showing {start} to {end} of {rows} entries (filtered from {rowsTotal} entries)"
    },
});

13. Customize the layout.

new JSTable("#example", {
    layout: {
      top: "{select}{search}",
      bottom: "{info}{pager}"
    },
});

14. Event handlers.

const myTable = new JSTable("#example");
myTable.on("init", function () {
  // on init
});    
                   
myTable.on("update", function () {
  // when the data is updated
});    
                                
myTable.on("getData", function (dataRows) {
  // when the data is processed
});     
                  
myTable.on("fetchData", function (serverData) {
  // when the data is fetched from the server
});    
                    
myTable.on("search", function (query) {
  // after filtering
});   
                     
myTable.on("sort", function (column, direction) {
  // after the data is sorted
});   
                    
myTable.on("paginate", function (old_page, new_page) {
  console.log(old_page);
  console.log(new_page);
}); 
                      
myTable.on("perPageChange", function (old_value, new_value) {
  console.log(old_value);
  console.log(new_value);
});

Changelog:

v1.6.5 (01/05/2023)

• Fix search timeout replacing input value
• Extend url query params with perPage and sorting

v1.6.3 (10/16/2022)

• Fix sorting, again
• Custom http method

v1.6.2 (10/04/2022)

• Fix sorting

v1.6.1 (09/02/2022)

• add a search delay

v1.6 (06/26/2022)

• Add possibility to load initial page from server when using server side

v1.5 (01/17/2022)

• Add possibility to define table row data with server side rendering.

v1.4 (01/09/2022)

• parse table row attributes
• add callback (rowAttributesCreator) to set table attributes based on cells
• add possibility to set table cell attributes from server side rendering

v1.3 (12/06/2021)

• Some improvements with overriding configuration fields
• Add url parameters on paginate and search
• Parse url parameters for pagination and search
• Improve browser compatibility
• When a missing column is defined in the config no error is thrown and the column is ignored

v1.2 (05/16/2021)

• Update dependencies and change how table cells are rendered

12/11/2020

• Add paginate function