Integrating SpreadJS Designer Component in a React project

Integrating SpreadJS Designer Component in a React project

Posted by: c.chamandana on 1 May 2021, 8:03 am EST

• 

  c.chamandana

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 1 May 2021, 8:03 am EST

  So I’ve been trying to integrate SpreadJS Designer Component (https://www.npmjs.com/package/@grapecity/spread-sheets-designer-react) into my React project. After trying for sometime I got this to work like this,

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

  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.

  Thanks in advance.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 3 May 2021, 8:14 am EST

  Hi Chamuth,

  You may need to use the designerInitialized event and then load the JSON inside the event handler. Please refer to the following code snippet and let us know if you face any issues.

  function designerInitializedCallback(designer) {
    console.log(designer);
    let workbook = designer.getWorkbook();
    workbook.fromJSON(JSON.parse(jsonTemplate));
  }
  function App() {
    return (
      <Designer
        styleInfo={{ width: "100%", height: "600px" }}
        designerInitialized={designerInitializedCallback}
      />
    );
  }
  

  Regards
  
  Avinash