Author: | piecioshka |
---|---|
Views Total: | 2,175 views |
Official Page: | Go to website |
Last Update: | October 14, 2020 |
License: | MIT |
Preview:

Description:
A dependency-free data table library helps you render a dynamic, editable, spreadsheet-style data grid with the support of inline editing, add/remove rows, data lazy loading and more.
How to use it:
Load the JavaScript and default skin CSS in your html file.
<link rel="stylesheet" href="/src/skins/default.css"> <script src="/src/index.js"></script>
Create a container for the data grid.
<div id="example"></div>
Initialize the data grid.
const myDataGrid = new SimpleDataTable(document.querySelector('#example'));
Load tabular data into the data grid.
myDataGrid.load([ { column1: 'Cell 1', column2: 'Cell 2', // more columns here }, { column1: 'Cell 1 (row 2)', column2: 'Cell 2 (row 2)', // more columns here } ]);
Render the data grid in the container element you just created.
myDataGrid.render()
Possible options to customize the data grid.
const myDataGrid = new SimpleDataTable(document.querySelector('#example'),{ // lable text for add button addButtonLabel: '✚', // default column prefix defaultColumnPrefix: 'column', // default number of columns defaultColumnNumber: 3 });
Event handlers.
myDataGrid.on(SimpleDataTable.EVENTS.UPDATE, () => { // on update }); myDataGrid.on(SimpleDataTable.EVENTS.ROW_ADDED, () => { // after a new row is added }); myDataGrid.on(SimpleDataTable.EVENTS.ROW_REMOVED, () => { // after a row is removed });
Changelog:
v1.3.0 (10/14/2020)
- Update
and how to set or read specific cell value ?