Easy Spreadsheet-like Data Table In JavaScript – spreadsheet.js

Preview:

Description:

Just another spreadsheet JavaScript library that can be used to add/remove/edit/display data in a data table just like a spreadsheet.

More Features:

• Use web storage to persist data between pages or visits.
• Populate the spreadsheet with existing data.
• Callback functions.

How to use it:

1. Download the zip and include the spreadsheet.js JavaScript library on the page.

<script src="Spreadsheet.js"></script>

2. Create a container for the spreadsheet.

<div id="example"></div>

3. Create a new spreadsheet and define the table headers as follows:

const example = Spreadsheet('#example');
example.createSpreadsheet(
  {
    bank: 'text',
    'cash ($)': 'number',
    'credit debt ($)': 'number',
    'investment portfolio ($)': 'number',
    city: 'text',
    'dated opened': 'date',
  },
  {
    // configs here
  }
);

4. Add data to the spreadsheet.

const example = Spreadsheet('#example');
example.createSpreadsheet(
  {
    bank: 'text',
    'cash ($)': 'number',
    'credit debt ($)': 'number',
    'investment portfolio ($)': 'number',
    city: 'text',
    'dated opened': 'date',
  },
  {
    data: [
      ['TD', '10000', '1000000', '34535', 'Toronto', '2021-04-06'],
      ['RBC', '50000', '325345', '76868', 'Markham', '2020-06-22'],
      ['AmEx', '10000000', '5644', '76054', 'New York City', '2020-07-06'],
    ],
  }
);

5. Specify the number of rows. Default: 1.

const example = Spreadsheet('#example');
example.createSpreadsheet(
  {
    bank: 'text',
    'cash ($)': 'number',
    'credit debt ($)': 'number',
    'investment portfolio ($)': 'number',
    city: 'text',
    'dated opened': 'date',
  },
  {
    rowCount: 4
  }
);

6. Determine whether to persist data between pages or visits using local storage. Default: false.

const example = Spreadsheet('#example');
example.createSpreadsheet(
  {
    bank: 'text',
    'cash ($)': 'number',
    'credit debt ($)': 'number',
    'investment portfolio ($)': 'number',
    city: 'text',
    'dated opened': 'date',
  },
  {
    persistent: true
  }
);

7. Execute a callback function when the user presses the “Submit” button.

const example = Spreadsheet('#example');
example.createSpreadsheet(
  {
    bank: 'text',
    'cash ($)': 'number',
    'credit debt ($)': 'number',
    'investment portfolio ($)': 'number',
    city: 'text',
    'dated opened': 'date',
  },
  {
    submitCallback: (tableArray) =>
      alert(`Your table is currently ${tableArray.length} rows long!`),
    }
);

8. Add custom colors to cell values.

example.addCellStyle(cellValue, color);
// or
example.addCellStyleSheet({
  cellValue1: color1,
  cellValue2: color2,
  // ...
})