JavaScript Library For Spreadsheet Style Tables – Spreadsheet.js

Category: Javascript , Table | August 3, 2018
Author: ChiefOfGxBxL
Views Total: 2,531
Official Page: Go to website
Last Update: August 3, 2018
License: MIT

Preview:

JavaScript Library For Spreadsheet Style Tables – Spreadsheet.js

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.

You Might Be Interested In:


Leave a Reply