Have ideas to improve npm?Join in the discussion! »

simple-data-table

1.3.0 • Public • Published

simple-data-table

npm version downloads count travis coveralls

🔨 Lightweight and simple data table with no dependencies

Features

  • ✅ Display any data (array with objects) in simple table layout
  • ✅ Support custom skins (style children of div.simple-data-table)
  • ✅ Small size of package
  • ✅ No dependencies
  • ✅ Support custom events (on, emit)
    • Updated cell content
    • Row removed
    • Row added
    • Sorted table
  • ✅ Fluent API (not available in all public methods)
  • ✅ API
    • Lazy loading of data (load())
    • Read number of rows (getRowsCount())
    • Get content from concrete cell (getCell)
    • Find cells which contains concrete text (findCellsByContent())
    • Highlight cells (highlightCell, clearHighlightedCells())
    • Support put value into single cell (setInputCellContent())
    • Sorting by a concrete cell with a given function (sortByColumn())
    • Define headers, as a first row (setHeaders())
  • ✅ Readonly Mode

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 t = new SimpleDataTable($container, options);
t.load([
    {
        column1: 'Cell 1',
        column2: 'Cell 2',
        column3: 'Cell 3'
    },
    {
        column1: 'Cell 4',
        column2: 'Cell 5',
        column3: 'Cell 6'
    },
    {
        column1: 'Cell 7',
        column2: 'Cell 8',
        column3: 'Cell 9'
    },
    {
        column1: 'Cell 10',
        column2: 'Cell 11',
        column3: 'Cell 12'
    }
]);
t.render();

Examples

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

Options

addButtonLabel (Default: '✚')

Change value od button which add new row.

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

defaultColumnPrefix (Default: 'column')

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

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

defaultColumnNumber (Default: null)

Define how much columns should contain row in empty table.

By default, use the size of headers or the number of cells in the first row.

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

defaultHighlightedCellClass (Default: 'highlighted-cell')

Define class of highlighted cell.

const t = new SimpleDataTable($container, {
    defaultHighlightedCellClass: 'my-highlight'
});
t.load(...);
t.render();

readonly (Default: false)

Define class of highlighted cell.

const t = new SimpleDataTable($container, {
    readonly: true
});
t.load(...);
t.render();

API

render(): SimpleDataTable

Render table into DOM.

getRowsCount(): number

Get number of rows.

findCellsByContent( ...content: Array<string> ): 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.

setHeaders( items: Array<string> )

Setup column headers. Sorting is enabled by default.

load( data: Array<object> )

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.

WARNING: Function sortByColumn() runs render() under the hood.

Events

SimpleDataTable.EVENTS.UPDATE

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

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

SimpleDataTable.EVENTS.ROW_ADDED

Event is dispatching when you add new record.

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

SimpleDataTable.EVENTS.ROW_REMOVED

Event is dispatching when you remove any record.

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

SimpleDataTable.EVENTS.DATA_SORTED

Event is dispatching after data is sorted with sortByColumn function.

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

Static

SimpleDataTable.clearElement( $element: HTMLElement )

Recursive remove children from passed HTMLElement.

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

Install

npm i simple-data-table

DownloadsWeekly Downloads

5

Version

1.3.0

License

MIT

Unpacked Size

18 kB

Total Files

4

Last publish

Collaborators

  • avatar