Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
By Kush Pandya - Jun 13, 2025
🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
gridjs-spreadsheet
Advanced tools
gridjs-spreadsheet
this is the client side script for GridJs which is a lightweight, scalable, and customizable toolkit that provides cross-platform web applications, enables convenient development for editing or viewing Excel/Spreadsheet files, offers simple deployment, an
gridjs-spreadsheet
this is the client side script for GridJs which is a lightweight, scalable, and customizable toolkit that provides cross-platform web applications, enables convenient development for editing or viewing Excel/Spreadsheet files, offers simple deployment, and provides easy-to-use APIs
About
It allows you to view and edit spreadsheet files with ease.
this is developed based on https://github.com/myliang/x-spreadsheet
Quick online demo: https://products.aspose.app/cells/editor
Preview
API
APIs are available on the API page.
CDN
<head>
<!-- other dependency start -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/jquery-ui@1.13.2/dist/themes/ui-lightness/jquery-ui.min.css">
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/jquery-ui@1.13.2/dist/jquery-ui.min.js"></script>
<script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
<!-- other dependency end -->
<link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.css">
<script src="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.js"></script>
<script>
const option = {
updateMode: 'server',
updateUrl: '/GridJs2/UpdateCell',
showToolbar: true,
//mode: 'edit' or 'read'
mode: 'read',
//support multiple language ,the locale is:en, cn, es, pt, de, ru, nl, ar, fr,id,it,ja, ko,th,tr,vi,cht
local: 'en',
};
const sheetstr="[{\"name\":\"Sheet1\",\"sheetid\":\"s0\",\"showGrid\":true,\"sprotected\":false,\"canselectlocked\":true,\"displayRight2Left\":false,\"canselectunlocked\":true,\"styles\":[{\"textwrap\":true,\"color\":\"#000000\",\"valign\":\"middle\",\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"italic\":false}},{\"textwrap\":false,\"color\":\"#000000\",\"valign\":\"middle\",\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"italic\":false}}],\"cols\":{\"0\":{\"width\":72},\"1\":{\"width\":72},\"2\":{\"width\":532},\"3\":{\"width\":72},\"4\":{\"width\":72},\"5\":{\"width\":72},\"6\":{\"width\":72},\"7\":{\"width\":72},\"8\":{\"width\":72},\"9\":{\"width\":72},\"10\":{\"width\":72},\"11\":{\"width\":72},\"12\":{\"width\":72},\"13\":{\"width\":72},\"14\":{\"width\":72},\"15\":{\"width\":72},\"len\":16},\"rows\":{\"3\":{\"height\":122,\"cells\":{\"2\":{\"text\":\"FFF呜呜呜\\n呜我 我我我我\\nnice wwwwww\\nexample work 测的的的的的的的到\\n到手 一级 一季报 击败发发发发发发发发发发发\",\"style\":0,\"rtxt\":[{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"F\"},{\"font\":{\"name\":\"arial\",\"size\":18,\"bold\":false,\"color\":\"#953735\",\"italic\":false},\"txt\":\"FF呜\"},{\"font\":{\"name\":\"arial\",\"size\":18,\"bold\":false,\"color\":\"#953735\",\"underline\":\"single\",\"italic\":false},\"txt\":\"呜\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"underline\":\"single\",\"italic\":false},\"txt\":\"呜\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"\\n呜\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#0070C0\",\"italic\":false},\"txt\":\"我 我我\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"我我\\nni\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":true,\"color\":\"#C00000\",\"italic\":true},\"txt\":\"ce wwwwww\\nexample\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\" work \"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#C0504D\",\"italic\":false},\"txt\":\"测的的的\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#C0504D\",\"underline\":\"double\",\"italic\":false},\"txt\":\"的的\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"underline\":\"double\",\"italic\":false},\"txt\":\"的\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"的到\\n到手 \"},{\"font\":{\"name\":\"arial\",\"size\":18,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"一级 一季\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"报 击败发\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#9BBB59\",\"italic\":false},\"txt\":\"发发发发发发\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"发发发发\"}],\"html\":\"<Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">F</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 18pt;COLOR: #953735;\\\">FF呜</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 18pt;COLOR: #953735;\\\">呜</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">呜</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\"><Br>呜</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #0070c0;\\\">我 我我</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">我我<Br>ni</Font><Font Style=\\\"FONT-WEIGHT: bold;FONT-STYLE: italic;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #c00000;\\\">ce wwwwww<Br>example</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\"> work </Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #c0504d;\\\">测的的的</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #c0504d;\\\">的的</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">的</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">的到<Br>到手 </Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 18pt;COLOR: #000000;\\\">一级 一季</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">报 击败发</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #9bbb59;\\\">发发发发发发</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">发发发发</Font>\"},\"4\":{\"text\":\"\",\"style\":1}}},\"len\":13,\"height\":19}},{\"name\":\"Sheet2\",\"sheetid\":\"s1\",\"showGrid\":true,\"sprotected\":false,\"canselectlocked\":true,\"displayRight2Left\":false,\"canselectunlocked\":true,\"cols\":{\"0\":{\"width\":72},\"1\":{\"width\":72},\"2\":{\"width\":72},\"3\":{\"width\":72},\"4\":{\"width\":72},\"5\":{\"width\":72},\"6\":{\"width\":72},\"7\":{\"width\":72},\"8\":{\"width\":72},\"9\":{\"width\":72},\"10\":{\"width\":72},\"11\":{\"width\":72},\"12\":{\"width\":72},\"13\":{\"width\":72},\"14\":{\"width\":72},\"15\":{\"width\":72},\"len\":16},\"rows\":{\"12\":{\"height\":19,\"cells\":{\"15\":{\"text\":\"\"}}},\"len\":13,\"height\":19}},{\"name\":\"Sheet3\",\"sheetid\":\"s2\",\"showGrid\":true,\"sprotected\":false,\"canselectlocked\":true,\"displayRight2Left\":false,\"canselectunlocked\":true,\"cols\":{\"0\":{\"width\":72},\"1\":{\"width\":72},\"2\":{\"width\":72},\"3\":{\"width\":72},\"4\":{\"width\":72},\"5\":{\"width\":72},\"6\":{\"width\":72},\"7\":{\"width\":72},\"8\":{\"width\":72},\"9\":{\"width\":72},\"10\":{\"width\":72},\"11\":{\"width\":72},\"12\":{\"width\":72},\"13\":{\"width\":72},\"14\":{\"width\":72},\"15\":{\"width\":72},\"len\":16},\"rows\":{\"12\":{\"height\":19,\"cells\":{\"15\":{\"text\":\"\"}}},\"len\":13,\"height\":19}}]";
xs = x_spreadsheet('#gridjs-demo', option).loadData(JSON.parse(sheetstr)).change((cdata) => {
console.log(cdata);
console.log(xs.validate());
}
</script>
</head>
<body>
<div id="gridjs-demo"></div>
</body>
NPM
npm install gridjs-spreadsheet
<div id="gridjs-demo"></div>
//includ all the dependencies
//Including jszip
import JSZip from 'jszip';
window.JSZip = JSZip;
//Including jQuery
import $ from 'jquery';
window.$ = $;
//Including gridjs-spreadsheet
import 'gridjs-spreadsheet/xspreadsheet.css';
import Spreadsheet from "gridjs-spreadsheet";
// If you need to override the default options, you can set the override
// const options = {};
// new Spreadsheet('#gridjs-demo', options);
const s = new Spreadsheet("#gridjs-demo")
.loadData({}) // load data
.change(data => {
// save data to db
});
simple usage
// If you need to override the default options, you can set the override
const option = {
updateMode: 'server',
updateUrl: '/GridJs2/UpdateCell',
showToolbar: true,
//mode: 'edit' or 'read'
mode: 'read',
//support multiple language ,the locale is:en, cn, es, pt, de, ru, nl, ar, fr,id,it,ja, ko,th,tr,vi,cht
local: 'en',
};
xs = x_spreadsheet('#gridjs-demo', option).loadData(sheets).change((cdata) => {
console.log(cdata);
}
// 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,
},
},
}
Bind events
// single selection
xs.on('cell-selected', (cell, ri, ci) => {});
// range selection
xs.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
// shape/image selection
xs.on('object-selected', (obj) => { console.log('obj id:', obj.id, ', type: ', obj.type); })
// edited on cell
xs.on('cell-edited', (text, ri, ci) => {});
// cells updated
xs.on('cells-updated', (name, cells) => {
console.log('cells updated for sheet name:', name);
cells.forEach((acell, index, array) => {
console.log('acell got updated:', acell);
})
})
// cells deleted
xs.on('cells-deleted', (range) => {
console.log('cells deleted :', range);
})
// rows deleted
xs.on('rows-deleted', (ri, n) => {
console.log('rows-deleted :', ri, ",size", n);
})
// columns deleted
xs.on('columns-deleted', (ci, n) => {
console.log('columns-deleted :', ci, ",size", n);
})
// rows inserted
xs.on('rows-inserted', (ri, n) => {
console.log('rows-inserted :', ri, ",size", n);
})
// columns inserted
xs.on('columns-inserted', (ci, n) => {
console.log('columns-inserted :', ci, ",size", n);
})
update cell-text
// cellText(ri, ci, text, sheetIndex = 0)
xs.cellText(5, 5, 'xxxx',0).cellText(6, 5, 'yyy',0).reRender();
get cell and cell-style
// cell(ri, ci, sheetIndex = 0)
xs.cell(ri, ci);
// cellStyle(ri, ci, sheetIndex = 0)
xs.cellStyle(ri, ci);
Features
- Localization/Multiple language UI
- Paint format
- Clear format
- Format
- Number Format
- Font/Font size/ bold/italic/Underline/Strike
- Highlight
- Shape/Image resize/rotate/position ajustment
- Text color/Align/wrapping
- Fill color
- RichText
- Borders
- Merge cells
- Freeze cell
- Copy, Cut, Paste
- Autofill
- Insert/Delete row, column
- Filter row, column
- Zoom in/out
- Sort
- Search
- Formula
- Resize row-height, col-width
- Switch/add/delete sheets
- Condition Format
- Comment
- Add/delete Links
- Data validations
- Insert picture from web page
- Display chart/shapes
- Display form controls /activeX controls
- Insert/Delete form controls
- Insert/Delete common shapes for autoshape
- Support display two colors gradient in fill effects
- Mobile compatibility
Github-Demos
Visit the GridJs demo to find more detail info:
https://github.com/aspose-cells/Aspose.Cells-for-.NET/tree/master/Examples_GridJs
https://github.com/aspose-cells/Aspose.Cells-for-Java/tree/master/Examples.GridJs
Documentation
Online documentation is available here:
- Developer's Guide C#
- API Reference C#
- Developer's Guide Python
- API Reference Python
- Developer's Guide JAVA
- API Reference JAVA
Browser Support
Modern browsers(chrome, firefox, Safari).
Version History
v24.9.1:
- fix bug that fail to insert column in the new added worksheet
- fix bug that fail to rename worksheet
- support lazy loading
v24.10:
- support a view option to show formulas
v24.11:
- improve the display of rich text cell values
v24.12:
- support API to show HTML nodes and interact with HTML nodes at specified cell positions
- support pre-check event for row/column delete/insert operations
- support row/column insert/delete events for client APIs
- support events for updating cells
- support multiple instances on one page
v25.1:
- support copy/paste from MS-Excel
v25.2:
- support copy/paste from MS-Excel
- enhancement for automatic operations for user’s convenience, such as extending blank row/column, page scrolling, …
v25.3:
- support more shotcut keys
- support pasting the content copied from excel to multiple target areas
v25.4:
- support show statistics information in the lower right corner when cells are selected
v25.5:
- add support for Polish menus.
- support APIs for insert/delete rows/columns
License
MIT
Support
You can ask any question or request features or report bugs using the Forum.
Product Page | Product Documentation | Blog |API Reference | Source Code Samples | Free Support
FAQs
this is the client side script for GridJs which is a lightweight, scalable, and customizable toolkit that provides cross-platform web applications, enables convenient development for editing or viewing Excel/Spreadsheet files, offers simple deployment, an
The npm package gridjs-spreadsheet receives a total of 775 weekly downloads. As such, gridjs-spreadsheet popularity was classified as not popular.
We found that gridjs-spreadsheet demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 09 May 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Security News
2025 Blockchain and Cryptocurrency Threat Report: Malware in the Open Source Supply Chain
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
By Kirill Boychenko - Jun 12, 2025
Security News
pnpm 10.12 Introduces Global Virtual Store and Expanded Version Catalogs
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.
By Sarah Gooding - Jun 11, 2025