gridjs-spreadsheet 26.6.2 → 26.7.0

package/example/angular-gridjs/src/app/app.component.html

@@ -0,0 +1,57 @@
+<!-- A workbook is selected -> render the full-page spreadsheet editor. -->
+<main *ngIf="current; else startPage" class="editor-page">
+  <gridjs-spreadsheet
+    *ngIf="workbookData; else loadingEditor"
+    [data]="workbookData"
+    height="100vh"
+    [showToolbar]="true"
+    [showContextmenu]="true"
+    (ready)="onReady($event)"
+    (change)="logEvent('changed')"
+    (error)="onError($event)"
+    (cellSelected)="logEvent('cell selected ' + (($event && $event[1]) ?? '') + ',' + (($event && $event[2]) ?? ''))"
+    (cellEdited)="logEvent('cell edited ' + (($event && $event[1]) ?? '') + ',' + (($event && $event[2]) ?? ''))"
+    (sheetSelected)="logEvent('sheet ' + (($event && $event[1]) ?? ''))"
+  ></gridjs-spreadsheet>
+  <ng-template #loadingEditor>
+    <div class="editor-loading">{{ status }}</div>
+  </ng-template>
+</main>
+
+<!-- No workbook selected -> render the start page (demo picker + file list + upload). -->
+<ng-template #startPage>
+  <div class="demo-shell">
+    <header class="demo-navbar">
+      <a href="https://docs.aspose.com/cells/java/aspose-cells-gridjs/">Aspose.Cells.GridJs demo for Java</a>
+    </header>
+    <main class="demo-container">
+      <fieldset class="demo-selector">
+        <legend>Select a demo:</legend>
+        <label [class]="demoType === DEMO_PERMANENT ? 'radio-card active' : 'radio-card'">
+          <input type="radio" name="demoType" [checked]="demoType === DEMO_PERMANENT" (change)="demoType = DEMO_PERMANENT" />
+          <span>permanent url load demo</span>
+        </label>
+        <label [class]="demoType === DEMO_HIGHLIGHT ? 'radio-card active' : 'radio-card'">
+          <input type="radio" name="demoType" [checked]="demoType === DEMO_HIGHLIGHT" (change)="demoType = DEMO_HIGHLIGHT" />
+          <span>highlight and custom context menu demo</span>
+        </label>
+      </fieldset>
+      <section class="upload-block">
+        <h4>Upload a local file to start show workbook</h4>
+        <input type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" (change)="upload($event)" />
+      </section>
+      <section class="path-block">
+        <h4>The specific file path : {{ directory }}</h4>
+        <h4>Navigate one of the below file to start show workbook</h4>
+      </section>
+      <p class="status-message" role="status">{{ status }}</p>
+      <section class="file-list" aria-label="Workbook files">
+        <p *ngIf="status === 'Ready' && files.length === 0" class="empty-message">No workbooks found in the configured directory.</p>
+        <a *ngFor="let file of files" [href]="'/?file=' + file" class="file-item" (click)="$event.preventDefault(); openFile(file)">
+          <em>{{ file }}</em>
+        </a>
+      </section>
+    </main>
+    <footer class="demo-footer">© 2026 - <a href="https://products.aspose.com/cells/java">Aspose.Cells for Java</a></footer>
+  </div>
+</ng-template>

package/example/angular-gridjs/src/app/app.component.ts

