gridjs-spreadsheet

v26.8.0

Published

15 days ago

Lightweight, high-performance JavaScript spreadsheet component for building online Excel editors and web spreadsheet apps. Supports React, Vue 3, and Angular with TypeScript declarations. Features include formulas, charts, formatting, data validation, cop

gridjs-spreadsheet | Lightweight Online Excel Editor & Web Spreadsheet API

GridJs-Spreadsheet is a high-performance, lightweight JavaScript library for building online Excel editors and web-based spreadsheet applications. It provides seamless Excel viewing, editing, and cross-platform deployment with an easy-to-use API.
Now with first-class support for Vue 3, React, and Angular.

Why Choose GridJs-Spreadsheet?

Whether you are building a collaborative document platform, a data management tool, or an Excel viewer for your web app, GridJs-Spreadsheet offers a comprehensive solution with a tiny footprint.

Rich Excel-compatible editing experience — formulas, formatting, charts, images, form controls
First-class framework wrappers for React, Vue 3, and Angular — drop-in components with zero boilerplate
Full TypeScript declarations for IntelliSense and type safety
Server-backed or client-only mode — works with any backend (.NET, Java, Python, Node.js)
17+ UI languages out of the box
MIT licensed — free for commercial and open-source projects

Preview

Quick online demo: https://products.aspose.app/cells/editor

About

GridJs-Spreadsheet allows you to view and edit spreadsheet files directly in the browser. It is developed based on x-spreadsheet and extended with enterprise-grade features including chart rendering, form controls, data redaction, multi-sheet support, and server-side integration APIs.

The package includes the core GridJS runtime, TypeScript declarations, and ready-to-use adapters for React, Vue 3, and Angular.

Installation

npm install gridjs-spreadsheet

The framework packages are optional peer dependencies — install only the framework used by your application:

# install for React
npm install react react-dom

# install for Vue 3
npm install vue

# install for Angular
npm install @angular/core @angular/common

Package Exports

| Usage | Import | | --- | --- | | Core runtime | gridjs-spreadsheet | | Styles | gridjs-spreadsheet/xspreadsheet.css | | React component | gridjs-spreadsheet/react | | Vue 3 component | gridjs-spreadsheet/vue | | Angular component | gridjs-spreadsheet/angular | | Shared adapter | gridjs-spreadsheet/shared |

Usage

Vanilla JavaScript with npm

<div id="gridjs-demo"></div>

import Spreadsheet from 'gridjs-spreadsheet';
import JSZip from 'jszip';
import 'gridjs-spreadsheet/xspreadsheet.css';

window.JSZip = JSZip;

const spreadsheet = new Spreadsheet('#gridjs-demo', {
  updateMode: 'server',
  updateUrl: '/GridJs2/UpdateCell',
  mode: 'edit',
  // Support 17+ languages: en, cn, es, pt, de, ru, nl, ar, fr, id, it, ja, ko, th, tr, vi, cht
  local: 'en',
});

spreadsheet.loadData(workbookJson.data, workbookJson.actname);
spreadsheet.setUniqueId(workbookJson.uniqueid);
spreadsheet.setFileName(workbookJson.filename);

Vanilla HTML with script tags

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/xspreadsheet.css"
>

<script src="https://unpkg.com/[email protected]/dist/jszip.min.js"></script>
<script src="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.js"></script>

<div id="gridjs-demo"></div>

<script>
  const spreadsheet = x_spreadsheet('#gridjs-demo', {
    updateMode: 'server',
    updateUrl: '/GridJs2/UpdateCell',
    mode: 'edit',
    local: 'en',
  });

  spreadsheet.loadData(workbookJson.data, workbookJson.actname);
</script>

React

import { useState } from 'react';
import { GridJsSpreadsheet } from 'gridjs-spreadsheet/react';
import 'gridjs-spreadsheet/xspreadsheet.css';

export default function App() {
  const [data] = useState(null);

  return (
    <GridJsSpreadsheet
      data={data}
      apiBase=""
      mode="edit"
      locale="en"
      height="600px"
      onReady={(instance, adapter) => console.log('ready', instance, adapter)}
      onChange={(...args) => console.log('changed', args)}
      onCellSelected={(...args) => console.log('cell selected', args)}
      onError={(error) => console.error(error)}
    />
  );
}

