Skip to content
forked from jstable/JSTable

a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive

License

Notifications You must be signed in to change notification settings

bobmanc/JSTable

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 88.8%
  • SCSS 7.9%
  • PHP 3.3%