Package Exports

simple-datatables

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (simple-datatables) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Simple-DataTables

A lightweight, extendable, dependency-free javascript HTML table plugin. Similar to jQuery DataTables for use in modern browsers, but without the jQuery dependency. Note: If you want a version that works in very old browsers (IE, etc.), then head over to https://github.com/fiduswriter/Simple-DataTables-classic .

Based on Vanilla-DataTables, but written in ES2018.

See the demos here.

CDN

To use the CDN version of Simple-DataTables use either https://cdn.jsdelivr.net/npm/simple-datatables@latest or https://unpkg.com/simple-datatables. You also need to add the CSS styling, so the elements you'll add to html head element can for example be these:

<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>

License

LGPL

Features

Sortable columns
Pagination
Searchable
Customisable layout
Customisable labels
Customise column rendering
Export to common formats like csv, txt json, and sql
Import csv and json data
Control column visibility
Reorder or swap columns
dayjs integration for sorting columns with datetime strings
Extentable with custom plugins See the Simple-DataTables wiki

Simple-DataTables Documentation

Install

npm

npm install simple-datatables --save

Yarn

yarn add simple-datatables

Quick Start

Then just initialise the plugin by import DataTable and either passing a reference to the table or a CSS3 selector string as the first parameter:

import {DataTable} from "simple-datatables"

const myTable = document.querySelector("#myTable");
const dataTable = new DataTable(myTable);

// or

const dataTable = new DataTable("#myTable");

You can also pass the options object as the second parameter:

import {DataTable} from "simple-datatables"

const dataTable = new DataTable("#myTable", {
    searchable: false,
    fixedHeight: true,
    ...
})

If using the CDN:

const dataTable = new simpleDatatables.DataTable("#myTable", {
    searchable: false,
    fixedHeight: true,
    ...
})