πŸ”¨ Lightweight and simple data table with no dependencies
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 30c6e1a Aug 7, 2018
Permalink
Failed to load latest commit information.
demo Typo fix (#1) Aug 7, 2018
screenshots Brand new screenshot Jul 23, 2018
src v1.0.0 Jul 23, 2018
test v1.0.0 Jul 23, 2018
.editorconfig v1.0.0 Jul 23, 2018
.eslintignore ESLint ignore demo directory Jul 23, 2018
.eslintrc.js v1.0.0 Jul 23, 2018
.gitignore v1.0.0 Jul 23, 2018
.nojekyll v1.0.0 Jul 23, 2018
.travis.yml v1.0.0 Jul 23, 2018
README.md Add list of features Jul 23, 2018
package-lock.json 1.0.1 Jul 23, 2018
package.json 1.0.1 Jul 23, 2018

README.md

simple-data-table

npm version downloads count travis dependencies

Lightweight and simple data table with no dependencies

Features

  • 🏁 Display data (array with objects) in simple table
  • 🏁 Lazy loading of data (you can load data whenever you can)
  • 🏁 Support custom skins
  • 🏁 Small size of package
  • 🏁 No dependencies
  • 🏁 Support custom events (update, add, remove)
  • 🏁 Fluent API
  • 🚧 Recognize data in input and change input type

Installation

npm install simple-data-table
<link rel="stylesheet" href="src/skins/default.css"/>
<script src="src/index.js"></script>
const $container = document.querySelector('#place-to-render');
const d = new SimpleDataTable($container, options);
d.load([
    {
        column1: 'Cell 1',
        column2: 'Cell 2',
        column3: 'Cell 3'
    },
    {
        column1: 'Cell 1 (row 2)',
        column2: 'Cell 2 (row 2)',
        column3: 'Cell 3 (row 2)'
    }
]);
d.render();

Examples

More examples: https://piecioshka.github.io/simple-data-table/demo/

Options

addButtonLabel (Default: '✚')

Change value od button which add new row.

Example:

const d = new SimpleDataTable($container, {
    addButtonLabel: 'New record'
});
d.load(...);
d.render();

defaultColumnPrefix (Default: 'column')

Define what "name" should have cells in new added columns.

Example:

const d = new SimpleDataTable($container, {
    defaultColumnPrefix: 'random'
});
d.load(...);
d.render();

defaultColumnNumber (Default: 3)

Define how much columns should contain row in empty table.

Example:

const d = new SimpleDataTable($container, {
    defaultColumnNumber: '7'
});
d.load(...);
d.render();

Events

SimpleDataTable.EVENTS.UPDATE

Events is dispatching when you change any of input in table.

Example:

const d = new SimpleDataTable($container);
d.on(SimpleDataTable.EVENTS.UPDATE, () => {
    // do some stuff...
});

SimpleDataTable.EVENTS.ROW_ADDED

Events is dispatching when you add new record.

Example:

const d = new SimpleDataTable($container);
d.on(SimpleDataTable.EVENTS.ROW_ADDED, () => {
    // do some stuff...
});

SimpleDataTable.EVENTS.ROW_REMOVED

Events is dispatching when you remove any record.

Example:

const d = new SimpleDataTable($container);
d.on(SimpleDataTable.EVENTS.ROW_REMOVED, () => {
    // do some stuff...
});

Tested browsers

  • Safari v10.1.2
  • Firefox v61.0.1
  • Chrome v67.0.3396.99
  • Opera v51.0.2830.40

Unit tests

npm test

Code coverage

Check code coverage with Istanbul:

npm run coverage

License

The MIT License @ 2018