gridjs-spreadsheet

gridjs-spreadsheet is the browser-side spreadsheet UI for Aspose.Cells GridJs. The package includes the core GridJS runtime, TypeScript declarations, and adapters for React, Vue 3, and Angular.

Version 26.7.0 also publishes a complete Java example containing five independent frontend demos:

• React
• Vue 3
• Angular
• Vanilla HTML using npm imports
• Vanilla HTML using CDN script tags

Installation

npm install gridjs-spreadsheet

The framework packages are optional peer dependencies. Install only the framework used by your application.

Package exports

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

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',
  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/[email protected]/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)}
      onError={(error) => console.error(error)}
    />
  );
}

Vue 3

<template>
  <GridJsSpreadsheet
    :data="sheetData"
    mode="edit"
    locale="en"
    height="600px"
    @ready="onReady"
    @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 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)"
      (error)="onError($event)"
    />
  `,
})
export class AppComponent {
  sheetData: any = null;
  onReady(event: any) { console.log('ready', event); }
  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 inputs

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

| Option | Description | | --- | --- | | apiBase | Optional prefix for GridJS backend endpoints | | data | Workbook JSON returned by the GridJS backend | | loader | Function that asynchronously returns workbook JSON | | mode | edit or read | | locale | GridJS UI locale | | token | Optional authorization token | | height | Component height | | showToolbar | Show or hide the toolbar | | showContextmenu | Show or hide the context menu |

The adapters expose ready, change, error, cell selection, cell editing, sheet selection, and sheet loading events using each framework's normal event conventions.

GridJS requires a browser DOM. Mount the adapters on the client when using an SSR framework.

Java example included in the package

The published package contains example/, including a Spring Boot backend and all five frontend projects. Copy it to a writable directory before running it:

npm install gridjs-spreadsheet
cp -R node_modules/gridjs-spreadsheet/example ./gridjs-example
cd gridjs-example

Start the Java backend in the first terminal:

./mvnw spring-boot:run -Dmaven.test.skip=true

Start a frontend in a second terminal, for example React:

cd react-gridjs
npm install
npm run dev

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

Backend endpoints

The adapters use the standard Aspose.Cells GridJs endpoints, including:

• /GridJs2/UpdateCell
• /GridJs2/ImageUrl
• /GridJs2/AddImage
• /GridJs2/AddImageByURL
• /GridJs2/CopyImage
• /GridJs2/Download
• /GridJs2/Ole
• /GridJs2/LazyLoadingStreamJson

The example frontend development servers proxy /GridJs2 and /gridjsdemo to the Java backend on port 8080.

Preview

Resources

• Aspose.Cells product page
• Aspose.Cells GridJs documentation
• API reference
• Free support forum

License

MIT