Author: | myliang |
---|---|
Views Total: | 6,961 views |
Official Page: | Go to website |
Last Update: | September 13, 2020 |
License: | MIT |
Preview:

Description:
x-spreadsheet is a pure JavaScript library used to generate an Excel & Google Sheets style spreadsheet for the web.
Features:
- Undo/redo
- Paint/clear format
- Text format
- Font family
- Font size
- Bold
- Italic
- Strikethrough
- Text color
- Fill color
- Borders
- Alignment
- Text wrapping
- Freeze cell
- Functions: Sum, Average, Max, Min, and Concat.
- Insert/delete cells, rows & columns.
How to use it:
Install & download the x-spreadsheet.
# NPM $ npm install x-data-spreadsheet --save
Import the Spreadsheet module.
import Spreadsheet from 'x-data-spreadsheet';
Or load the JavaScript & CSS files from a CDN.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/xspreadsheet.css" /> <script src="https://unpkg.com/x-[email protected]/dist/xspreadsheet.js"></script>
Create a container element to hold the spreadsheet.
<div id="demo"></div>
Prepare your data to be loaded in the spreadsheet.
const myData = [{ name: 'sheet-test-1', freeze: 'B3', styles: [ { bgcolor: '#f4f5f8', textwrap: true, color: '#900b09', border: { top: ['thin', '#0366d6'], bottom: ['thin', '#0366d6'], right: ['thin', '#0366d6'], left: ['thin', '#0366d6'], }, }, ], merges: [ 'C3:D4', ], rows: { 1: { cells: { 0: { text: 'testingtesttestetst' }, 2: { text: 'testing' }, }, }, 2: { cells: { 0: { text: 'render', style: 0 }, 1: { text: 'Hello' }, 2: { text: 'haha', merge: [1, 1] }, } }, 8: { cells: { 8: { text: 'border test', style: 0 }, } } }, }, { name: 'sheet-test' } ]
Create a new spreadsheet in the container element you created.
const mySpreadSheet = new Spreadsheet(document.getElementById('demo')).loadData(myData);
Save the data after changed.
mySpreadSheet.change(data => { // save data to db });
Validate the data.
mySpreadSheet.validate();
Possible options. Override the default values and pass the options object as the second parameter to the Spreadsheet
function.
const mySpreadSheet = new Spreadsheet(document.getElementById('demo'),{ mode: 'edit', // edit | read showToolbar: true, showGrid: true, showContextmenu: true, view: { height: () => document.documentElement.clientHeight, width: () => document.documentElement.clientWidth, }, row: { len: 100, height: 25, }, col: { len: 26, width: 100, indexWidth: 60, minWidth: 60, }, style: { bgcolor: '#ffffff', align: 'left', valign: 'middle', textwrap: false, strike: false, underline: false, color: '#0a0a0a', font: { name: 'Helvetica', size: 10, bold: false, italic: false, }, } })
Event handlers.
// fired after selected mySpreadSheet.on('cell-selected', (cell, ri, ci) => {}); mySpreadSheet.on('cells-selected', (cell, { sri, sci, eri, eci }) => {}); // fired after edited mySpreadSheet.on('cell-edited', (text, ri, ci) => {});
Changelog:
v1.1.7 (09/13/2020)
- express computing
v1.1.6 (07/27/2020)
- Autofill 2+ numbers, uses the same number
- Fix border drawing
- print.js bugfix (inch2px return int-value)
- hide-input input padding: 0
- expr bugfix
- supports methods: cell(ri, ci), cellStyle(ri, ci)
- support setCellText
- fixed float precision computing
- copy bugfix when text is =IF(C11>100, Y, N)
v1.1.5 (07/18/2020)
- Bugs fixed
v1.1.1 (04/25/2020)
- Bugs fixed
v1.0.36 (04/03/2020)
- Bugs fixed
- Supports setting multiple borders
v1.0.33 (03/19/2020)
- Bugs fixed
- Support readonly mode
- Doc update
v1.0.29 (03/12/2020)
- Allow to hide column/row
- Adaptive context menu
- draw.js txt => ${txt}
v1.0.29 (02/25/2020)
- Support for multiple sheet
v1.0.28 (02/18/2020)
- Supports print
v1.0.25 (02/06/2020)
- Supports alt + enter
- Supports data copy
v1.0.24 (07/27/2019)
- scrollbar bugfix in macos
v1.0.14 (04/10/2019)
- bugfix
v1.0.12 (03/31/2019)
- bugfix
v1.0.9 (03/08/2019)
- bugfix
v1.0.4 (02/11/2019)
- if the width of the line is an odd number of pixels, draw n.5 else n.0
v1.0.2 (01/31/2019)
- firefox mousewheel bug