:hammer: Lightweight and simple data table with no dependencies

repo name	piecioshka/simple-data-table
repo link	https://github.com/piecioshka/simple-data-table
homepage	https://piecioshka.github.io/simple-data-table/demo/
language	JavaScript
size (curr.)	201 kB
stars (curr.)	162
created	2018-07-23
license

simple-data-table

:hammer: Lightweight and simple data table with no dependencies

Features

• :white_check_mark: Display data (array with objects) in simple table
• :white_check_mark: Lazy loading of data (you can load data whenever you can)
• :white_check_mark: Support custom skins
• :white_check_mark: Small size of package
• :white_check_mark: No dependencies
• :white_check_mark: Support custom events (update, add, remove)
• :white_check_mark: Fluent API
• :white_check_mark: API: Find cells with content
• :white_check_mark: API: Highlight cells
• :white_check_mark: API: Support put value into single cell
• :white_check_mark: API: Sorting by a concrete cell with a given function

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.

sortByColumn( cellIndex : number, comparingFunction : Function )

Sorts data and triggers DATA_SORTED event. By default takes cellIndex=0 and sorts as String.prototype.localeCompare.

Events

SimpleDataTable.EVENTS.UPDATE

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

Example:

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

SimpleDataTable.EVENTS.ROW_ADDED

Event 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

Event is dispatching when you remove any record.

Example:

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

SimpleDataTable.EVENTS.DATA_SORTED

Event is dispatching after data is sorted with sortByColumn function.

Example:

const d = new SimpleDataTable($container);
d.on(SimpleDataTable.EVENTS.DATA_SORTED, () => {
    // 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