Trying to integrate SpreadJS Designer Component in a React Project

Question

So I've been trying to integrate SpreadJS Designer Component (npm module) into my React project following this Quick Start guide for React. After trying for some time I got it to work like this, Spreadsheet is working (shapes, charts, colors and etc)

<Designer styleInfo={{ width: "100%", height: "calc(100vh - 25px)" }} />

But how can I input a JSON file into this through props? What other props are there to access? I couldn't find any documentation related to this. I'm looking for a prop to get and set the document JSON. that's pretty much it.

Update: And maybe get an onChanged event or something. I really don't know what the props are as there is no documentation relating to this.

Answer 1

I am a member of GrapeCity’s Technical Engagement team supporting SpreadJS and the Designer Component Add-on.

To import JSON data to your SpreadJS instance, instead of using props, you are able to use SpreadJS’s fromJSON method. You can implement this method when the worksheet is being initialized to have the JSON data imported to the SpreadJS instance as the page loads.

Here is a link to our live React demo, please notice on the app.jsx file there is an initSpread function that imports JSON data using the spread.fromJSON. The initSpread function is applied when the workbook is being initialized using the workbookInitialized event listener like so:

<div class="sample-spreadsheets">
   <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
     <Worksheet>
     </Worksheet>
   </SpreadSheets>
 </div>

The JSON data will then be imported as the workbook is being initialized. Please import the JSON data using the fromJSON method. Let me know if you have any questions about what I shared by reaching out here or by submitting a support ticket with our team here. Thank you, Mackenzie