Skip to content
A web-based JavaScript(canvas) spreadsheet
Branch: master
Clone or download
Pull request Compare This branch is 3 commits behind myliang:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
build
dist
docs
src
test
.babelrc
.eslintignore
.eslintrc.js
.gitignore
.travis.yml
CODE_OF_CONDUCT.md
LICENSE
index.html
npmx.txt
package-lock.json
package.json
readme.md

readme.md

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

CDN

<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.js"></script>

<script>
   x.spreadsheet('#xspreadsheet');
</script>

NPM

npm install x-data-spreadsheet
<div id="x-spreadsheet-demo"></div>
import Spreadsheet from "x-data-spreadsheet";
// If you need to override the default options, you can set the override
// const options = {};
// new Spreadsheet('#x-spreadsheet-demo', options);
const s = new Spreadsheet("#x-spreadsheet-demo")
  .loadData({}) // load data
  .change(data => {
    // save data to db
  });

// data validation
s.validate()
// default options
{
  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,
    },
  },
}

Internationalization

// npm 
import Spreadsheet from 'x-data-spreadsheet';
import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';

Spreadsheet.locale('zh-cn', zhCN);
new Spreadsheet(document.getElementById('xss-demo'));
<!-- Import via CDN -->
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.js"></script>
<script src="https://unpkg.com/x-data-spreadsheet@1.0.13/dist/locale/zh-cn.js"></script>

<script>
  x.spreadsheet.locale('zh-cn');
</script>

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
  • Data validations

Development

git clone https://github.com/myliang/x-spreadsheet.git
cd x-spreadsheet
npm install
npm run dev

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

Browser Support

Modern browsers(chrome, firefox, Safari).

LICENSE

MIT

You can’t perform that action at this time.