React implementation for JS-XLSX In-Browser HTML Table Edit Demo #1960

Closed
opened 2020-05-21 03:17:24 +00:00 by parulcoer · 7 comments
parulcoer commented 2020-05-21 03:17:24 +00:00 (Migrated from github.com)

I want to know if there is any implementation of the demo https://sheetjs.com/demo/modify.html in react. I am new to React and want to implement the similar functionality.

I want to know if there is any implementation of the demo https://sheetjs.com/demo/modify.html in react. I am new to React and want to implement the similar functionality.
SheetJSDev commented 2020-06-03 20:08:23 +00:00 (Migrated from github.com)

The modify demo is fairly simplistic.

When the file is read, the first worksheet is rendered to an HTML TABLE. On export, the table data is scraped and the resulting file is exported.

You can do this in react by using a ref on the container element. On read, you would set the innerHTML directly. On write, the ref gives you easy access to the live dom element.

The modify demo is fairly simplistic. When the file is read, the first worksheet is rendered to an HTML TABLE. On export, the table data is scraped and the resulting file is exported. You can do this in react by using a ref on the container element. On read, you would set the innerHTML directly. On write, the ref gives you easy access to the live dom element.
code-trekker commented 2020-08-03 06:25:15 +00:00 (Migrated from github.com)

I tried the demo, and noticed that when I dropped my own Excel file and changed around the contents, the resulting downloaded file will contain the unchanged data instead.

I tried the demo, and noticed that when I dropped my own Excel file and changed around the contents, the resulting downloaded file will contain the unchanged data instead.
tarikhamilton commented 2020-10-27 00:54:43 +00:00 (Migrated from github.com)

I'm down to do this, but I just wanted some feedback on what I think are the expectations. Would it be to recreate the existing demo, but fully functioning with modern React code, such as using hooks (v16.8+)? Is there an existing code style? I would use prettier, if none is specified.

Also, is the React demo on the deployed docs? I can't find a way to navigate to it.

I'm down to do this, but I just wanted some feedback on what I think are the expectations. Would it be to recreate the existing demo, but fully functioning with modern React code, such as using hooks (v16.8+)? Is there an existing code style? I would use `prettier`, if none is specified. Also, is the React demo on the deployed docs? I can't find a way to navigate to it.
SheetJSDev commented 2021-09-23 06:01:52 +00:00 (Migrated from github.com)

@tarikhamilton the demos are not "deployed" anywhere. for react, you can spin up a local web server (with python -mSimpleHTTPServer or npx http-server).

Instead of working through HTML, it's probably better to demo an editable grid component that is built specifically for react. Instead of pulling from the rendered grid, it would be better to use the underlying state. The "read" part of the demo would update the state based on the data in the file while the "write" part would extract the state and generate a workbook.

One open question is whether to create an external demo or contribute code to the projects directly. For example, react-data-grid demo page has an export and it might make sense to contribute an importer there. For react-table, react-table-plugins has an export so it may make sense to contribute.

@tarikhamilton the demos are not "deployed" anywhere. for react, you can spin up a local web server (with `python -mSimpleHTTPServer` or `npx http-server`). Instead of working through HTML, it's probably better to demo an editable grid component that is built specifically for react. Instead of pulling from the rendered grid, it would be better to use the underlying state. The "read" part of the demo would update the state based on the data in the file while the "write" part would extract the state and generate a workbook. One open question is whether to create an external demo or contribute code to the projects directly. For example, [`react-data-grid`](https://github.com/adazzle/react-data-grid) demo page has an export and it might make sense to contribute an importer there. For `react-table`, [`react-table-plugins`](https://www.npmjs.com/package/react-table-plugins) has an export so it may make sense to contribute.
cechiorlu commented 2021-11-25 08:14:58 +00:00 (Migrated from github.com)

I vote contributing to the projects directly. @tarikhamilton what's the update? Do you need help?

I vote contributing to the projects directly. @tarikhamilton what's the update? Do you need help?
reviewher commented 2022-02-11 00:39:36 +00:00 (Migrated from github.com)

Demo using fetch to parse and update a react-data-grid: https://codesandbox.io/s/quiet-cookies-9j7ks

import { useEffect, useState } from "react";
import DataGrid from "react-data-grid";
import { read, utils } from "xlsx";

const url = "https://oss.sheetjs.com/test_files/RkNumber.xls";

export default function App() {
  const [columns, setColumns] = useState([]);
  const [rows, setRows] = useState([]);
  useEffect(() => {(async () => {
    const wb = read(await (await fetch(url)).arrayBuffer(), { WTF: 1 });
    const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 });
    setColumns(data[0].map((r) => ({ key: r, name: r })));
    setRows(data.slice(1).map((r) => r.reduce((acc, x, i) => {
      acc[data[0][i]] = x;
      return acc;
    }, {})));
  })(); });

  return <DataGrid columns={columns} rows={rows} />;
}
Demo using fetch to parse and update a `react-data-grid`: https://codesandbox.io/s/quiet-cookies-9j7ks ```js import { useEffect, useState } from "react"; import DataGrid from "react-data-grid"; import { read, utils } from "xlsx"; const url = "https://oss.sheetjs.com/test_files/RkNumber.xls"; export default function App() { const [columns, setColumns] = useState([]); const [rows, setRows] = useState([]); useEffect(() => {(async () => { const wb = read(await (await fetch(url)).arrayBuffer(), { WTF: 1 }); const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 }); setColumns(data[0].map((r) => ({ key: r, name: r }))); setRows(data.slice(1).map((r) => r.reduce((acc, x, i) => { acc[data[0][i]] = x; return acc; }, {}))); })(); }); return <DataGrid columns={columns} rows={rows} />; } ```
SheetJSDev commented 2022-03-12 15:18:17 +00:00 (Migrated from github.com)

f443aa8 shows react-data-grid, including switching between worksheets and writing the entire modified workbook. Thanks @0xc0Der !

[f443aa8](https://github.com/SheetJS/sheetjs/commit/f443aa8475ebf051fc4e888cf0a6c3e5b751813c) shows `react-data-grid`, including switching between worksheets and writing the entire modified workbook. Thanks @0xc0Der !
Sign in to join this conversation.
No Milestone
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: sheetjs/sheetjs#1960
No description provided.