Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
Aug 14, 2021
Jul 23, 2018
Jul 23, 2018
Dec 31, 2021
Dec 31, 2021
Dec 31, 2021

simple-data-table

npm version downloads count travis-ci 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

About

🔨 Lightweight and simple data table with no dependencies

Resources

Stars

Watchers

Forks

Packages

No packages published