🔨 Lightweight and simple data table with no dependencies
https://piecioshka.github.io/simple-data-table/demo/
To run the demo locally (it starts on the first free port from 3000 up):
npm run demo- 📦 No dependencies, no build step (a single
<script>tag is enough) - 🪶 Tiny package (~4 kB of plain JavaScript)
- 🔌 Works as ES module, UMD, CommonJS or AMD module
- 📊 Display any data (array with objects) in simple table layout
- ✏️ Edit cells, add and remove rows out of the box
- 🔀 Smart sorting (numbers as numbers, ISO dates chronologically, text in natural order, empty values last)
- 🧮 Custom comparing function for full control over sorting (
setSortComparingFn()) - 📡 Custom events for updated cells, added and removed rows and sorting (
on(),emit()) - 🎨 Two skins included (light
default.cssand darkmidnight.css) - 🖌️ Support custom skins (style children of
div.simple-data-table) - 🔒 Readonly mode (disabled inputs, no add and remove buttons)
- 🛡️ Your data is never mutated (rows are copied on
load()) - 📘 TypeScript definitions included
- ⛓️ Fluent API (not available in all public methods)
- ♿ Keyboard accessible (visible focus ring on inputs and buttons)
Installation:
npm install simple-data-table<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 $container = document.querySelector('#place-to-render');
const options = {/* all available options are described below */};
const t = new SimpleDataTable($container, options);
t.load([
{
column1: 'Cell 1',
column2: 'Cell 2',
column3: 'Cell 3',
},
{
column1: 'Cell 4',
column2: 'Cell 5',
column3: 'Cell 6',
},
{
column1: 'Cell 7',
column2: 'Cell 8',
column3: 'Cell 9',
},
{
column1: 'Cell 10',
column2: 'Cell 11',
column3: 'Cell 12',
},
]);
t.render();The package also ships an ES module entry point, so import works with a bundler and in Node:
import { SimpleDataTable } from 'simple-data-table';
// a default export is available too:
// import SimpleDataTable from 'simple-data-table';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>The package ships two stylesheets:
<!-- light, used by default -->
<link
rel="stylesheet"
href="node_modules/simple-data-table/src/skins/default.css"
/>
<!-- optional dark skin -->
<link
rel="stylesheet"
href="node_modules/simple-data-table/src/skins/midnight.css"
/>The dark skin is opt-in, so it never overrides your own styles. Add the midnight class to the wrapper after rendering:
t.render();
$container.querySelector('.simple-data-table').classList.add('midnight');Change the label of the button which adds a new row.
const t = new SimpleDataTable($container, {
addButtonLabel: 'New record'
});
t.load(...);
t.render();Define the "name" prefix of cells in newly added columns.
const t = new SimpleDataTable($container, {
defaultColumnPrefix: 'random'
});
t.load(...);
t.render();Define how many columns a new row should contain in an empty table.
By default, the number of headers or the number of cells in the first row of data is used.
const t = new SimpleDataTable($container, {
defaultColumnNumber: 7
});
t.load(...);
t.render();Define class of highlighted cell.
const t = new SimpleDataTable($container, {
defaultHighlightedCellClass: 'my-highlight'
});
t.load(...);
t.render();Disable editing: inputs are disabled and rows cannot be added or removed.
const t = new SimpleDataTable($container, {
readonly: true
});
t.load(...);
t.render();NOTE: Methods which read from the DOM (getRowsCount, findCellsByContent, getCell, highlightCell, clearHighlightedCells, setInputCellContent) require calling render() first.
Render table into DOM.
Get number of rows.
Get list of cell positions which contains passed strings.
Get DOM reference of concrete cell.
Add class to concrete cell.
Remove CSS class of all highlighted cells.
Put content into input in concrete cell.
Setup column headers. Sorting is enabled by default.
Loading data into table component. Rows are copied, so editing cells never mutates the objects passed in.
Trigger event on SimpleDataTable instance.
Listen on events.
Sorts data and triggers DATA_SORTED event.
WARNING: Function sortByColumn() runs render() under the hood.
Replace the default comparing function. Empty values are handled before the function is called, so it never receives null, undefined or ''.
Default comparing function, which picks a strategy from the value types:
- numbers (also numeric strings like
'10') are compared numerically, so2comes before10 - ISO dates (
2026-01-05,2026-01-05T12:00:00Z) are compared chronologically - anything else is compared as text with natural ordering, so
item2comes beforeitem10
Empty values (null, undefined, '') always sink to the bottom, regardless of the sort direction.
Checks whether a value is treated as empty by the sorting logic.
Event is dispatching when you change any of input in table.
const t = new SimpleDataTable($container);
t.on(SimpleDataTable.EVENTS.UPDATE, (data) => {
// do some stuff with the updated data...
});Event is dispatching when you add new record.
const t = new SimpleDataTable($container);
t.on(SimpleDataTable.EVENTS.ROW_ADDED, () => {
// do some stuff...
});Event is dispatching when you remove any record.
const t = new SimpleDataTable($container);
t.on(SimpleDataTable.EVENTS.ROW_REMOVED, () => {
// do some stuff...
});Event is dispatching after data is sorted with sortByColumn function.
const t = new SimpleDataTable($container);
t.on(SimpleDataTable.EVENTS.DATA_SORTED, () => {
// do some stuff...
});Recursive remove children from passed HTMLElement.
The MIT License @ 2026