Vue 3

<template>
  <GridJsSpreadsheet
    :data="sheetData"
    mode="edit"
    locale="en"
    height="600px"
    @ready="onReady"
    @change="onChange"
    @cell-selected="onCellSelected"
    @error="onError"
  />
</template>

<script setup>
import { ref } from 'vue';
import { GridJsSpreadsheet } from 'gridjs-spreadsheet/vue';
import 'gridjs-spreadsheet/xspreadsheet.css';

const sheetData = ref(null);
const onReady = (instance, adapter) => console.log('ready', instance, adapter);
const onChange = (...args) => console.log('changed', args);
const onCellSelected = (...args) => console.log('cell selected', args);
const onError = error => console.error(error);
</script>

Angular

import { Component } from '@angular/core';
import { GridJsSpreadsheetComponent } from 'gridjs-spreadsheet/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GridJsSpreadsheetComponent],
  template: `
    <gridjs-spreadsheet
      [data]="sheetData"
      mode="edit"
      locale="en"
      height="600px"
      (ready)="onReady($event)"
      (change)="onChange($event)"
      (cellSelected)="onCellSelected($event)"
      (error)="onError($event)"
    />
  `,
})
export class AppComponent {
  sheetData: any = null;
  onReady(event: any) { console.log('ready', event); }
  onChange(args: any[]) { console.log('changed', args); }
  onCellSelected(args: any[]) { console.log('cell selected', args); }
  onError(error: any) { console.error(error); }
}

Add the GridJS stylesheet to angular.json:

"styles": [
  "node_modules/gridjs-spreadsheet/xspreadsheet.css",
  "src/styles.css"
]

Framework Adapter API

The React, Vue, and Angular adapters share the same configuration model:

| Option | Type | Default | Description | | --- | --- | --- | --- | | apiBase | string | '' | Prefix for GridJS backend endpoints | | data | object | null | Workbook JSON returned by the GridJS backend | | loader | function | null | Async function that returns workbook JSON | | mode | 'edit' \| 'read' | 'edit' | Editing mode | | locale | string | 'en' | UI language locale | | token | string | '' | Authorization token for server requests | | height | string \| number | 'calc(100vh - 96px)' | Component height | | showToolbar | boolean | true | Show or hide the toolbar | | showContextmenu | boolean | true | Show or hide the context menu |

Events: All adapters expose ready, change, error, cellSelected, cellEdited, sheetSelected, and sheetLoaded events using each framework's normal event conventions.

Note: GridJS requires a browser DOM. When using SSR frameworks (Next.js, Nuxt, Angular Universal), mount the adapters on the client side only.

Core API

The core Spreadsheet class provides a rich JavaScript API:

const xs = new Spreadsheet('#container', options);

// Load data
xs.loadData(jsonData);

// Bind events
xs.on('cell-selected', (cell, ri, ci) => { });
xs.on('cells-selected', (cell, { sri, sci, eri, eci }) => { });
xs.on('cell-edited', (text, ri, ci) => { });
xs.on('object-selected', (obj) => { });
xs.on('cells-updated', (name, cells) => { });
xs.on('rows-inserted', (ri, n) => { });
xs.on('columns-inserted', (ci, n) => { });
xs.on('rows-deleted', (ri, n) => { });
xs.on('columns-deleted', (ci, n) => { });
xs.on('cells-deleted', (range) => { });

// Cell operations
xs.cellText(5, 5, 'Hello');
xs.cell(ri, ci);
xs.cellStyle(ri, ci);

// Sheet operations
xs.setActiveSheet(index);
xs.setActiveSheetByName('Sheet2');
xs.setActiveCell(rowIndex, colIndex);
xs.getData();

// Server integration
xs.setUniqueId('workbook-id');
xs.setFileName('report.xlsx');
xs.refreshToken(token);

// Cleanup
xs.destroy();

