simple-data-table
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✅ API: Find cells with content✅ API: Highlight cells✅ API: Support put value into single cell
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();
defaultHighlightedCellClass
(Default: 'highlighted-cell')
Define class of highlighted cell.Example:
const d = new SimpleDataTable($container, { defaultHighlightedCellClass: 'my-highlight' }); d.load(...); d.render();
API
render(): SimpleDataTable
Render table into DOM.
getRowsCount(): number
Get number of rows.
findCellsByContent(...content): Array<{ rowIndex: number, cellIndex: number }>
Get list of cell positions which contains passed strings.
getCell( rowIndex: number , cellIndex: number ): HTMLElement || null
Get DOM reference of concrete cell.
highlightCell( rowIndex: number, cellIndex: number )
Add class to concrete cell.
clearHighlightedCells()
Remove CSS class of all highlighted cells.
setInputCellContent( rowIndex: number, cellIndex: number, content: string )
Put content into input in concrete cell.
load( data: Array )
Loading data into table component.
emit( name: string, payload: any )
Trigger event on SimpleDataTable instance.
on( name: string, handler: Function )
Listen on events.
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
npm run coverage
License
The MIT License @ 2018