@@ -0,0 +1,153 @@
+import { CommonModule } from '@angular/common';
+import { Component, HostListener, OnInit } from '@angular/core';
+import { GridJsSpreadsheetComponent } from 'gridjs-spreadsheet/angular';
+import { DEMO_PERMANENT, DEMO_HIGHLIGHT, DemoType, WorkbookRef, makeUid, readRoute, pushWorkbookRoute } from './routing';
+import { fetchJson } from './api';
+
+// Root demo component.
+// Renders either:
+//  - the start page (demo picker + sample file list + upload box), or
+//  - the full-page spreadsheet editor once a workbook has been selected.
+// Which one is shown is driven entirely by the URL (see ./routing.ts).
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, GridJsSpreadsheetComponent],
+  templateUrl: './app.component.html',
+})
+export class AppComponent implements OnInit {
+  readonly DEMO_PERMANENT = DEMO_PERMANENT;
+  readonly DEMO_HIGHLIGHT = DEMO_HIGHLIGHT;
+
+  // Sample workbooks listed on the start page.
+  files: string[] = [];
+  directory = '';
+  // The workbook selected via the URL; null means "show the start page".
+  current: WorkbookRef | null = readRoute();
+  // Which demo mode is active (only relevant while on the start page).
+  demoType: DemoType = this.current?.demo || DEMO_PERMANENT;
+  workbookData: any = null;
+  status = 'Loading workbook list...';
+  adapter: any = null;
+
+  async ngOnInit(): Promise<void> {
+    await this.loadFiles();
+    if (this.current) await this.loadWorkbook();
+  }
+
+  // Keeps state in sync when the user navigates with the browser's back/forward buttons.
+  @HostListener('window:popstate')
+  onPopState(): void {
+    this.current = readRoute();
+    if (this.current?.demo) {
+      this.demoType = this.current.demo;
+    }
+    void this.loadWorkbook();
+  }
+
+  logEvent(message: string): void {
+    console.log('[GridJS Event]', message);
+  }
+
+  // Loads the list of sample workbooks available on the server.
+  async loadFiles(): Promise<void> {
+    try {
+      const result = await fetchJson<{ directory: string; files: string[] }>('/gridjsdemo/api/files');
+      this.files = result.files || [];
+      this.directory = result.directory || '';
+      this.status = 'Ready';
+    } catch (error: any) {
+      this.status = 'Failed to load files: ' + error.message;
+    }
+  }
+
+  // Navigates to a workbook: updates the URL and local state together.
+  openWorkbook(workbook: WorkbookRef): void {
+    const normalized = { ...workbook, demo: workbook.demo || this.demoType };
+    pushWorkbookRoute(normalized);
+    this.current = normalized;
+    this.demoType = normalized.demo;
+    void this.loadWorkbook();
+  }
+
+  openFile(file: string): void {
+    this.openWorkbook({ file, storedFile: file, demo: this.demoType, uid: makeUid(file), fromUpload: '' });
+  }
+
+  // Fetches workbook data for the GridJsSpreadsheet component. Which endpoint
+  // is used depends on the demo mode:
+  //  - permanent: uid-based endpoint, backend caches parsed data per uid.
+  //  - highlight: plain endpoint, re-parses the file on every load.
+  async loadWorkbook(): Promise<void> {
+    if (!this.current?.file) {
+      this.workbookData = null;
+      return;
+    }
+    this.workbookData = null;
+    this.adapter = null;
+    this.status = 'Loading ' + this.current.file + '...';
+    try {
+      const demo = this.current.demo || DEMO_PERMANENT;
+      const params = new URLSearchParams({
+        filename: this.current.storedFile || this.current.file,
+        fromUpload: this.current.fromUpload || '',
+      });
+      let endpoint = '/GridJs2/DetailStreamJson';
+      if (this.current.fromUpload) {
+        params.set('uid', this.current.uid || makeUid(this.current.file));
+        endpoint = '/GridJs2/DetailStreamJsonWithUidFromUpload';
+      } else if (demo === DEMO_PERMANENT) {
+        params.set('uid', this.current.uid || makeUid(this.current.file));
+        endpoint = '/GridJs2/DetailStreamJsonWithUid';
+      }
+      const payload = await fetchJson<any>(endpoint + '?' + params);
+      this.workbookData = { ...payload, filename: this.current.file };
+      this.status = 'Loaded ' + this.current.file;
+    } catch (error: any) {
+      this.status = 'Workbook load failed: ' + error.message;
+    }
+  }
+
+  async upload(event: Event): Promise<void> {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (!file) return;
+    const form = new FormData();
+    form.append('file', file);
+    form.append('client', 'angular');
+    this.status = 'Uploading ' + file.name + '...';
+    try {
+      const result = await fetchJson<{ file: string; displayName: string; uid: string; fromUpload: string }>('/gridjsdemo/api/upload', { method: 'POST', body: form });
+      this.logEvent('uploaded ' + result.file);
+      // Newly uploaded files live under the server's uploads dir, flagged with fromUpload=1.
+      this.openWorkbook({
+        file: result.displayName || file.name,
+        storedFile: result.file,
+        demo: this.demoType,
+        uid: result.uid || makeUid(result.file),
+        fromUpload: '1',
+      });
+    } catch (error: any) {
+      this.status = 'Upload failed: ' + error.message;
+    } finally {
+      input.value = '';
+    }
+  }
+
+  // Restores the previously active sheet/cell (from the workbook data) once
+  // the grid has mounted, and points the "open file" link back at the start page.
+  onReady(event: { instance: any; adapter: any }): void {
+    this.adapter = event.adapter;
+    const sheetName = event.adapter.payload?.actname;
+    const row = event.adapter.payload?.actrow;
+    const col = event.adapter.payload?.actcol;
+    event.instance?.setActiveSheetByName?.(sheetName)?.setActiveCell?.(row, col);
+    event.instance?.setOpenFileUrl?.('/');
+    this.logEvent('ready ' + (event.adapter.payload?.filename || this.current?.file));
+  }
+
+  onError(payload: any): void {
+    console.error(payload);
+    this.logEvent('error ' + (payload?.message || payload?.type || 'unknown'));
+  }
+}

