Author: | HuIsJason |
---|---|
Views Total: | 1,104 views |
Official Page: | Go to website |
Last Update: | May 25, 2021 |
License: | MIT |
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, // ... })