Initialise Sheet with Previously Saved Sheet Data

[dtiwarii]

We are facing issues when trying to initialise workbook sheet with the data that we received on onChange handler of workbook. Can you Please Help. Following is the json [ { "name": "Sheet1", "id": "de8a8bf4-f36b-4eae-be2b-b2956f33f295", "status": 1, "data": [ [ { "m": "one", "ct": { "fa": "General", "t": "g" }, "v": "one" }, { "m": "two", "ct": { "fa": "General", "t": "g" }, "v": "two" } ], [ { "m": "three", "ct": { "fa": "General", "t": "g" }, "v": "three" }, { "m": "four", "ct": { "fa": "General", "t": "g" }, "v": "four" } ] ] } ]

[dieguezguille]

Currently having the same issue. We get the Sheet object from our API and we see that the spreadsheet initializes with the incoming data but all cells that have a function don't get recalculated

[gazedreamily]

@dtiwarii you can just convert data to celldata and try again. The sheets will initalize with celldata rather than data. Here's a demo

export const Test = Template.bind({});
const celldata = dataToCelldata([
  [
    {
      m: "one",
      ct: {
        fa: "General",
        t: "g",
      },
      v: "one",
    },
    {
      m: "two",
      ct: {
        fa: "General",
        t: "g",
      },
      v: "two",
    },
  ],
  [
    {
      m: "three",
      ct: {
        fa: "General",
        t: "g",
      },
      v: "three",
    },
    {
      m: "four",
      ct: {
        fa: "General",
        t: "g",
      },
      v: "four",
    },
  ],
]);
Test.args = {
  data: [
    {
      name: "Sheet1",
      id: "de8a8bf4-f36b-4eae-be2b-b2956f33f295",
      status: 1,
      celldata,
    },
  ],
};

[gazedreamily]

Currently having the same issue. We get the Sheet object from our API and we see that the spreadsheet initializes with the incoming data but all cells that have a function don't get recalculated

Maybe you come with the same issue. And here is the demo.

export const Test = Template.bind({});
const celldata = dataToCelldata([
  [{ v: "0" }],
  [{ v: "1" }],
  [{ v: 1, f: "=A1+A2", ct: { fa: "General", t: "n" }, m: "1" }],
]);
Test.args = {
  data: [
    {
      name: "Sheet2",
      order: 1,
      row: 3,
      column: 1,
      id: "c392f098-129b-437c-a10c-445d52d2ce67",
      status: 0,
      celldata,
      config: { merge: {} },
      calcChain: [{ r: 2, c: 0, id: "c392f098-129b-437c-a10c-445d52d2ce67" }],
      luckysheet_conditionformat_save: [],
      luckysheet_alternateformat_save: [],
      dataVerification: {},
      hyperlink: {},
    },
  ],
};

With this demo, the cell with formula will auto update.

[dtiwarii]

@dtiwarii you can just convert data to celldata and try again. The sheets will initalize with celldata rather than data. Here's a demo

export const Test = Template.bind({});
const celldata = dataToCelldata([
  [
    {
      m: "one",
      ct: {
        fa: "General",
        t: "g",
      },
      v: "one",
    },
    {
      m: "two",
      ct: {
        fa: "General",
        t: "g",
      },
      v: "two",
    },
  ],
  [
    {
      m: "three",
      ct: {
        fa: "General",
        t: "g",
      },
      v: "three",
    },
    {
      m: "four",
      ct: {
        fa: "General",
        t: "g",
      },
      v: "four",
    },
  ],
]);
Test.args = {
  data: [
    {
      name: "Sheet1",
      id: "de8a8bf4-f36b-4eae-be2b-b2956f33f295",
      status: 1,
      celldata,
    },
  ],
};

dataToCelldata is inbuilt function or custom function please provide function definition.

[gazedreamily]

@dtiwarii you can just convert data to celldata and try again. The sheets will initalize with celldata rather than data. Here's a demo

export const Test = Template.bind({});
const celldata = dataToCelldata([
  [
    {
      m: "one",
      ct: {
        fa: "General",
        t: "g",
      },
      v: "one",
    },
    {
      m: "two",
      ct: {
        fa: "General",
        t: "g",
      },
      v: "two",
    },
  ],
  [
    {
      m: "three",
      ct: {
        fa: "General",
        t: "g",
      },
      v: "three",
    },
    {
      m: "four",
      ct: {
        fa: "General",
        t: "g",
      },
      v: "four",
    },
  ],
]);
Test.args = {
  data: [
    {
      name: "Sheet1",
      id: "de8a8bf4-f36b-4eae-be2b-b2956f33f295",
      status: 1,
      celldata,
    },
  ],
};

dataToCelldata is inbuilt function or custom function please provide function definition.

This is an inbuilt api.

[dieguezguille]

@gazedreamily Thanks for the heads up, but it unfortunately did not work :/ Just to note, I'm using the React package "@fortune-sheet/react" and I'm using the function like this:

     <Workbook
          data={data.spreadsheet.map((sheet: Sheet) => {
          const newSheet = {
               ...sheet,
               celldata: dataToCelldata(sheet.data),
               }
               delete newSheet.data
               return newSheet
               })}
           ref={workbookRef}
      />

We had to copy the function dataToCelldata from the library and import it as a helper function because at the time of rendering, the workbookRef is not initialized yet and we need to pass the data prop in its final form. Is there a better approach?

I'm using React 18 in Next.js with fortune-sheet version ^0.17.0

[gazedreamily]

@dieguezguille you can try to import from @fortune-sheet/core

[juanparati]

It seems that in the 0.18 version the method "dataToCelldata" is not exported.

I had to copied it.

[gaozhidf]

It seems that in the 0.18 version the method "dataToCelldata" is not exported.

I had to copied it.

you need to import @fortune-sheet/core manually, like npm install -s @fortune-sheet/core@0.18.3

[seleckis]

@juanparati Hi, I had the same issue. Can confirm that dataToCelldata is not exported from @fortune-sheet/core directly. It is exported as a part of api object. So do:

import { api } from "@fortune-sheet/core";

and then

api.dataToCelldata(data);