Skip to content
🔨 Lightweight and simple data table with no dependencies
JavaScript CSS
Branch: master
Clone or download
mat3e and piecioshka Sorting API: documentation (#9)
* Improve 'clear passed container' test case and internal function name (_createEmptyRow)

* Add sortByColumn function and its event (SimpleDataTable.EVENTS.DATA_SORTED)

* Remove assertions covered in the previous test case

* Add documentation for sortByColumn and add a screenshot for the first code piece shown in the doc
Latest commit 68b654d Oct 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update FUNDING.yml May 23, 2019
demo Typo fix (#1) Aug 7, 2018
screenshots
src Sorting API (#8) Oct 24, 2019
test Sorting API (#8) Oct 24, 2019
.editorconfig
.eslintignore Support Codecov (#5) Feb 21, 2019
.eslintrc.js v1.0.0 Jul 23, 2018
.gitignore Support Codecov (#5) Feb 21, 2019
.nojekyll v1.0.0 Jul 23, 2018
.travis.yml Travis: Remove support v7 - Add support v13 Oct 24, 2019
README.md
package-lock.json
package.json

README.md

simple-data-table

npm version downloads count travis coveralls

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

You can’t perform that action at this time.