Skip to content
A web-based JavaScript(canvas) spreadsheet
JavaScript CSS HTML
Branch: master
Clone or download
myliang Merge pull request #255 from welkinwong/master
Fix mouse leaving window is resizer does not disappear
Latest commit d52281a Feb 19, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update FUNDING.yml Dec 19, 2019
assets form: input, field, input Mar 21, 2019
build move config Mar 1, 2019
dist update demo Feb 18, 2020
docs update demo Feb 18, 2020
src fix mouse leaving window is resizer does not disappear Feb 18, 2020
test add test files Oct 10, 2019
.babelrc scrollbar bugfix in macos Jun 6, 2019
.eslintignore i18n Mar 1, 2019
.eslintrc.js add validator to data validations Mar 4, 2019
.gitignore add test files Oct 10, 2019
.travis.yml codecov Apr 4, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Apr 1, 2019
LICENSE add MIT LICENSE Jan 28, 2019
index.html add <github.star> to doc.index Feb 18, 2020
npmx.txt docs.. Jan 28, 2019
package-lock.json 1.0.28 Feb 17, 2020
package.json 1.0.28 Feb 17, 2020
readme.md add validate() Apr 15, 2019

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.