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

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