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

[rrahir]

Hi,
I apologize for the lack of followup in our issues. For some reasons, I never get the notifications.

Unfortunately, the menu registries are global and defined inside the library, which means that every mounted Spreadsheet will have to share the same top bar registry.

Given the code you provided, you are adding children menu items to an isolated topbarMenuRegistry that will never be used because the library will always call o_spreadsheet.registries.topbarMenuRegistry.

If you want instance-related elements, you could rely on the visibility of the menu item and use custom conditions that would interact with your current React component to filter out the menus that you don't want to see.
We have this sort of behaviour - example

// import example giving you have injected the library in the browser
const { regitries } =  window.o_spreadsheet;
const { topbarMenuRegistry }  = registries;

// add this in your useEffect


// Adding a custom id for each react component. This will prevent collisions with other
// components as the id of the item is unique. This might be where you had some trouble
topbarMenuRegistry.addChild(`dashboard_${my_component_unique_id}`, ["file"], {. 
  name: _t("My button for spreadsheet 1"),
  execute(env) { /*do stuff*/ },
  isVisible: (env) => {
    // add a dynamic condition that will be true if we are in right component, false otherwise
  },
}, 
{ force: True } // in recent versions we prevent the automatic override of existing items
);

It might also be interesting to clean up the menu registry if you were to spawn/unspawn lots of spreadsheets.

Again, I apologize for the delay. I hope that you managed to find a workaround in the meantime.

Have a great day