package/example/angular-gridjs/src/app/routing.ts

@@ -0,0 +1,52 @@
+// Route (URL query string) helpers shared by the demo.
+//
+// The demo encodes which workbook is open directly in the URL so a page
+// refresh or a shared link reopens the same file, e.g.:
+//   /?file=Sample.xlsx&demo=permanent&uid=uid-Sample-xlsx
+//   /?file=Sample.xlsx&demo=highlight&fromUpload=1
+//
+// demo:
+//   'permanent' - loads the workbook through the uid-based streaming endpoint;
+//                 the backend caches the parsed result under this uid.
+//   'highlight' - loads the workbook through the plain streaming endpoint,
+//                 used by the "highlight and custom context menu" demo.
+export type DemoType = 'permanent' | 'highlight';
+export type WorkbookRef = { file: string; storedFile: string; uid: string; fromUpload: string; demo: DemoType };
+
+export const DEMO_PERMANENT: DemoType = 'permanent';
+export const DEMO_HIGHLIGHT: DemoType = 'highlight';
+const CLIENT_PREFIX = 'angular';
+
+// Turns a file name into a stable cache key,
+// e.g. "Sales Report.xlsx" -> "uid-Sales-Report-xlsx".
+export function makeUid(file: string): string {
+  return CLIENT_PREFIX + '-uid-' + file.replace(/[^a-zA-Z0-9]/g, '-');
+}
+
+// Reads the currently selected workbook (if any) from the URL query string.
+// Returns null when no `file` param is present, i.e. the start page.
+export function readRoute(): WorkbookRef | null {
+  const params = new URLSearchParams(window.location.search);
+  const file = params.get('file');
+  if (!file) return null;
+  const demo: DemoType = params.get('demo') === DEMO_HIGHLIGHT ? DEMO_HIGHLIGHT : DEMO_PERMANENT;
+  return {
+    file,
+    storedFile: params.get('storedFile') || file,
+    demo,
+    uid: params.get('uid') || makeUid(file),
+    fromUpload: params.get('fromUpload') || '',
+  };
+}
+
+// Pushes the given workbook selection into the URL (without a full page
+// reload) so the browser's back/forward buttons and page refresh keep working.
+export function pushWorkbookRoute(workbook: WorkbookRef): void {
+  const params = new URLSearchParams({ file: workbook.file, demo: workbook.demo || DEMO_PERMANENT });
+  if (workbook.storedFile !== workbook.file) params.set('storedFile', workbook.storedFile);
+  if ((workbook.demo || DEMO_PERMANENT) === DEMO_PERMANENT || workbook.fromUpload) {
+    params.set('uid', workbook.uid || makeUid(workbook.file));
+  }
+  if (workbook.fromUpload) params.set('fromUpload', workbook.fromUpload);
+  window.history.pushState(null, '', '/?' + params.toString());
+}

package/example/angular-gridjs/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>GridJS Angular Demo</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/example/angular-gridjs/src/main.ts

@@ -0,0 +1,7 @@
+// Entry point: just bootstraps the standalone AppComponent (see ./app/app.component.ts).
+// Shared route/API helpers live in ./app/routing.ts and ./app/api.ts so
+// app.component.ts stays focused on component state and view logic.
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent).catch((error) => console.error(error));

package/example/angular-gridjs/src/styles.css

@@ -0,0 +1,37 @@
+:root { font-family: Arial, Helvetica, sans-serif; color: #212529; background: #f8f9fa; }
+* { box-sizing: border-box; }
+html, body, #root, #app { min-height: 100%; }
+body { margin: 0; overflow-y: hidden; background: #f8f9fa; font-size: 14px; }
+button, input { font: inherit; }
+.demo-shell { min-height: 100dvh; display: flex; flex-direction: column; background: #f8f9fa; }
+.demo-navbar { min-height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid #dee2e6; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 8px 12px; font-size: 19px; }
+.demo-navbar a { color: #0000ee; text-decoration: underline; }
+.demo-container { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 16px 12px; }
+.demo-selector { border: 1px solid #adb5bd; border-radius: 4px; margin: 0 0 16px; padding: 18px 14px 14px; display: flex; align-items: center; }
+.demo-selector legend { width: auto; font-size: 14px; padding: 0 6px; }
+.radio-card { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; margin-left: -1px; border: 1px solid #adb5bd; background: #f0f0f0; color: #444; font-size: 14px; cursor: pointer; position: relative; }
+.radio-card:first-of-type { margin-left: 0; border-radius: 4px 0 0 4px; }
+.radio-card:last-of-type { border-radius: 0 4px 4px 0; }
+.radio-card input { width: 14px; height: 14px; margin: 0; accent-color: #0d6efd; }
+.radio-card.active { background: #0d6efd; border-color: #0d6efd; color: #fff; z-index: 1; }
+.upload-block { margin-top: 8px; }
+.upload-block h4, .path-block h4 { margin: 0 0 10px; font-size: 14px; font-weight: bold; line-height: 1.3; }
+.upload-block input[type=file] { margin-bottom: 12px; font-size: 13px; }
+.path-block { margin-top: 4px; }
+.file-list { min-height: 140px; max-height: 220px; overflow-y: auto; border: 1px solid #ced4da; border-radius: 4px; background: #f6f7ef; padding: 10px 12px; }
+.file-item { display: block; margin-bottom: 10px; color: #0000ee; text-decoration: underline; font-size: 14px; font-style: italic; }
+.file-item:hover { text-decoration: underline; }
+.radio-card:focus-within, .file-item:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(13, 110, 253, .35); outline-offset: 2px; }
+.status-message { min-height: 20px; margin: 8px 0; color: #495057; }
+.empty-message { margin: 12px 4px; color: #64748b; }
+.demo-footer { min-height: 40px; border-top: 1px solid #dee2e6; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; font-size: 13px; color: #495057; background: #f8f9fa; }
+.demo-footer a { color: #0000ee; text-decoration: underline; }
+.editor-page { height: 100dvh; width: 100vw; overflow: hidden; background: #fff; }
+.editor-loading { height: 100vh; display: grid; place-items: center; color: #64748b; background: #fff; }
+.gridjs-react-host, .gridjs-vue-host, gridjs-spreadsheet { display: block; width: 100%; height: 100vh; }
+@media (max-width: 700px) {
+  body { overflow-y: auto; }
+  .demo-selector { flex-direction: column; align-items: stretch; }
+  .radio-card { margin-left: 0; width: 100%; }
+  .radio-card:first-of-type, .radio-card:last-of-type { border-radius: 4px; }
+}

package/example/angular-gridjs/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}

package/example/angular-gridjs/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": false,
+    "noImplicitOverride": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": false,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": ["ES2022", "dom"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": false,
+    "strictTemplates": false
+  }
+}

package/example/pom.xml

@@ -17,7 +17,7 @@
 	</repositories>
 	<groupId>com.aspose.gridjs</groupId>
 	<artifactId>gridjsdemo</artifactId>
-	<version>26.6</version>
+	<version>26.7</version>
 	<name>gridjsdemo</name>
 	<description>GridJs Demo project for Spring Boot</description>
 	<properties>
@@ -51,12 +51,12 @@
 		 <dependency>  
   			<groupId>com.aspose</groupId>  
  			<artifactId>aspose-cells</artifactId>  
- 			<version>26.5</version> 
+ 			<version>26.7</version> 
  	    </dependency> 
         <dependency>  
   			<groupId>com.aspose</groupId>  
  			<artifactId>aspose-cells</artifactId>  
- 			<version>26.5</version> 
+ 			<version>26.7</version> 
  			<classifier>gridjs</classifier>  
  	    </dependency>
 	<!--	<dependency>

package/example/react-gridjs/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GridJS React Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/example/react-gridjs/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "gridjs-react-java-demo",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1 --port 5173 --strictPort",
+    "build": "vite build",
+    "preview": "vite preview --host 127.0.0.1 --port 6173 --strictPort"
+  },
+  "dependencies": {
+    "gridjs-spreadsheet": "latest",
+    "jszip": "^3.10.1",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "latest",
+    "vite": "latest"
+  }
+}

package/example/react-gridjs/src/App.jsx

@@ -0,0 +1,188 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { GridJsSpreadsheet } from 'gridjs-spreadsheet/react';
+import { DEMO_PERMANENT, DEMO_HIGHLIGHT, makeUid, readRoute, pushWorkbookRoute } from './routing';
+import { fetchJson } from './api';
+
+// Root demo component.
+// Renders either:
+//  - the start page (demo picker + sample file list + upload box), or
+//  - the full-page spreadsheet editor once a workbook has been selected.
+// Which one is shown is driven entirely by the URL (see ./routing.js).
+export function App() {
+  // Sample workbooks listed on the start page.
+  const [files, setFiles] = useState([]);
+  const [directory, setDirectory] = useState('');
+  // The workbook selected via the URL; null means "show the start page".
+  const [current, setCurrent] = useState(() => readRoute());
+  // Which demo mode is active (only relevant while on the start page).
+  const [demoType, setDemoType] = useState(() => readRoute()?.demo || DEMO_PERMANENT);
+  const [status, setStatus] = useState('Loading workbook list...');
+  const adapterRef = useRef(null);
+
+  const logEvent = useCallback((message) => {
+    console.log('[GridJS Event]', message);
+  }, []);
+
+  // Loads the list of sample workbooks available on the server.
+  const loadFiles = useCallback(async () => {
+    try {
+      const result = await fetchJson('/gridjsdemo/api/files');
+      setFiles(result.files || []);
+      setDirectory(result.directory || '');
+      setStatus('Ready');
+    } catch (error) {
+      setStatus('Failed to load files: ' + error.message);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadFiles();
+    // Keep state in sync when the user navigates with the browser's back/forward buttons.
+    const onPopState = () => {
+      const next = readRoute();
+      setCurrent(next);
+      if (next?.demo) setDemoType(next.demo);
+    };
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
+  }, [loadFiles]);
+
+  // Navigates to a workbook: updates the URL and local state together.
+  const openWorkbook = (workbook) => {
+    const normalized = { ...workbook, demo: workbook.demo || demoType };
+    pushWorkbookRoute(normalized);
+    setCurrent(normalized);
+    setDemoType(normalized.demo);
+  };
+
+  const openFile = (file) => openWorkbook({ file, storedFile: file, demo: demoType, uid: makeUid(file), fromUpload: '' });
+
+  // Fetches workbook data for the GridJsSpreadsheet component. Which endpoint
+  // is used depends on the demo mode:
+  //  - permanent: uid-based endpoint, backend caches parsed data per uid.
+  //  - highlight: plain endpoint, re-parses the file on every load.
+  const loader = useCallback(async () => {
+    if (!current?.file) return null;
+    const demo = current.demo || DEMO_PERMANENT;
+    const params = new URLSearchParams({
+      filename: current.storedFile || current.file,
+      fromUpload: current.fromUpload || '',
+    });
+    let endpoint = '/GridJs2/DetailStreamJson';
+    if (current.fromUpload) {
+      params.set('uid', current.uid || makeUid(current.file));
+      endpoint = '/GridJs2/DetailStreamJsonWithUidFromUpload';
+    } else if (demo === DEMO_PERMANENT) {
+      params.set('uid', current.uid || makeUid(current.file));
+      endpoint = '/GridJs2/DetailStreamJsonWithUid';
+    }
+    const payload = await fetchJson(endpoint + '?' + params);
+    return { ...payload, filename: current.file };
+  }, [current]);
+
+  const upload = async (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    const form = new FormData();
+    form.append('file', file);
+    form.append('client', 'react');
+    setStatus('Uploading ' + file.name + '...');
+    try {
+      const result = await fetchJson('/gridjsdemo/api/upload', { method: 'POST', body: form });
+      logEvent('uploaded ' + result.file);
+      // Newly uploaded files live under the server's uploads dir, flagged with fromUpload=1.
+      openWorkbook({
+        file: result.displayName || file.name,
+        storedFile: result.file,
+        demo: demoType,
+        uid: result.uid || makeUid(result.file),
+        fromUpload: '1',
+      });
+    } catch (error) {
+      setStatus('Upload failed: ' + error.message);
+    } finally {
+      event.target.value = '';
+    }
+  };
+
+  // Restores the previously active sheet/cell (from the workbook data) once
+  // the grid has mounted, and points the "open file" link back at the start page.
+  const handleReady = (instance, adapter) => {
+    adapterRef.current = adapter;
+    instance.setActiveSheetByName?.(adapter.payload?.actname)?.setActiveCell?.(adapter.payload?.actrow, adapter.payload?.actcol);
+    instance.setOpenFileUrl?.('/');
+    logEvent('ready ' + (adapter.payload?.filename || current.file));
+  };
+
+  const handleError = (payload) => {
+    console.error(payload);
+    logEvent('error ' + (payload?.message || payload?.type || 'unknown'));
+  };
+
+  // A workbook is selected -> render the full-page spreadsheet editor.
+  if (current) {
+    return (
+      <main className="editor-page">
+        <GridJsSpreadsheet
+          key={current.file + '-' + current.uid + '-' + current.demo}
+          loader={loader}
+          height="100vh"
+          showToolbar
+          showContextmenu
+          onReady={handleReady}
+          onChange={() => logEvent('changed')}
+          onError={handleError}
+          onCellSelected={(_, ri, ci) => logEvent('cell selected ' + ri + ',' + ci)}
+          onCellEdited={(text, ri, ci) => logEvent('cell edited ' + ri + ',' + ci)}
+          onSheetSelected={(_, name) => logEvent('sheet ' + name)}
+        />
+      </main>
+    );
+  }
+
+  // No workbook selected -> render the start page (demo picker + file list + upload).
+  return (
+    <div className="demo-shell">
+      <header className="demo-navbar">
+        <a href="https://docs.aspose.com/cells/java/aspose-cells-gridjs/">Aspose.Cells.GridJs demo for Java</a>
+      </header>
+
+      <main className="demo-container">
+        <fieldset className="demo-selector">
+          <legend>Select a demo:</legend>
+          <label className={demoType === DEMO_PERMANENT ? 'radio-card active' : 'radio-card'}>
+            <input type="radio" name="demoType" checked={demoType === DEMO_PERMANENT} onChange={() => setDemoType(DEMO_PERMANENT)} />
+            <span>permanent url load demo</span>
+          </label>
+          <label className={demoType === DEMO_HIGHLIGHT ? 'radio-card active' : 'radio-card'}>
+            <input type="radio" name="demoType" checked={demoType === DEMO_HIGHLIGHT} onChange={() => setDemoType(DEMO_HIGHLIGHT)} />
+            <span>highlight and custom context menu demo</span>
+          </label>
+        </fieldset>
+
+        <section className="upload-block">
+          <h4>Upload a local file to start show workbook</h4>
+          <input type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onChange={upload} />
+        </section>
+
+        <section className="path-block">
+          <h4>The specific file path : {directory}</h4>
+          <h4>Navigate one of the below file to start show workbook</h4>
+        </section>
+
+        <p className="status-message" role="status">{status}</p>
+
+        <section className="file-list" aria-label="Workbook files">
+          {status === 'Ready' && files.length === 0 && <p className="empty-message">No workbooks found in the configured directory.</p>}
+          {files.map((file) => (
+            <a href={'/?file=' + encodeURIComponent(file)} key={file} className="file-item" onClick={(event) => { event.preventDefault(); openFile(file); }}>
+              <em>{file}</em>
+            </a>
+          ))}
+        </section>
+      </main>
+
+      <footer className="demo-footer">© 2026 - <a href="https://products.aspose.com/cells/java">Aspose.Cells for Java</a></footer>
+    </div>
+  );
+}

package/example/react-gridjs/src/api.js

@@ -0,0 +1,7 @@
+// Small fetch() wrapper that turns non-2xx responses into thrown Errors,
+// so callers can just `await fetchJson(url)` and catch failures in one place.
+export async function fetchJson(url, options) {
+  const response = await fetch(url, options);
+  if (!response.ok) throw new Error(response.status + ' ' + response.statusText);
+  return response.json();
+}

package/example/react-gridjs/src/main.jsx

@@ -0,0 +1,9 @@
+// Entry point: just mounts the <App /> root component (see ./App.jsx).
+// Shared route/API helpers live in ./routing.js and ./api.js so this file
+// and App.jsx stay focused on their own concerns.
+import { createRoot } from 'react-dom/client';
+import 'gridjs-spreadsheet/xspreadsheet.css';
+import './styles.css';
+import { App } from './App';
+
+createRoot(document.getElementById('root')).render(<App />);