Problem mounting multiple instances of the spreadsheet on the same html page

[dberardo-com]

i am having trouble using the toolbar buttons on an html page with multipl einstances of the owl spreadsheet component.
The sheet canvas and sheets navigation (so the Model) seems to work fine, but the toolbar buttons are added globally to only the first instance that gets mounted ...

is there a way to make toolbars also independent / instance-related elements

[rrahir]

Hi,
As always, tahnks for your interest in o-spreadsheet.
The current spreadsheet component was not designed with the manipulation you describe as a goal.

Could you provide some details on how to reproduce your bug? For instance your html structure and the javascript code used to instanciate the components?

[dberardo-com]

hi there,

basically i am having to divisions in my html page where 2 different instances of the spreadsheet are mounted. basically i have 2 instances of a plain react component (think like a div with a ref attached to it), and inside each of these components i have this useEffect hook:

...

const topbarMenuRegistry = new MenuItemRegistry();
...

export const MyComponent = ({data}) => {
  useEffect(() => {
    let model = new Model(data)

    const rootApp = new owl.App(Spreadsheet, { props: { model } });

    // @ts-ignore
    if (topbarMenuRegistry.content.file?.children?.filter(c => c.id == "dashboard").length == 0) topbarMenuRegistry.addChild("dashboard", ["file"], {
  ---> here add more elements
    });

    dispatch({ model })
    rootApp.addTemplates(templates);
    rootApp.mount(rootRef.current, {})

    return () => rootApp.destroy()
  }, [data])

return <div ref={rootRef} />
}

state management and canvas / sheet management seem not to be a problem in this case, but for the toolbar elements there are conflicts between the different instances of this component and so i am looking for a possible workaround