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

Describe the bug Since the latest update to 6.0.5 I get this error message:

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

To Reproduce Steps to reproduce the behavior:

Create a table with pagination.
render said Table
pdateConfig of said Table
forceRender of said Table

Expected behavior Render without error message.

Desktop (please complete the following information):

Laptop on Arch Linux
Chromium Version 109.0.5414.74
Firefox Developer Edition 110.0b
probably non-browser specific and non device specific

Additional context Aside of the Error Message - everything works fine, so it is not critical - but maybe also easy to fix, as it appearently just encounters the Plugin ID twice in this scenario. It's just ugly to have the application always logging this error on a rerender.^^

Jan 22 '23 08:01 JhonnyJason

Would this by any chance affect the plugins system? Specifically for using it within a column prop. Been wrestling with using a custom svelte component in a cell and I saw this issue today.

A link to the REPL that also seems to be broken. https://svelte.dev/repl/e3247cb80c344f95b1fdd2853006f159?version=3.55.1

Jan 23 '23 22:01 sebvdw

@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.

Jan 23 '23 22:01 afshinm

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);});
    }

Feb 15 '23 14:02 tsemachh

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 !!

Feb 20 '23 16:02 brian980414

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")
  });

Feb 21 '23 07:02 dvorac20

How to fix it for React Js?

Mar 30 '23 17:03 jonatanare

Hola, lo arreglé en: src/config.ts Método: estático desdePartialConfig ( parcialConfig: Parcial ): Parcial
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 hermano @tsemachh, gracias, ¿puedes darme una idea para implementar esa solución usando React junto a Vite, te lo agradeceré !!

Hola Lo arreglé en : src/config.ts Método: estático desde PartialConfig ( parcialConfig: Parcial ): Parcial

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);});
    }

Podrías dar una idea de como solucionarlo usando React JS con Next JS

Mar 30 '23 17:03 jonatanare

Forme in React work this:

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

May 16 '23 11:05 alailsonribeiro

'[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

Sep 16 '23 19:09 nflnsr

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/>

Sep 19 '23 12:09 safwansamsudeen

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.

Oct 13 '23 13:10 pajohns

Forme in React work this:

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

Where to put this code?