gridjs-spreadsheet 26.6.2 → 26.7.1

package/example/vue-gridjs/src/App.vue

@@ -0,0 +1,199 @@
+<script setup>
+// 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).
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { GridJsSpreadsheet } from 'gridjs-spreadsheet/vue';
+import { DEMO_PERMANENT, DEMO_HIGHLIGHT, makeUid, readRoute, pushWorkbookRoute } from './routing';
+import { fetchJson } from './api';
+
+// Sample workbooks listed on the start page.
+const files = ref([]);
+const directory = ref('');
+// The workbook selected via the URL; null means "show the start page".
+const current = ref(readRoute());
+// Which demo mode is active (only relevant while on the start page).
+const demoType = ref(current.value?.demo || DEMO_PERMANENT);
+const workbookData = ref(null);
+const status = ref('Loading workbook list...');
+const hasWorkbook = computed(() => Boolean(current.value));
+// Forces the <GridJsSpreadsheet> to remount whenever a different workbook is loaded.
+const workbookKey = computed(() => (workbookData.value?.uniqueid || workbookData.value?.filename || '') + (current.value?.demo || ''));
+
+function logEvent(message) {
+  console.log('[GridJS Event]', message);
+}
+
+// Loads the list of sample workbooks available on the server.
+async function loadFiles() {
+  try {
+    const result = await fetchJson('/gridjsdemo/api/files');
+    files.value = result.files || [];
+    directory.value = result.directory || '';
+    status.value = 'Ready';
+  } catch (error) {
+    status.value = 'Failed to load files: ' + error.message;
+  }
+}
+
+// Navigates to a workbook: updates the URL and local state together.
+function openWorkbook(workbook) {
+  const normalized = { ...workbook, demo: workbook.demo || demoType.value };
+  pushWorkbookRoute(normalized);
+  current.value = normalized;
+  demoType.value = normalized.demo;
+}
+
+function openFile(file) {
+  openWorkbook({ file, storedFile: file, demo: demoType.value, uid: makeUid(file), fromUpload: '' });
+}
+
+// Fetches workbook data for the GridJsSpreadsheet component whenever `current`
+// changes. 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 function loadWorkbook() {
+  if (!current.value?.file) {
+    workbookData.value = null;
+    return;
+  }
+  workbookData.value = null;
+  status.value = 'Loading ' + current.value.file + '...';
+  try {
+    const demo = current.value.demo || DEMO_PERMANENT;
+    const params = new URLSearchParams({
+      filename: current.value.storedFile || current.value.file,
+      fromUpload: current.value.fromUpload || '',
+    });
+    let endpoint = '/GridJs2/DetailStreamJson';
+    if (current.value.fromUpload) {
+      params.set('uid', current.value.uid || makeUid(current.value.file));
+      endpoint = '/GridJs2/DetailStreamJsonWithUidFromUpload';
+    } else if (demo === DEMO_PERMANENT) {
+      params.set('uid', current.value.uid || makeUid(current.value.file));
+      endpoint = '/GridJs2/DetailStreamJsonWithUid';
+    }
+    const payload = await fetchJson(endpoint + '?' + params);
+    workbookData.value = { ...payload, filename: current.value.file };
+    status.value = 'Loaded ' + current.value.file;
+  } catch (error) {
+    status.value = 'Workbook load failed: ' + error.message;
+  }
+}
+
+async function upload(event) {
+  const file = event.target.files?.[0];
+  if (!file) return;
+  const form = new FormData();
+  form.append('file', file);
+  form.append('client', 'vue');
+  status.value = '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.value,
+      uid: result.uid || makeUid(result.file),
+      fromUpload: '1',
+    });
+  } catch (error) {
+    status.value = '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.
+function onReady(instance, adapter) {
+  instance.setActiveSheetByName?.(adapter.payload?.actname)?.setActiveCell?.(adapter.payload?.actrow, adapter.payload?.actcol);
+  instance.setOpenFileUrl?.('/');
+  logEvent('ready ' + (adapter.payload?.filename || current.value?.file));
+}
+
+function onError(payload) {
+  console.error('GridJS Vue mount error', payload);
+  logEvent('error ' + (payload?.error?.message || payload?.message || payload?.type || 'unknown'));
+}
+
+// Keeps state in sync when the user navigates with the browser's back/forward buttons.
+function onPopState() {
+  current.value = readRoute();
+  if (current.value?.demo) demoType.value = current.value.demo;
+}
+
+watch(current, loadWorkbook, { immediate: true });
+onMounted(() => {
+  loadFiles();
+  window.addEventListener('popstate', onPopState);
+});
+onBeforeUnmount(() => window.removeEventListener('popstate', onPopState));
+</script>
+
+<template>
+  <!-- A workbook is selected -> render the full-page spreadsheet editor. -->
+  <main v-if="hasWorkbook" class="editor-page">
+    <GridJsSpreadsheet
+      v-if="workbookData"
+      :key="workbookKey"
+      :data="workbookData"
+      height="100vh"
+      :show-toolbar="true"
+      :show-contextmenu="true"
+      @ready="onReady"
+      @change="logEvent('changed')"
+      @error="onError"
+      @cell-selected="(_, ri, ci) => logEvent('cell selected ' + ri + ',' + ci)"
+      @cell-edited="(text, ri, ci) => logEvent('cell edited ' + ri + ',' + ci)"
+      @sheet-selected="(_, name) => logEvent('sheet ' + name)"
+    />
+    <div v-else class="editor-loading">{{ status }}</div>
+  </main>
+
+  <!-- No workbook selected -> render the start page (demo picker + file list + upload). -->
+  <div v-else 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" />
+      </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 v-if="status === 'Ready' && files.length === 0" class="empty-message">No workbooks found in the configured directory.</p>
+        <a v-for="file in files" :href="'/?file=' + encodeURIComponent(file)" :key="file" class="file-item" @click.prevent="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>
+</template>

package/example/vue-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/vue-gridjs/src/main.js

@@ -0,0 +1,9 @@
+// Entry point: just mounts the <App> root component (see ./App.vue).
+// Shared route/API helpers live in ./routing.js and ./api.js so App.vue
+// stays focused on component state and markup.
+import { createApp } from 'vue';
+import 'gridjs-spreadsheet/xspreadsheet.css';
+import './styles.css';
+import App from './App.vue';
+
+createApp(App).mount('#app');

package/example/vue-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 = 'vue';
+
+// 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/vue-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/vue-gridjs/vite.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      vue: 'vue/dist/vue.esm-bundler.js'
+    }
+  },
+  server: {
+    proxy: {
+      '/GridJs2': 'http://127.0.0.1:8080',
+      '/gridjsdemo': 'http://127.0.0.1:8080'
+    }
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true
+  }
+});

