UI for tables, formulas etc

Posted by: brian on 31 December 2019, 12:05 pm EST

  • Posted 31 December 2019, 12:05 pm EST

    Within the documentation it appears that you may create/modify tables using javascript, however I would like to know if there are any pre-built UI components to facilitate users in creating tables or adding a formula to a cell. Ideally we would like present the user with an interface similar to Excel.

  • Posted 2 January 2020, 12:40 am EST

    Hi Brian,

    You may use one of the following samples as a base for creating your application:

    https://www.grapecity.com/spreadjs/spreadsheet/

    https://www.grapecity.com/demos/spread/JS/InspectorSample/

    The source code for both of the above samples is available in the SpreadJS download bundle(https://www.grapecity.com/spreadjs/).

    You may find the samples at the following locations:

    • location_to_spread_bundle/SpreadJS.release.xx.x.x/SpreadJS/samples/CustomToolbars

    • location_to_spread_bundle/SpreadJS.release.xx.x.x/SpreadJS/samples/FeatureDrillDown

    Further, if you need to create an application just like MS Excel, then you may also purchase a license for our Designer sample which provides the looks and feels of MS Excel out of the box. Please use the following link to try out the web designer online: https://www.grapecity.com/spreadjs/designer/content/index.html

    Regards

    Sharad

  • Posted 2 January 2020, 1:12 pm EST

    Those are great, exactly what I am looking for thank you. Is there any chance that those are available as React components?

  • Posted 3 January 2020, 12:56 am EST

    Hi Brian,

    We are sorry all of the above samples are written in JS using jQuery and we do not have a React component for the same. You would have to wrap the sample in a React component at your end.

  • Posted 29 January 2020, 12:47 pm EST

    Can you provide any guidance on wrapping these samples in React? I know there are some basic samples provided in React, but they do not to appear to include any samples/documentation on toolbars.

    Alternatively, are there any plans to extend coverage of these features to React? As it exists now, I don’t think the React offering is sufficient for our use case and it appears to be a large workload to convert existing samples to React

  • Posted 30 January 2020, 3:29 am EST

    Hi Brain,

    Actually, adding toolbars in react isn’t actually much different from adding it in the PureJS. We need to follow these basic steps:

    • Create UI for toolbar(add buttons/dropdown for various features)

    • Add spread workbook

    • Add handlers for various click/events to UI components in the toolbar and perform the required operation on the spread instance in the event handler.

    You could refer to the attached sample which demonstrates how we could add a basic toolbar for updating Spread in react. Please note that the sample is using wijmo’s combobox for dropdowns in the sample but you may use any other combobox/dropdown in the similar manner.

    Alternatively, are there any plans to extend coverage of these features to React?

    All the features of Spread available in pureJS could also be used in the react version. Would you please confirm if you are referring to the samples or is there any specific feature that seems to be missing in the react wrapper?

    Regards

    Sharad

    react-spread-toolbar.zip

Need extra support?

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

Learn More

Forum Channels