GitHub - piecioshka/simple-data-table: Lightweight and simple data table with no...
source link: https://github.com/piecioshka/simple-data-table
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
simple-data-table
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK