React integration problems (re-rendering)

Posted by: ryan on 15 September 2021, 6:08 pm EST

  • Posted 15 September 2021, 6:08 pm EST

    Our web application is powered by reactjs.

    The issue with our SpreadJS react integration is that it does not appear to let us use react’s declarative approach for rendering data as table of rows and columns like you can do with

    , ,
    .

    We’ve tried two approaches for using SpreadJS in declarative way within our ReactJS:

    (a) Phantom components (, , ) doing imperative calls to underlying SpreadJS instance (getCell, addSpan, etc) to set/update/clear values and formatting. The problem with this approach was that very frequently data would be inserted into the wrong cell or the rows would be out of order.

    (b) React-reconciler with calling imperatively SpreadJS instance in commitMount/commitUpdate phases. In this current implementation, the data appears in the right cell most of the time but spreadJS renders multiple times and sometimes the rows (especially when there are 10 or more) appear out of order.

    In both these implementations of SpreadJS, we’ve sruggled to ensure that the underlying spreadjs instance does not ‘go away’ while we are imperatively setting data to it.

    Is it possible to supply data to SpreadJS as data source while consuming data from end-user/backend through declarative components , , ?

    Would employing a ‘Data provider/source approach’ where we would supply formulas to SpreadJS through data source while consuming data from end-user/backend through declarative components , , work?

    View the video where on the page Avg Market Rents the average appears as the first row, it’s not until I refresh the page two times that it appears on the bottom row where it is supposed to be.

    screencast-hff.vizibly.io-2021.09.15-15_03_27.zipscreencast-hff.vizibly.io-2021.09.15-15_03_27.zip

  • Posted 16 September 2021, 5:30 am EST

    Hi,

    Could you please share a sample project the demonstrates the issue so that we could investigate it further and assist you accordingly? You may also refer to the following react sample and modify it to replicate the issue.

    sample: https://codesandbox.io/s/funny-ramanujan-2fk05?file=/src/index.js

    Regards

    Avinash

  • Posted 17 September 2021, 12:41 am EST

    Any ideas avinash?

  • Posted 17 September 2021, 1:49 am EST

    Hi,

    We are sorry but we are not able to run the project using these files. Could please modify the following sample to replicate the issue so we could investigate it further and help you accordingly.

    react+typescript sample: https://codesandbox.io/s/react-typescript-forked-u858y?file=/src/index.tsx

    Regards

    Avinash

  • Posted 17 September 2021, 12:48 pm EST

    does that work

  • Posted 17 September 2021, 12:56 pm EST

  • Posted 17 September 2021, 12:59 pm EST

  • Posted 20 September 2021, 12:39 am EST

    Hi Ryan,

    We are sorry but we are still unable to run the project using the provided file. Could you please share a small working sample and some steps by which we could replicate the issue at our end? so that we could investigate the issue properly and assist you accorindly.

    Regards,

    Avinash

Need extra support?

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

Learn More

Forum Channels