Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

JSTable

The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive.

The plugin is similar to the jQuery datatables but without the jQuery dependencies.

The implementation is inspired by Vanilla-DataTables. Unlike Vanilla-Datatables this implementation is using the in ES6 introduced classes.
Additionally JSTable includes the possibility for server side rendering, which is inspired by jQuery datatables.

You can get more information about the usage on https://www.haegi.org/jstable/index.html.

Install

  • Clone the github repository
  • Include the stylesheet and JavaScript files from the dist folder:
<link rel="stylesheet" type="text/css" href="/dist/jstable.css">
<script type="text/javascript" src="/dist/jstable.min.js"></script>
  • If the target browser does not support not all ES2015+ features you need to include the babel-polyfill:
<link rel="stylesheet" type="text/css" href="/dist/polyfill-babel.min.js">
  • If the target browser does not support fetch promises you need to include the following polyfills:
<link rel="stylesheet" type="text/css" href="/dist/polyfill-fetch.min.js">
<link rel="stylesheet" type="text/css" href="/dist/polyfill-promise.min.js">

Initialize

The HTML table needs a thead and tbody section.

Example table

<table id="basic">
    <thead>
        <tr>
            <th>Name</th>
            <th>Country</th>
            <th>Date</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Norman Small</td>
            <td>Tokelau</td>
            <td>2020-02-01 07:22:40</td>
            <td>8243</td>
        </tr>
            ...
    </tbody>
</table>

JavaScript

The JSTable can be initialized by passing a reference or a CSS3 selector as string:

let myTable = new JSTable("#basic");

or

let table = document.getElementById('basic');
let myTable = new JSTable(table);

Options can be passed as second argument:

let myTable = new JSTable("#basic", {
    sortable: true,
    searchable: false,
    ...
});