gridjs: [Grid.js] [ERROR]: Duplicate plugin ID: pagination

@sebvdw This is an issue with the forceRender() method. If you’re using that in your implementation, then yes it be impacting you as well. I’m hoping to push a fix as soon as possible.

Any updates on this? Still a frequent error when using react at least.

How to fix it for React Js?

The fix should be in the grid itself. As workaround you can do the following on state changes, Example in svelte:

 beforeUpdate(async () => {
    if (grid) grid.instance.config.plugin.remove("pagination")
  }); 

Hi I fixed it in : src/config.ts Method: static fromPartialConfig(partialConfig: Partial): Partial

if (config.pagination) {
      // Pagination
      config.plugin.remove('pagination');
      config.plugin.add({
        id: 'pagination',
        position: PluginPosition.Footer,
        component: Pagination,
      });
    }
    // Additional plugins
    if (config.plugins) {
      config.plugins.forEach((p) => config.plugin.add(p));
      config.plugins.forEach((p) => {config.plugin.remove(p.id);config.plugin.add(p);});
    }

Hey bro @tsemachh , thanks, can you give me an idea in order to implement that solution using React along to Vite, Iwill appreciate !!

Hi I fixed it in : src/config.ts Method: static fromPartialConfig(partialConfig: Partial<Config>): Partial<Config>

if (config.pagination) {
      // Pagination
      config.plugin.remove('pagination');
      config.plugin.add({
        id: 'pagination',
        position: PluginPosition.Footer,
        component: Pagination,
      });
    }
    // Additional plugins
    if (config.plugins) {
      config.plugins.forEach((p) => config.plugin.add(p));
      config.plugins.forEach((p) => {config.plugin.remove(p.id);config.plugin.add(p);});
    }

I’m getting the same in Svelte using the gridjs-svelte package, but pretty sure it’d be related. My code is:

<Grid
    data={data.clients}
    ....
    search={true}
    sort={true}
    pagination={{ enabled: true, limit: 15 }}
/>

and I get the following error messages:

[Grid.js] [ERROR]: Duplicate plugin ID: search [Grid.js] [ERROR]: Duplicate plugin ID: pagination

If I remove the “search” and “pagination” lines from my grid the problem goes away.

Yep, perhaps it’s back. I’m facing this issue in Svelte, with my fairly simple code:

<Grid columns={data.columns} data={data.transactions} search/>

‘[Grid.js] [ERROR]: Duplicate plugin ID: pagination’ and ‘[Grid.js] [ERROR]: Duplicate plugin ID: search’ still not fix yet 😦 all those solutions doesn’t work when we use the Grid as components in React

Forme in React work this:

 Promise.resolve(grid.config.plugin.remove("pagination"))
  .then(() => {
    grid.updateConfig({
        search: true,
        pagination: true,
        columns:[...],
        data: [...],
      }) .forceRender();
});