simple-data-table

Start in 30 seconds

Point the table at a container, hand it an array of objects and call render(). Every cell is editable, and rows can be added or removed right away.

<link rel="stylesheet" href="node_modules/simple-data-table/src/skins/default.css">
<script src="node_modules/simple-data-table/src/index.js"></script>

const t = new SimpleDataTable(document.querySelector('#table'));

t.load([
    { name: 'Ada Lovelace', role: 'Engineering', city: 'London' },
    { name: 'Grace Hopper', role: 'Compilers', city: 'New York' },
]);
t.render();

ES modules

Prefer import over a global? The package ships an ES module entry point, so it works with a bundler, with <script type="module"> and in Node. The table below is rendered by an imported module, not by the global build.

import { SimpleDataTable } from 'simple-data-table';
// a default export is available too:
// import SimpleDataTable from 'simple-data-table';

const t = new SimpleDataTable(document.querySelector('#table'));
t.setHeaders(['Name', 'Role', 'City']);
t.load(team);
t.render();

Straight from a browser, without a bundler, point the import at the file itself:

<script type="module">
    import { SimpleDataTable } from './node_modules/simple-data-table/src/index.mjs';
</script>

Sorting that understands data

Click a header to sort. Numbers are compared as numbers, so 1280 lands below 15300 rather than above it. ISO dates sort chronologically, text sorts naturally, and empty cells always sink to the bottom.

Try the downloads and released columns — one row has no release date on purpose.

t.setHeaders(['Version', 'Downloads', 'Released']);
t.load(releases);
t.render();

// Sorting is wired to the headers, but you can also trigger it:
t.sortByColumn(1);

Events for everything

The table tells you when a cell changes, a row is added or removed and when data gets sorted. Edit the table below and watch the log fill up.

• No events yet — edit a cell, add or remove a row.

t.on(SimpleDataTable.EVENTS.UPDATE, (data) => console.log('updated', data));
t.on(SimpleDataTable.EVENTS.ROW_ADDED, () => console.log('row added'));
t.on(SimpleDataTable.EVENTS.ROW_REMOVED, () => console.log('row removed'));
t.on(SimpleDataTable.EVENTS.DATA_SORTED, () => console.log('sorted'));

Read-only mode

Flip one option to turn the same table into a display grid: inputs are disabled and the add and remove buttons are gone.

const t = new SimpleDataTable($container, { readonly: true });
t.load(invoices);
t.render();

Bring your own skin

Styling is a plain stylesheet targeting children of div.simple-data-table. The package ships a light default and a dark midnight skin.

<link rel="stylesheet" href="node_modules/simple-data-table/src/skins/midnight.css">

t.render();

// The dark skin is opt-in, so it never overrides your own styles:
$container.querySelector('.simple-data-table').classList.add('midnight');

Playground

Change the data or the options and the table below re-renders as you type.

API at a glance

The full reference lives in the README.