x-spreadsheet README

The project's README from github.com/myliang/x-spreadsheet. As one markdown file: 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

Document

CDN

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/xspreadsheet.css">
<script src="https://unpkg.com/[email protected]/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
{
  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,
    },
  },
}

import | export xlsx

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

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

Bind events

const s = new Spreadsheet("#x-spreadsheet-demo")
// event of click on cell
s.on('cell-selected', (cell, ri, ci) => {});
s.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
// edited on cell
s.on('cell-edited', (text, ri, ci) => {});

update cell-text

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

get cell and cell-style

const s = new Spreadsheet("#x-spreadsheet-demo")
// cell(ri, ci, sheetIndex = 0)
s.cell(ri, ci);
// cellStyle(ri, ci, sheetIndex = 0)
s.cellStyle(ri, ci);

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/[email protected]/dist/xspreadsheet.css">
<script src="https://unpkg.com/[email protected]/dist/xspreadsheet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/locale/zh-cn.js"></script>

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

Features

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

x-spreadsheet (myliang/x-spreadsheet)

html5-canvas
Searching Database…

14.6K ·GitHub
X-spreadsheet
What is this?A web-based JavaScript spreadsheet: an Excel-like, editable grid that runs in the browser.
Is it a ready app like Google Sheets, or something I embed in my own site?It is a front-end library, not a hosted app: you embed it in your own page and it renders the spreadsheet widget; there is no backend.
How do I add it to a page?Install the package from npm or add it via a CDN script tag, then mount it on a container element — the README documents both routes.
Is this project still maintained?Not anymore: the project has been migrated to @wolf-table/table, so new development happens in that repo.
Is it free to use, even commercially?It is MIT-licensed, so it is free to use, modify and ship in commercial products.
How is the grid rendered — does it need React, Vue or jQuery?No framework is needed: it is plain ES6 JavaScript drawing on an HTML5 canvas, and its package.json has no runtime dependencies — just an OpenCollective postinstall hook.
How do I work on it locally?Clone the repo, run npm install, then npm run dev — a webpack dev server starts and opens your browser; npm run build produces the production bundle.
What are similar projects?handsontable, ag-grid, univer, sheetjs, Luckysheet, table, pell, dsh-univer-office
Which topics is it in?html5-canvas, datagrid, table, grid, spreadsheet, js, xlsx, excel, es6, canvas, editor, javascript-library
Creator
myliang
Size
4 MB
Stars
14.6K
Updated
CommitAug 15Releasev1.1.7Sep 13
Age
8y
Commits · 90 Days