Integrating SpreadJS Designer Component in a React project

Posted by: c.chamandana on 30 April 2021, 11:03 pm EST

    • Post Options:
    • Link

    Posted 30 April 2021, 11:03 pm 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.

  • Posted 2 May 2021, 11:14 pm 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

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels