gridjs-spreadsheet 26.6.2 → 26.7.0

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

@@ -0,0 +1,51 @@
+// 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 const DEMO_PERMANENT = 'permanent';
+export const DEMO_HIGHLIGHT = 'highlight';
+const CLIENT_PREFIX = 'react';
+
+// Turns a file name into a stable cache key,
+// e.g. "Sales Report.xlsx" -> "uid-Sales-Report-xlsx".
+export function makeUid(file) {
+  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() {
+  const params = new URLSearchParams(window.location.search);
+  const file = params.get('file');
+  if (!file) return null;
+  const demo = 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) {
+  const params = new URLSearchParams({ file: workbook.file, demo: workbook.demo || DEMO_PERMANENT });
+  if (workbook.storedFile && 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/react-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/react-gridjs/vite.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/GridJs2': 'http://127.0.0.1:8080',
+      '/gridjsdemo': 'http://127.0.0.1:8080'
+    }
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true
+  }
+});

package/example/src/main/java/com/aspose/gridjs/demo/controller/DataController.java

@@ -7,7 +7,12 @@ import java.nio.file.Files;
 import java.nio.file.Path;
 import java.nio.file.Paths;
 import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Comparator;
+import java.util.LinkedHashMap;
 import java.util.List;
+import java.util.Map;
+import java.util.UUID;
 
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.http.ResponseEntity;
@@ -28,8 +33,34 @@ public class DataController {
      @Value("${testconfig.FileName}")
      private String testFileName;//="chart.xlsx";
      
-     @Value("${testconfig.ListDir}")
-     private String listDir; 
+    @Value("${testconfig.ListDir}")
+    private String listDir;
+
+    @GetMapping("/api/health")
+    public Map<String, String> health() {
+        Map<String, String> response = new LinkedHashMap<>();
+        response.put("status", "ok");
+        response.put("service", "gridjsdemo-java");
+        return response;
+    }
+
+    @GetMapping("/api/files")
+    public Map<String, Object> filesJson() {
+        List<String> files = new ArrayList<>();
+        File directory = new File(listDir);
+        File[] entries = directory.listFiles(File::isFile);
+        if (entries != null) {
+            Arrays.sort(entries, Comparator.comparing(File::getName, String.CASE_INSENSITIVE_ORDER));
+            for (File entry : entries) {
+                files.add(entry.getName());
+            }
+        }
+
+        Map<String, Object> response = new LinkedHashMap<>();
+        response.put("directory", directory.getAbsolutePath());
+        response.put("files", files);
+        return response;
+    }
     
     @GetMapping({"/index"})
     public ModelAndView getIndexPage()
@@ -88,6 +119,53 @@ public class DataController {
     
     @Value("${testconfig.UploadPath}")
     private String uploadDir;
+
+    @PostMapping("/api/upload")
+    public ResponseEntity<Map<String, Object>> uploadApi(
+            @RequestParam("file") MultipartFile file,
+            @RequestParam(value = "client", defaultValue = "vanilla") String client) {
+        Map<String, Object> response = new LinkedHashMap<>();
+        if (file.isEmpty()) {
+            response.put("error", "Choose a workbook before uploading.");
+            return ResponseEntity.badRequest().body(response);
+        }
+
+        try {
+            Path root = Paths.get(uploadDir).toAbsolutePath().normalize();
+            Files.createDirectories(root);
+
+            String originalName = safeFileName(file.getOriginalFilename());
+            String namespace = safeNamespace(client);
+            String storedName = namespace + "-" + UUID.randomUUID().toString() + "-" + originalName;
+            Path target = root.resolve(storedName).normalize();
+            if (!target.getParent().equals(root)) {
+                response.put("error", "Invalid upload path.");
+                return ResponseEntity.badRequest().body(response);
+            }
+
+            file.transferTo(target.toFile());
+            String uid = namespace + "-" + GridJsWorkbook.getUidForFile(storedName);
+            response.put("file", storedName);
+            response.put("displayName", originalName);
+            response.put("uid", uid);
+            response.put("fromUpload", "1");
+            return ResponseEntity.ok(response);
+        } catch (Exception exception) {
+            response.put("error", "Upload failed: " + exception.getMessage());
+            return ResponseEntity.status(500).body(response);
+        }
+    }
+
+    private static String safeFileName(String name) {
+        String candidate = name == null ? "workbook.xlsx" : Paths.get(name).getFileName().toString();
+        String sanitized = candidate.replaceAll("[^a-zA-Z0-9._() -]", "_");
+        return sanitized.isEmpty() ? "workbook.xlsx" : sanitized;
+    }
+
+    private static String safeNamespace(String client) {
+        String sanitized = client == null ? "vanilla" : client.replaceAll("[^a-zA-Z0-9-]", "-");
+        return sanitized.isEmpty() ? "vanilla" : sanitized;
+    }
     
     @PostMapping("/upload")
     public ModelAndView uploadFile(@RequestParam("file") MultipartFile file) {

package/example/src/main/java/com/aspose/gridjs/demo/controller/GridJs2Controller.java

@@ -95,6 +95,18 @@ public class GridJs2Controller extends GridJsControllerBase{
 				e.printStackTrace();
 			}
     }
+
+    @GetMapping("/DetailStreamJson")
+    public void detailStreamJson(@RequestParam String filename, HttpServletResponse response) {
+        Path filePath = Paths.get(listDir, filename);
+        response.setContentType("application/json");
+        response.setHeader("Content-Encoding", "gzip");
+        try (GZIPOutputStream gzipOutputStream = new GZIPOutputStream(response.getOutputStream())) {
+            _gridJsService.detailStreamJson(gzipOutputStream, filePath.toString());
+        } catch (Exception exception) {
+            exception.printStackTrace();
+        }
+    }
     
     
     @Value("${testconfig.UploadPath}")

package/example/vanilla-gridjs/npm/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Use gridjs-spreadsheet from npm with Vanilla HTML and Java.">
+    <title>GridJS Vanilla npm demo</title>
+  </head>
+  <body>
+    <div id="start-page" class="demo-shell">
+      <header class="demo-navbar"><a href="https://docs.aspose.com/cells/java/aspose-cells-gridjs/">Aspose.Cells.GridJs Vanilla npm demo</a></header>
+      <main class="demo-container">
+        <h1 class="visually-hidden">GridJS Vanilla npm demo</h1>
+        <fieldset class="demo-selector">
+          <legend>Select a demo:</legend>
+          <label class="radio-card active"><input type="radio" name="demoType" value="permanent" checked><span>permanent url load demo</span></label>
+          <label class="radio-card"><input type="radio" name="demoType" value="highlight"><span>highlight and custom context menu demo</span></label>
+        </fieldset>
+        <section class="upload-block"><h2>Upload a local workbook</h2><input id="upload-input" type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"></section>
+        <section class="path-block"><h2>Workbook directory: <span id="directory"></span></h2><h2>Choose a workbook to open</h2></section>
+        <p id="status-message" class="status-message" role="status"></p>
+        <section id="file-list" class="file-list" aria-label="Workbook files"></section>
+      </main>
+      <footer class="demo-footer">© 2026 · <a href="https://products.aspose.com/cells/java">Aspose.Cells for Java</a></footer>
+    </div>
+    <main id="editor-page" class="editor-page" hidden><div id="editor-status" class="editor-status" role="status"></div><div id="grid-host"></div></main>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

package/example/vanilla-gridjs/npm/main.js

@@ -0,0 +1,8 @@
+import xSpreadsheet from 'gridjs-spreadsheet';
+import JSZip from 'jszip';
+import 'gridjs-spreadsheet/xspreadsheet.css';
+import '../shared/styles.css';
+import { startGridJsDemo } from '../shared/demo-app.js';
+
+window.JSZip = JSZip;
+startGridJsDemo({ clientName: 'vanilla-npm', createSpreadsheet: xSpreadsheet });

package/example/vanilla-gridjs/npm/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "gridjs-vanilla-npm-java-demo",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1 --port 5175 --strictPort",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "gridjs-spreadsheet": "latest",
+    "jszip": "^3.10.1"
+  },
+  "devDependencies": {
+    "vite": "latest"
+  }
+}

package/example/vanilla-gridjs/npm/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  server: {
+    fs: { allow: ['..'] },
+    proxy: {
+      '/GridJs2': 'http://127.0.0.1:8080',
+      '/gridjsdemo': 'http://127.0.0.1:8080',
+    },
+  },
+});

package/example/vanilla-gridjs/script/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Use gridjs-spreadsheet directly with script tags and a Java backend.">
+    <title>GridJS Vanilla script demo</title>
+    <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@latest/xspreadsheet.css">
+    <script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
+    <script src="https://unpkg.com/gridjs-spreadsheet@latest/xspreadsheet.js"></script>
+  </head>
+  <body>
+    <div id="start-page" class="demo-shell">
+      <header class="demo-navbar"><a href="https://docs.aspose.com/cells/java/aspose-cells-gridjs/">Aspose.Cells.GridJs direct script demo</a></header>
+      <main class="demo-container">
+        <h1 class="visually-hidden">GridJS Vanilla direct script demo</h1>
+        <fieldset class="demo-selector">
+          <legend>Select a demo:</legend>
+          <label class="radio-card active"><input type="radio" name="demoType" value="permanent" checked><span>permanent url load demo</span></label>
+          <label class="radio-card"><input type="radio" name="demoType" value="highlight"><span>highlight and custom context menu demo</span></label>
+        </fieldset>
+        <section class="upload-block"><h2>Upload a local workbook</h2><input id="upload-input" type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"></section>
+        <section class="path-block"><h2>Workbook directory: <span id="directory"></span></h2><h2>Choose a workbook to open</h2></section>
+        <p id="status-message" class="status-message" role="status"></p>
+        <section id="file-list" class="file-list" aria-label="Workbook files"></section>
+      </main>
+      <footer class="demo-footer">© 2026 · <a href="https://products.aspose.com/cells/java">Aspose.Cells for Java</a></footer>
+    </div>
+    <main id="editor-page" class="editor-page" hidden><div id="editor-status" class="editor-status" role="status"></div><div id="grid-host"></div></main>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

package/example/vanilla-gridjs/script/main.js

@@ -0,0 +1,9 @@
+import { startGridJsDemo } from '../shared/demo-app.js';
+import '../shared/styles.css';
+
+if (typeof window.x_spreadsheet !== 'function') {
+  document.querySelector('#status-message').textContent = 'GridJS failed to load from the script URL.';
+  document.querySelector('#status-message').classList.add('status-error');
+} else {
+  startGridJsDemo({ clientName: 'vanilla-script', createSpreadsheet: window.x_spreadsheet });
+}

package/example/vanilla-gridjs/script/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "gridjs-vanilla-script-java-demo",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1 --port 5176 --strictPort",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "vite": "latest"
+  }
+}

package/example/vanilla-gridjs/script/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  server: {
+    fs: { allow: ['..'] },
+    proxy: {
+      '/GridJs2': 'http://127.0.0.1:8080',
+      '/gridjsdemo': 'http://127.0.0.1:8080',
+    },
+  },
+});

package/example/vanilla-gridjs/shared/demo-app.js

@@ -0,0 +1,205 @@
+const DEMO_PERMANENT = 'permanent';
+const DEMO_HIGHLIGHT = 'highlight';
+
+async function fetchJson(url, options) {
+  const response = await fetch(url, options);
+  if (!response.ok) {
+    const message = await response.text();
+    throw new Error(message || `${response.status} ${response.statusText}`);
+  }
+  return response.json();
+}
+
+function normalizeUid(clientName, file) {
+  return `${clientName}-uid-${file.replace(/[^a-zA-Z0-9]/g, '-')}`;
+}
+
+function readRoute(clientName) {
+  const params = new URLSearchParams(window.location.search);
+  const file = params.get('file');
+  if (!file) return null;
+  const demo = params.get('demo') === DEMO_HIGHLIGHT ? DEMO_HIGHLIGHT : DEMO_PERMANENT;
+  return {
+    file,
+    storedFile: params.get('storedFile') || file,
+    demo,
+    uid: params.get('uid') || normalizeUid(clientName, file),
+    fromUpload: params.get('fromUpload') || '',
+  };
+}
+
+function pushRoute(workbook) {
+  const params = new URLSearchParams({ file: workbook.file, demo: workbook.demo });
+  if (workbook.storedFile && workbook.storedFile !== workbook.file) params.set('storedFile', workbook.storedFile);
+  if (workbook.demo === DEMO_PERMANENT || workbook.fromUpload) params.set('uid', workbook.uid);
+  if (workbook.fromUpload) params.set('fromUpload', workbook.fromUpload);
+  window.history.pushState(null, '', `/?${params}`);
+}
+
+function workbookEndpoint(workbook) {
+  const params = new URLSearchParams({ filename: workbook.storedFile || workbook.file });
+  if (workbook.fromUpload) {
+    params.set('uid', workbook.uid);
+    return `/GridJs2/DetailStreamJsonWithUidFromUpload?${params}`;
+  }
+  if (workbook.demo === DEMO_PERMANENT) {
+    params.set('uid', workbook.uid);
+    return `/GridJs2/DetailStreamJsonWithUid?${params}`;
+  }
+  return `/GridJs2/DetailStreamJson?${params}`;
+}
+
+export function startGridJsDemo({ clientName, createSpreadsheet }) {
+  const startPage = document.querySelector('#start-page');
+  const editorPage = document.querySelector('#editor-page');
+  const editorStatus = document.querySelector('#editor-status');
+  const status = document.querySelector('#status-message');
+  const directory = document.querySelector('#directory');
+  const fileList = document.querySelector('#file-list');
+  const uploadInput = document.querySelector('#upload-input');
+  let current = readRoute(clientName);
+  let spreadsheet = null;
+
+  const selectedDemo = () => document.querySelector('input[name="demoType"]:checked')?.value || DEMO_PERMANENT;
+
+  function setStatus(message, isError = false) {
+    status.textContent = message;
+    status.classList.toggle('status-error', isError);
+  }
+
+  function updateDemoSelection(demo) {
+    const input = document.querySelector(`input[name="demoType"][value="${demo}"]`);
+    if (input) input.checked = true;
+    document.querySelectorAll('.radio-card').forEach((label) => {
+      label.classList.toggle('active', label.contains(input));
+    });
+  }
+
+  async function loadFiles() {
+    setStatus('Loading workbook list...');
+    try {
+      const result = await fetchJson('/gridjsdemo/api/files');
+      directory.textContent = result.directory || '';
+      fileList.replaceChildren();
+      if (!result.files?.length) {
+        const empty = document.createElement('p');
+        empty.className = 'empty-message';
+        empty.textContent = 'No workbooks found in the configured directory.';
+        fileList.append(empty);
+      } else {
+        result.files.forEach((file) => {
+          const button = document.createElement('button');
+          button.type = 'button';
+          button.className = 'file-item';
+          button.textContent = file;
+          button.addEventListener('click', () => openWorkbook({
+            file,
+            storedFile: file,
+            demo: selectedDemo(),
+            uid: normalizeUid(clientName, file),
+            fromUpload: '',
+          }));
+          fileList.append(button);
+        });
+      }
+      setStatus('Ready');
+    } catch (error) {
+      setStatus(`Failed to load files: ${error.message}`, true);
+    }
+  }
+
+  async function mountWorkbook() {
+    if (!current) {
+      editorPage.hidden = true;
+      startPage.hidden = false;
+      return;
+    }
+
+    startPage.hidden = true;
+    editorPage.hidden = false;
+    editorStatus.hidden = false;
+    editorStatus.textContent = `Loading ${current.file}...`;
+    try {
+      const payload = await fetchJson(workbookEndpoint(current));
+      if (payload.Error) throw new Error(payload.Error);
+      payload.filename = current.file;
+      document.querySelector('#grid-host').replaceChildren();
+
+      const options = {
+        updateMode: 'server',
+        updateUrl: '/GridJs2/UpdateCell',
+        showToolbar: true,
+        showContextmenu: true,
+        mode: 'edit',
+        local: 'en',
+      };
+      spreadsheet = createSpreadsheet('#grid-host', options).loadData(payload.data, payload.actname);
+      spreadsheet.setUniqueId?.(payload.uniqueid);
+      spreadsheet.setFileName?.(current.file);
+      spreadsheet.setImageInfo?.(
+        '/GridJs2/ImageUrl',
+        '/GridJs2/AddImage',
+        '/GridJs2/AddImageByURL',
+        '/GridJs2/CopyImage',
+        5678,
+      );
+      spreadsheet.setFileDownloadInfo?.('/GridJs2/Download');
+      spreadsheet.setOleDownloadInfo?.('/GridJs2/Ole');
+      spreadsheet.setLazyLoadingUrl?.('/GridJs2/LazyLoadingStreamJson');
+      spreadsheet.setOpenFileUrl?.('/');
+      spreadsheet.setActiveSheetByName?.(payload.actname)?.setActiveCell?.(payload.actrow, payload.actcol);
+      spreadsheet.change?.((data) => console.log('[GridJS Event] changed', data));
+      spreadsheet.on?.('cell-selected', (_, row, column) => console.log('[GridJS Event] cell selected', row, column));
+      spreadsheet.on?.('sheet-selected', (_, name) => console.log('[GridJS Event] sheet selected', name));
+      spreadsheet.updateCellError?.((message) => console.error('[GridJS update error]', message));
+      editorStatus.hidden = true;
+    } catch (error) {
+      editorStatus.hidden = false;
+      editorStatus.textContent = `Workbook load failed: ${error.message}`;
+      editorStatus.classList.add('status-error');
+    }
+  }
+
+  function openWorkbook(workbook) {
+    current = workbook;
+    pushRoute(workbook);
+    void mountWorkbook();
+  }
+
+  document.querySelectorAll('input[name="demoType"]').forEach((input) => {
+    input.addEventListener('change', () => updateDemoSelection(input.value));
+  });
+
+  uploadInput.addEventListener('change', async () => {
+    const file = uploadInput.files?.[0];
+    if (!file) return;
+    const form = new FormData();
+    form.append('file', file);
+    form.append('client', clientName);
+    setStatus(`Uploading ${file.name}...`);
+    try {
+      const result = await fetchJson('/gridjsdemo/api/upload', { method: 'POST', body: form });
+      openWorkbook({
+        file: result.displayName || file.name,
+        storedFile: result.file,
+        demo: selectedDemo(),
+        uid: result.uid || normalizeUid(clientName, result.file),
+        fromUpload: '1',
+      });
+    } catch (error) {
+      setStatus(`Upload failed: ${error.message}`, true);
+    } finally {
+      uploadInput.value = '';
+    }
+  });
+
+  window.addEventListener('popstate', () => {
+    current = readRoute(clientName);
+    if (current) updateDemoSelection(current.demo);
+    void mountWorkbook();
+  });
+
+  updateDemoSelection(current?.demo || DEMO_PERMANENT);
+  void loadFiles();
+  void mountWorkbook();
+}

package/example/vanilla-gridjs/shared/styles.css

@@ -0,0 +1,36 @@
+:root { font-family: Arial, Helvetica, sans-serif; color: #212529; background: #f8f9fa; }
+* { box-sizing: border-box; }
+html, body { min-height: 100%; }
+body { margin: 0; overflow-y: hidden; background: #f8f9fa; font-size: 14px; }
+button, input { font: inherit; }
+[hidden] { display: none !important; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+.demo-shell { min-height: 100dvh; display: flex; flex-direction: column; background: #f8f9fa; }
+.demo-navbar { min-height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid #dee2e6; padding: 8px 12px; font-size: 19px; }
+.demo-navbar a, .demo-footer a { color: #0645ad; text-decoration: underline; }
+.demo-container { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 20px 16px; }
+.demo-selector { border: 1px solid #adb5bd; border-radius: 6px; margin: 0 0 18px; padding: 18px 14px 14px; display: flex; align-items: center; }
+.demo-selector legend { width: auto; padding: 0 6px; font-weight: 600; }
+.radio-card { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; margin-left: -1px; border: 1px solid #adb5bd; background: #f0f0f0; color: #343a40; cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
+.radio-card:first-of-type { margin-left: 0; border-radius: 5px 0 0 5px; }
+.radio-card:last-of-type { border-radius: 0 5px 5px 0; }
+.radio-card.active { background: #0b63ce; border-color: #0b63ce; color: #fff; z-index: 1; }
+.radio-card:focus-within, .file-item:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(11, 99, 206, .35); outline-offset: 2px; }
+.upload-block h2, .path-block h2 { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
+.upload-block input[type=file] { min-height: 44px; margin-bottom: 12px; }
+.path-block { margin-top: 4px; }
+.status-message { min-height: 20px; margin: 8px 0; color: #495057; }
+.status-error { color: #b42318 !important; }
+.file-list { min-height: 140px; max-height: 260px; overflow-y: auto; border: 1px solid #ced4da; border-radius: 6px; background: #f6f7ef; padding: 8px; }
+.file-item { display: block; width: 100%; min-height: 40px; border: 0; border-radius: 4px; padding: 8px; background: transparent; color: #0645ad; text-align: left; text-decoration: underline; cursor: pointer; }
+.file-item:hover { background: #e7eef8; }
+.empty-message { margin: 16px; color: #5f6b76; }
+.demo-footer { min-height: 44px; border-top: 1px solid #dee2e6; display: flex; align-items: center; justify-content: center; padding: 8px 12px; color: #495057; }
+.editor-page { height: 100dvh; width: 100vw; overflow: hidden; background: #fff; position: relative; }
+#grid-host { width: 100%; height: 100%; }
+.editor-status { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px; color: #5f6b76; background: #fff; }
+@media (max-width: 700px) {
+  body { overflow-y: auto; }
+  .demo-selector { flex-direction: column; align-items: stretch; }
+  .radio-card { margin-left: 0; width: 100%; border-radius: 5px !important; }
+}

package/example/vue-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 Vue Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/example/vue-gridjs/package.json

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