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


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


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.

    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.


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