You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

gridjs-spreadsheet

Package Overview
Dependencies
Maintainers
1
Versions
68
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

25.7.0
latest
npmnpm
Version published
Maintainers
1
Created
Source

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

  • API
  • Preview
  • Github Demos
  • Features
  • Documentation
  • Support
  • License

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

demo

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;\\\">&nbsp;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) => {});

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
  • 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
  • Print
  • 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

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

https://github.com/aspose-cells/Aspose.Cells-for-Python-via-.NET/tree/main/Examples_GridJs_Python_Net

Documentation

Online documentation is available here:

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

License

MIT

Support

You can ask any question or request features using the Forum.

Product Page | Product Documentation | Blog |API Reference | Source Code Samples | Free Support

Keywords

XLS
XLSX
XLSB
CSV
to
convert

FAQs

Package last updated on 10 Jul 2025

Did you know?

Socket

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.

Install

Related posts

npm Phishing Email Targets Developers with Typosquatted Domain

Security News

/

Research

npm Phishing Email Targets Developers with Typosquatted Domain

A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.

By Sarah Gooding  -  Jul 18, 2025