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
• ✅ 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