x-spreadsheet

A web-based JavaScript（canvas） spreadsheet

TableSpreadsheet
myliang/x-spreadsheetmyliang.github.io/x-spreadsheetx-data-spreadsheet

README

x-spreadsheet

npm package NPM downloads NPM downloads Build passing codecov
GitHub
GitHub code size in bytes Join the chat at https://gitter.im/x-datav/spreadsheet

A web-based JavaScript spreadsheet



Document

en
zh-cn 中文

CDN

  1. ```html
  2. <link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.5/dist/xspreadsheet.css">
  3. <script src="https://unpkg.com/x-data-spreadsheet@1.1.5/dist/xspreadsheet.js"></script>
  4. <script>
  5.    x_spreadsheet('#xspreadsheet');
  6. </script>
  7. ```

NPM


  1. ```shell
  2. npm install x-data-spreadsheet
  3. ```

  1. ```html
  2. <div id="x-spreadsheet-demo"></div>
  3. ```

  1. ```javascript
  2. import Spreadsheet from "x-data-spreadsheet";
  3. // If you need to override the default options, you can set the override
  4. // const options = {};
  5. // new Spreadsheet('#x-spreadsheet-demo', options);
  6. const s = new Spreadsheet("#x-spreadsheet-demo")
  7.   .loadData({}) // load data
  8.   .change(data => {
  9.     // save data to db
  10.   });

  12. // data validation
  13. s.validate()
  14. ```

  1. ```javascript
  2. // default options
  3. {
  4.   mode: 'edit', // edit | read
  5.   showToolbar: true,
  6.   showGrid: true,
  7.   showContextmenu: true,
  8.   view: {
  9.     height: () => document.documentElement.clientHeight,
  10.     width: () => document.documentElement.clientWidth,
  11.   },
  12.   row: {
  13.     len: 100,
  14.     height: 25,
  15.   },
  16.   col: {
  17.     len: 26,
  18.     width: 100,
  19.     indexWidth: 60,
  20.     minWidth: 60,
  21.   },
  22.   style: {
  23.     bgcolor: '#ffffff',
  24.     align: 'left',
  25.     valign: 'middle',
  26.     textwrap: false,
  27.     strike: false,
  28.     underline: false,
  29.     color: '#0a0a0a',
  30.     font: {
  31.       name: 'Helvetica',
  32.       size: 10,
  33.       bold: false,
  34.       italic: false,
  35.     },
  36.   },
  37. }
  38. ```

import | export xlsx


https://github.com/SheetJS/sheetjs/tree/master/demos/xspreadsheet#saving-data

thanks https://github.com/SheetJS/sheetjs

Bind events

  1. ```javascript
  2. const s = new Spreadsheet("#x-spreadsheet-demo")
  3. // event of click on cell
  4. s.on('cell-selected', (cell, ri, ci) => {});
  5. s.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
  6. // edited on cell
  7. s.on('cell-edited', (text, ri, ci) => {});
  8. ```

update cell-text

  1. ```javascript
  2. const s = new Spreadsheet("#x-spreadsheet-demo")
  3. // cellText(ri, ci, text, sheetIndex = 0)
  4. s.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();
  5. ```

get cell and cell-style

  1. ```javascript
  2. const s = new Spreadsheet("#x-spreadsheet-demo")
  3. // cell(ri, ci, sheetIndex = 0)
  4. s.cell(ri, ci);
  5. // cellStyle(ri, ci, sheetIndex = 0)
  6. s.cellStyle(ri, ci);
  7. ```

Internationalization

  1. ```javascript
  2. // npm
  3. import Spreadsheet from 'x-data-spreadsheet';
  4. import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';

  6. Spreadsheet.locale('zh-cn', zhCN);
  7. new Spreadsheet(document.getElementById('xss-demo'));
  8. ```
  1. ```html
  2. !-- Import via CDN -->
  3. <link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.5/dist/xspreadsheet.css">
  4. <script src="https://unpkg.com/x-data-spreadsheet@1.1.5/dist/xspreadsheet.js"></script>
  5. <script src="https://unpkg.com/x-data-spreadsheet@1.1.5/dist/locale/zh-cn.js"></script>
  6. <script>
  7.   x_spreadsheet.locale('zh-cn');
  8. </script>
  9. ```

Features

  - Undo & Redo
  - Paint format
  - Clear format
  - Format
  - Font
  - Font size
  - Font bold
  - Font italic
  - Underline
  - Strike
  - Text color
  - Fill color
  - Borders
  - Merge cells
  - Align
  - Text wrapping
  - Freeze cell
  - Functions
  - Resize row-height, col-width
  - Copy, Cut, Paste
  - Autofill
  - Insert row, column
  - Delete row, column
  - hide row, column
  - multiple sheets
  - print
  - Data validations

Development


  1. ```sheel
  2. git clone https://github.com/myliang/x-spreadsheet.git
  3. cd x-spreadsheet
  4. npm install
  5. npm run dev
  6. ```

Open your browser and visit http://127.0.0.1:8080.

Browser Support


Modern browsers(chrome, firefox, Safari).

LICENSE


MIT