Integrating SpreadJS Designer Component in a React project

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

  • 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.
  • Marked as Answer

    Replied 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