Full API documentation: API Reference

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,
    color: '#0a0a0a',
    font: { name: 'Helvetica', size: 10, bold: false, italic: false },
  },
}

Features

Rich Editing & Formatting

Font / Font size / Bold / Italic / Underline / Strikethrough
Text color / Alignment / Text wrapping
Fill color / Highlight
Number format / Rich text support
Borders / Conditional formatting
Format painter / Clear format

Data Management & Analysis

Full formula support
Filter / Sort rows and columns
Data validations (including multi-select lists)
Copy / Cut / Paste / Autofill — including from MS Excel
Merge cells / Freeze panes
Insert / Delete rows and columns
Resize row height / column width
Zoom in / out
Search and replace
Statistics information in the status bar

Visuals & Objects

Charts rendering (bar, line, pie, area, and more)
Conditional formatting icons
Shape / Image resize, rotate, and position adjustment
Insert / Delete / Copy shapes and images
Form controls / ActiveX controls display
Insert / Delete form controls
Two-color gradient fill effects

Security & Advanced Tools

Data redaction — burn sensitive data permanently
Comments — add / edit / delete
Hyperlinks — add / delete
Print support
Localization — 17+ UI languages
Mobile responsive compatibility
Custom toolbar buttons
Lazy loading for large workbooks

Backend Endpoints

The adapters use the standard Aspose.Cells GridJs endpoints:

/GridJs2/UpdateCell — cell update
/GridJs2/ImageUrl — image retrieval
/GridJs2/AddImage — upload local image
/GridJs2/AddImageByURL — upload image by URL
/GridJs2/CopyImage — copy image
/GridJs2/Download — file download
/GridJs2/Ole — OLE object download
/GridJs2/LazyLoadingStreamJson — lazy loading

Example Project

The package includes a complete example/ directory with a Spring Boot backend and five independent frontend demos (React, Vue 3, Angular, Vanilla npm, Vanilla CDN).

cp -R node_modules/gridjs-spreadsheet/example ./gridjs-example
cd gridjs-example
./mvnw spring-boot:run -Dmaven.test.skip=true

See example/README.md for all framework commands, ports, backend configuration, and troubleshooting.

Additional demos for .NET, Java, and Python:

Browser Support

Modern browsers — Chrome, Firefox, Safari, Edge.

Version History

Support redaction for entire sheet
Support redaction for sheet name

Improve performance for redaction

Fix issue for filter in merge area

Improve redaction feature
Fix redaction font issue
Fix redaction transparent view issue

Support add custom buttons in toolbar
Improve date picker
Improve filter display
Improve print
Improve scroll in zoom

Add redaction features
Fix paste scroll issue
Support shape lock
Support snap to cell area in zoom in/out
Add boundary check for redaction

Improve filter/validations/charts

Improve client performance for large rows

Support highlight text with rotation
Support more charts rendering in client

Support sort by cell color/font color
Support add multiple selection validation list

Support fill color settings for charts
Support 'Fill Color' and 'Font Color' button dropdown selection and click to fill

Support APIs to set customToast
Support CSS identify for model window

Support to render pattern style for cell

Support automatic text wrapping
Support API to apply font setting in textbox control

Support APIs to enable/disable editable range
Support APIs to add/modify/delete worksheet
Support APIs to add/modify/delete comment
Support APIs to set attribute for range of cells
Support APIs to delete for range of cells

Support APIs for resize rows/columns
Support APIs for hide/unhide rows/columns

Add support for Polish menus
Support APIs for insert/delete rows/columns

Support show statistics information in the lower right corner when cells are selected

Support more shortcut keys
Support pasting the content copied from Excel to multiple target areas

Support copy/paste from MS-Excel
Enhancement for automatic operations — extending blank row/column, page scrolling, etc.

Support copy/paste from MS-Excel

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

Improve the display of rich text cell values

Support a view option to show formulas

Fix bug that fail to insert column in the new added worksheet
Fix bug that fail to rename worksheet
Support lazy loading

Resources

Documentation

Product Links

Source Code & Samples

Free Support

Aspose.Cells Forum — ask questions, request features, report bugs

License

MIT