jstable-psl

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://jstable.github.io/.

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 es5 version:

<script type="text/javascript" src="/dist/jstable.es5.min.js"></script>

• If the target browser does not support fetch you need to include the following polyfills:

<script type="text/javascript" src="/dist/polyfill-fetch.min.js"></script>

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,
    ...
});