[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3342":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":34,"discoverSource":35},3342,"x-spreadsheet","myliang\u002Fx-spreadsheet","myliang","The project has been migrated to @wolf-table\u002Ftable https:\u002F\u002Fgithub.com\u002Fwolf-table\u002Ftable","https:\u002F\u002Fmyliang.github.io\u002Fx-spreadsheet",null,"JavaScript",14603,1753,251,360,0,2,7,71.43,"MIT License",false,"master",true,[25,26,27,28,29,30],"canvas","es6","excel","javascript","js","spreadsheet","2026-06-12 04:00:17","# x-spreadsheet\n\n[![npm package](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fx-data-spreadsheet.svg)](https:\u002F\u002Fwww.npmjs.org\u002Fpackage\u002Fx-data-spreadsheet)\n[![NPM downloads](http:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fx-data-spreadsheet.svg)](https:\u002F\u002Fnpmjs.org\u002Fpackage\u002Fx-data-spreadsheet)\n[![NPM downloads](http:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Fx-data-spreadsheet.svg)](https:\u002F\u002Fnpmjs.org\u002Fpackage\u002Fx-data-spreadsheet)\n[![Build passing](https:\u002F\u002Ftravis-ci.org\u002Fmyliang\u002Fx-spreadsheet.svg?branch=master)](https:\u002F\u002Ftravis-ci.org\u002Fmyliang\u002Fx-spreadsheet)\n[![codecov](https:\u002F\u002Fcodecov.io\u002Fgh\u002Fmyliang\u002Fx-spreadsheet\u002Fbranch\u002Fmaster\u002Fgraph\u002Fbadge.svg)](https:\u002F\u002Fcodecov.io\u002Fgh\u002Fmyliang\u002Fx-spreadsheet)\n![GitHub](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fmyliang\u002Fx-spreadsheet.svg)\n![GitHub code size in bytes](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flanguages\u002Fcode-size\u002Fmyliang\u002Fx-spreadsheet.svg)\n[![Join the chat at https:\u002F\u002Fgitter.im\u002Fx-datav\u002Fspreadsheet](https:\u002F\u002Fbadges.gitter.im\u002Fx-datav\u002Fspreadsheet.svg)](https:\u002F\u002Fgitter.im\u002Fx-datav\u002Fspreadsheet?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)\n\n> A web-based JavaScript spreadsheet\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmyliang\u002Fx-spreadsheet\">\n    \u003Cimg width=\"100%\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fmyliang\u002Fx-spreadsheet\u002Fmaster\u002Fdocs\u002Fdemo.png\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n## Document\n* en\n* [zh-cn 中文](https:\u002F\u002Fhondrytravis.github.io\u002Fx-spreadsheet-doc\u002F)\n\n## CDN\n```html\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Fx-data-spreadsheet@1.1.5\u002Fdist\u002Fxspreadsheet.css\">\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fx-data-spreadsheet@1.1.5\u002Fdist\u002Fxspreadsheet.js\">\u003C\u002Fscript>\n\n\u003Cscript>\n   x_spreadsheet('#xspreadsheet');\n\u003C\u002Fscript>\n```\n\n## NPM\n\n```shell\nnpm install x-data-spreadsheet\n```\n\n```html\n\u003Cdiv id=\"x-spreadsheet-demo\">\u003C\u002Fdiv>\n```\n\n```javascript\nimport Spreadsheet from \"x-data-spreadsheet\";\n\u002F\u002F If you need to override the default options, you can set the override\n\u002F\u002F const options = {};\n\u002F\u002F new Spreadsheet('#x-spreadsheet-demo', options);\nconst s = new Spreadsheet(\"#x-spreadsheet-demo\")\n  .loadData({}) \u002F\u002F load data\n  .change(data => {\n    \u002F\u002F save data to db\n  });\n\n\u002F\u002F data validation\ns.validate()\n```\n\n```javascript\n\u002F\u002F default options\n{\n  mode: 'edit', \u002F\u002F edit | read\n  showToolbar: true,\n  showGrid: true,\n  showContextmenu: true,\n  view: {\n    height: () => document.documentElement.clientHeight,\n    width: () => document.documentElement.clientWidth,\n  },\n  row: {\n    len: 100,\n    height: 25,\n  },\n  col: {\n    len: 26,\n    width: 100,\n    indexWidth: 60,\n    minWidth: 60,\n  },\n  style: {\n    bgcolor: '#ffffff',\n    align: 'left',\n    valign: 'middle',\n    textwrap: false,\n    strike: false,\n    underline: false,\n    color: '#0a0a0a',\n    font: {\n      name: 'Helvetica',\n      size: 10,\n      bold: false,\n      italic: false,\n    },\n  },\n}\n```\n\n## import | export xlsx\n\nhttps:\u002F\u002Fgithub.com\u002FSheetJS\u002Fsheetjs\u002Ftree\u002Fmaster\u002Fdemos\u002Fxspreadsheet#saving-data\n\nthanks https:\u002F\u002Fgithub.com\u002FSheetJS\u002Fsheetjs\n\n## Bind events\n```javascript\nconst s = new Spreadsheet(\"#x-spreadsheet-demo\")\n\u002F\u002F event of click on cell\ns.on('cell-selected', (cell, ri, ci) => {});\ns.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});\n\u002F\u002F edited on cell\ns.on('cell-edited', (text, ri, ci) => {});\n```\n\n## update cell-text\n```javascript\nconst s = new Spreadsheet(\"#x-spreadsheet-demo\")\n\u002F\u002F cellText(ri, ci, text, sheetIndex = 0)\ns.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();\n```\n\n## get cell and cell-style\n```javascript\nconst s = new Spreadsheet(\"#x-spreadsheet-demo\")\n\u002F\u002F cell(ri, ci, sheetIndex = 0)\ns.cell(ri, ci);\n\u002F\u002F cellStyle(ri, ci, sheetIndex = 0)\ns.cellStyle(ri, ci);\n```\n\n## Internationalization\n```javascript\n\u002F\u002F npm \nimport Spreadsheet from 'x-data-spreadsheet';\nimport zhCN from 'x-data-spreadsheet\u002Fdist\u002Flocale\u002Fzh-cn';\n\nSpreadsheet.locale('zh-cn', zhCN);\nnew Spreadsheet(document.getElementById('xss-demo'));\n```\n```html\n\u003C!-- Import via CDN -->\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Fx-data-spreadsheet@1.1.5\u002Fdist\u002Fxspreadsheet.css\">\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fx-data-spreadsheet@1.1.5\u002Fdist\u002Fxspreadsheet.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fx-data-spreadsheet@1.1.5\u002Fdist\u002Flocale\u002Fzh-cn.js\">\u003C\u002Fscript>\n\n\u003Cscript>\n  x_spreadsheet.locale('zh-cn');\n\u003C\u002Fscript>\n```\n\n## Features\n  - Undo & Redo\n  - Paint format\n  - Clear format\n  - Format\n  - Font\n  - Font size\n  - Font bold\n  - Font italic\n  - Underline\n  - Strike\n  - Text color\n  - Fill color\n  - Borders\n  - Merge cells\n  - Align\n  - Text wrapping\n  - Freeze cell\n  - Functions\n  - Resize row-height, col-width\n  - Copy, Cut, Paste\n  - Autofill\n  - Insert row, column\n  - Delete row, column\n  - hide row, column\n  - multiple sheets\n  - print\n  - Data validations\n\n## Development\n\n```sheel\ngit clone https:\u002F\u002Fgithub.com\u002Fmyliang\u002Fx-spreadsheet.git\ncd x-spreadsheet\nnpm install\nnpm run dev\n```\n\nOpen your browser and visit http:\u002F\u002F127.0.0.1:8080.\n\n## Browser Support\n\nModern browsers(chrome, firefox, Safari).\n\n## LICENSE\n\nMIT\n","x-spreadsheet 是一个基于 Web 的 JavaScript 电子表格库。它支持数据的导入导出、单元格样式设置、数据验证等功能，并且可以轻松集成到网页中。项目使用了 ES6 语法和 Canvas 技术进行渲染，使得其在性能上表现出色。此外，它提供了丰富的 API 和配置选项，允许开发者根据需求自定义表格的行为和外观。适用于需要在网页中嵌入类似 Excel 功能的应用场景，如在线数据编辑、报表展示等。","2026-06-11 02:53:39","top_language"]