package/index.d.ts

@@ -6,6 +6,12 @@ declare module 'gridjs-spreadsheet' {
     showContextmenu?: boolean;
     showFileName?: boolean;
     local?:string;
+    locale?: string;
+    updateMode?: 'server' | 'client' | string;
+    updateUrl?: string;
+    token?: string;
+    loadingGif?: string;
+    showPartToolbar?: boolean;
     view?: {
       height: () => number;
       width: () => number;
@@ -451,11 +457,62 @@ declare module 'gridjs-spreadsheet' {
      * get data
      */
     getData(): Record<string, any>;
+    /**
+     * get pending server update payloads
+     */
+    getUpdateDatas(): Record<string, any>[];
+    /**
+     * update authorization token used by server requests
+     */
+    refreshToken(token: string): void;
+    /**
+     * release GridJS DOM and runtime resources
+     */
+    destroy(): void;
+    /**
+     * configure server-side workbook id
+     */
+    setUniqueId(uid: string): void;
+    /**
+     * configure display/download file name
+     */
+    setFileName(fname: string): void;
+    /**
+     * configure image endpoints
+     */
+    setImageInfo(
+      imageUrl: string,
+      uploadByLocalUrl: string,
+      uploadByUrlUrl: string,
+      copyUrl: string,
+      zorder?: number,
+      loadingGifUrl?: string
+    ): void;
+    /**
+     * configure file download endpoint
+     */
+    setFileDownloadInfo(url: string): void;
+    /**
+     * configure OLE download endpoint
+     */
+    setOleDownloadInfo(url: string): void;
+    /**
+     * configure lazy loading endpoint
+     */
+    setLazyLoadingUrl(url: string): void;
+    /**
+     * bind server update error handler
+     */
+    updateServerError(callback: (...args: any[]) => void): this;
+    /**
+     * bind update-cell error handler
+     */
+    updateCellError(callback: (...args: any[]) => void): this;
     /**
      * bind handler to change event, including data change and user actions
      * @param callback
      */
-    change(callback: (json: Record<string, any>) => void): void;
+    change(callback: (json: Record<string, any>) => void): this;
     /**
      * set locale
      * @param lang

package/index.js

@@ -1 +1 @@
-module.exports = require('./xspreadsheet.js');
+module.exports = require('./xspreadsheet.js');

package/package.json

@@ -1,50 +1,170 @@
-{
-  "name": "gridjs-spreadsheet",
-  "version": "26.6.2",
-  "description": "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 based on JSON format.",
-  "types": "index.d.ts",
-  "main": "xspreadsheet.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
- "keywords": [
-  "excel",
-  "spreadsheet",
-  "web-excel",
-  "online-excel",
-  "excel-viewer",
-  "excel-editor",
-  "javascript-excel",
-  "javascript-spreadsheet",
-  "excel-component",
-  "spreadsheet-ui",
-  "react-spreadsheet",
-  "vue-excel",
-  "typescript",
-  "xlsx",
-  "xls",
-  "csv",
-  "ods",
-  "numbers",
-  "xlsm",
-  "xlsb",
-  "excel-io",
-  "redact",
-  "redaction",
-  "data-redaction",
-  "collaborative-editing",
-  "excel-api",
-  "data-table",
-  "datagrid",
-  "convert-pdf",
-  "convert-html",
-  "sheets"
-],
-  "author": "Aspose Cells Team",
-  "dependencies": {
-    "jquery": "~ 3.6.0",
-    "jquery-ui": "~ 1.13.2",
-    "jszip": "~ 3.10.1"
-  },
-  "license": "MIT"
-}
+{
+  "name": "gridjs-spreadsheet",
+  "version": "26.7.1",
+  "description": "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, copy/paste from Excel, and server-side integration.",
+  "types": "index.d.ts",
+  "main": "xspreadsheet.js",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./xspreadsheet.js"
+    },
+    "./xspreadsheet.css": "./xspreadsheet.css",
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./angular": {
+      "types": "./angular.d.ts",
+      "default": "./angular.js"
+    },
+    "./shared": {
+      "types": "./shared.d.ts",
+      "default": "./shared.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "readme.md",
+    "preview.gif",
+    "xspreadsheet.js",
+    "xspreadsheet.css",
+    "*.svg",
+    "index.js",
+    "index.d.ts",
+    "shared.js",
+    "shared.d.ts",
+    "react.js",
+    "react.d.ts",
+    "vue.js",
+    "vue.d.ts",
+    "angular.js",
+    "angular.d.ts",
+    "example/.gitignore",
+    "example/README.md",
+    "example/HELP.md",
+    "example/Dockerfile",
+    "example/compose.yaml",
+    "example/pom.xml",
+    "example/mvnw",
+    "example/mvnw.cmd",
+    "example/src/main/java",
+    "example/src/main/resources",
+    "example/wb",
+    "example/react-gridjs/index.html",
+    "example/react-gridjs/package.json",
+    "example/react-gridjs/src",
+    "example/react-gridjs/vite.config.js",
+    "example/vue-gridjs/index.html",
+    "example/vue-gridjs/package.json",
+    "example/vue-gridjs/src",
+    "example/vue-gridjs/vite.config.js",
+    "example/angular-gridjs/.nvmrc",
+    "example/angular-gridjs/angular.json",
+    "example/angular-gridjs/package.json",
+    "example/angular-gridjs/proxy.conf.json",
+    "example/angular-gridjs/src",
+    "example/angular-gridjs/tsconfig.json",
+    "example/angular-gridjs/tsconfig.app.json",
+    "example/vanilla-gridjs/shared",
+    "example/vanilla-gridjs/npm/index.html",
+    "example/vanilla-gridjs/npm/main.js",
+    "example/vanilla-gridjs/npm/package.json",
+    "example/vanilla-gridjs/npm/vite.config.js",
+    "example/vanilla-gridjs/script/index.html",
+    "example/vanilla-gridjs/script/main.js",
+    "example/vanilla-gridjs/script/package.json",
+    "example/vanilla-gridjs/script/vite.config.js"
+  ],
+  "keywords": [
+    "excel",
+    "spreadsheet",
+    "web-excel",
+    "online-excel",
+    "excel-viewer",
+    "excel-editor",
+    "javascript-excel",
+    "javascript-spreadsheet",
+    "excel-component",
+    "spreadsheet-ui",
+    "react-spreadsheet",
+    "vue-excel",
+    "angular-spreadsheet",
+    "vue-spreadsheet",
+    "react-excel",
+    "angular-excel",
+    "typescript",
+    "xlsx",
+    "xls",
+    "csv",
+    "ods",
+    "numbers",
+    "xlsm",
+    "xlsb",
+    "excel-io",
+    "redact",
+    "redaction",
+    "data-redaction",
+    "collaborative-editing",
+    "excel-api",
+    "data-table",
+    "datagrid",
+    "convert-pdf",
+    "convert-html",
+    "sheets",
+    "web-spreadsheet",
+    "spreadsheet-editor",
+    "excel-online",
+    "excel-formula",
+    "excel-chart",
+    "data-validation",
+    "copy-paste-excel",
+    "spreadsheet-component",
+    "open-source-excel",
+    "free-excel-editor",
+    "gridjs"
+  ],
+  "author": "Aspose Cells Team",
+  "dependencies": {
+    "jszip": "~3.10.1"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0",
+    "react": ">=16.8.0",
+    "@angular/core": ">=14.0.0",
+    "@angular/common": ">=14.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "@angular/common": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aspose-cells/Aspose.Cells.Grid-for-.NET.git"
+  },
+  "homepage": "https://products.aspose.app/cells/editor",
+  "bugs": {
+    "url": "https://forum.aspose.com/c/cells"
+  }
+}

package/react.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties } from 'react';
+import type Spreadsheet from 'gridjs-spreadsheet';
+import type { GridJsAdapter } from './shared';
+
+export interface GridJsSpreadsheetProps {
+  apiBase?: string;
+  data?: any;
+  loader?: () => Promise<any> | any;
+  mode?: 'edit' | 'read';
+  locale?: string;
+  token?: string;
+  height?: string | number;
+  showToolbar?: boolean;
+  showContextmenu?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  onReady?: (instance: Spreadsheet, adapter: GridJsAdapter) => void;
+  onChange?: (...args: any[]) => void;
+  onError?: (payload: any) => void;
+  onCellSelected?: (...args: any[]) => void;
+  onCellEdited?: (...args: any[]) => void;
+  onSheetSelected?: (...args: any[]) => void;
+  onSheetLoaded?: (...args: any[]) => void;
+}
+
+export function GridJsSpreadsheet(props: GridJsSpreadsheetProps): JSX.Element;
+export default GridJsSpreadsheet;