Flexible Interactive Data Table In Pure JavaScript – JSTable

Category: Javascript , Recommended , Table | December 11, 2020
Author: Trekky12
Views Total: 915 views
Official Page: Go to website
Last Update: December 11, 2020
License: MIT


Flexible Interactive Data Table In Pure JavaScript – JSTable


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">
      <td>Rhona Carey</td>
      <td>Northern Mariana Islands</td>
      <td>2020-03-12 03:47:43</td>
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: "&lsaquo;",
    nextText: "&rsaquo;",
    firstText: "&laquo;",
    lastText: "&raquo;",
    ellipsisText: "&hellip;",
    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">
      <th data-sortable="false">Name</th>
      <th data-sort="asc">Country</th>

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) {
myTable.on("perPageChange", function (old_value, new_value) {



  • Add paginate function

You Might Be Interested In:

Leave a Reply