Spreadsheet.js

Landing page: https://spread-sheet.herokuapp.com/index.html

Documentation: https://spread-sheet.herokuapp.com/documentation.html

Getting started

Get started with Spreadsheet.js by including the source code file as a script in the head of your HTML page:

<script defer type="text/javascript" src="Spreadsheet.js"></script>

Spreadsheets are generated by selecting an empty <div> by its id with the Spreadsheet function, where the spreadsheet will be generated. Then, the createSpreadsheet method must be called on the selected element, passing in the spreadsheet configuration objects. Similarly, adding any optional styles to the spreadsheet requires calling the addCellStyle or addCellStyleSheet methods on the selected element.

It should be noted that the <div> container must be selected by the Spreadsheet function before creating the spreadsheet. Similarly, the spreadsheet must be created before adding any styling rules.

Initializing an existing empty <div> element as a spreadsheet

const mySpreadsheet = Spreadsheet('#myContainer');

Creating a spreadsheet, with options

The first object has keys that will represent the values in the spreadsheet's header row: there will be columns bank, cash ($), credit debt ($), investment portfolio ($), city, and date opened. Each key's respective value is the type of HTML input that that column's cells will accept. For instance, you will be only be able to input numbers into the cash ($) column and HTML dates under the date opened column.

This spreadsheet has all the possible option configurations in the second options object: a number (rowCount) to initialize the number of rows the spreadsheet will start with, a boolean (persistent) to indicate whether the spreadsheet will be saveable, a callback method (submitCallback) that is called with the spreadsheet's 2D array data as an argument when the Submit button is pressed, and a 2D array (data) to preload the spreadsheet's cell contents.

mySpreadsheet.createSpreadsheet(
  {
    bank: 'text',
    'cash ($)': 'number',
    'credit debt ($)': 'number',
    'investment portfolio ($)': 'number',
    city: 'text',
    'dated opened': 'date',
  },
  {
    rowCount: 4,
    persistent: true,
    submitCallback: (tableArray) => console.log(JSON.stringify(tableArray)),
    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']
    ]
  }
);

Adding a single styling rule

Here, cells with the value 10000 will be colored the HTML color green.

mySpreadsheet.addCellStyle('10000', 'green');

Adding a styling rule object for multiple styles

Here, cells with the value TD and RBC will have these hexcode colors respectively.

mySpreadsheet.addCellStyleSheet({ TD: '#64f547', RBC: '#5e87ff' });