a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive
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/.
dist
folder:<link rel="stylesheet" type="text/css" href="/dist/jstable.css">
<script type="text/javascript" src="/dist/jstable.min.js"></script>
es5
version:<script type="text/javascript" src="/dist/jstable.es5.min.js"></script>
<script type="text/javascript" src="/dist/polyfill-fetch.min.js"></script>
The HTML table needs a thead
and tbody
section.
<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>
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,
...
});