JavaScript Library For Spreadsheet Style Tables – Spreadsheet.js

Preview:

Description:

Spreadsheet.js is a tiny JavaScript library to easily creates and utilize tables that act as worksheets. Similar to the Excel spreadsheet.

Features:

• Columns labeled by letters (A,B,…,AA,…ZZ); rows labeled with line numbers
• Add new columns and rows
• Easily select cells by spreadsheet-style names (A5, G15, etc.)
• Tab through cells to quickly edit them in succession
• Attach event-handlers to table events (some implemented, others still under development)

Basic usage:

To get started, just include the Spreadsheet.js JavaScript file on the webpage and we’re ready to go.

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

Create a table in ‘container’ with 10 rows, 5 columns.

var container = document.getElementById("container");
myTable = new Spreadsheet(container,10,5);

Apply your custom CSS styles to the spreadsheet.

.Tablejs {
  border: 1px SOLID #DDD;
  border-spacing: 0;
  border-collapse: collapse;
}
.Tablejs-gray {
  background-color: #EEE;
  text-align: center !important;
  font-size: 0.8em;
  border-bottom: 1px SOLID #DDD;
}
.Tablejs tr { }
.Tablejs td:first-child { border: 1px SOLID #DDD; } /* Selects the row counter column */
.Tablejs th {
  background-color: #EEE;
  border-bottom: 1px SOLID #DDD;
  border-right: 1px SOLID #DDD;
  width: 40px;
  font-size: 0.9em;
  font-weight: normal;
}
.Tablejs td {
  border: 1px SOLID #EEE;
  text-align: right;
  padding: 2px;
  cursor: default;
}
.Tablejs .cellFocus {
  border: 2px SOLID #41A1F0;
  padding: 1px 2px;
}
.Tablejs td[contentEditable="true"] {
  border: 2px SOLID #1D76BF;
  cursor: text;
}

Changelog:

08/03/2018

• Support for `data` field in options, which allows a spreadsheet to be populated with specified values when created. Data overrides the `rows` and `cols` fields, appropriately sizing the spreadsheet to fit all the provided data.