Editable Spreadsheet Style Data Grid Library – simple-data-table

Category: Javascript , Recommended , Table | July 29, 2018
Author: piecioshka
Views Total: 1,377
Official Page: Go to website
Last Update: July 29, 2018
License: MIT

Preview:

Editable Spreadsheet Style Data Grid Library – simple-data-table

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
});

You Might Be Interested In:


Leave a Reply