How to change Grid.js state from the plugin?

Question

How can I change state of the Grid.js component from the plugin context?

I'm trying to implement a visual configurator for the pagination.limit prop (https://gridjs.io/docs/config/pagination):

import { BaseComponent, BaseProps, h, PluginPosition } from 'gridjs';

class LimitConfigurator extends BaseComponent {
    setLimit(limitNew) {
        // this.setState({ pagination: {limit: limitNew}});
        // this.config.pagination.limit = limitNew;
    }

    render() {
        const self = this;

        return h(
            'div',
            { class: 'limit-configurator' },
            [
                h('span', { onclick: function () { self.setLimit(10); } }, '10'),
                h('span', {}, '25'),
                h('span', {}, '50'),
            ]
        );
    }
}

It renders something like 10 | 25 | 50 under the grid's footer and dynamically sets new per-page number for the pagination.limit path in the original component. Registration code:

// somewhere in the Vue component (using gridjs-vue bridge)...

async mounted() {
    await elementReady('.grid-operator', { stopOnDomReady: false });

    const gridComponent = this.$refs.gridReference.$data.grid;

    gridComponent.plugin.add(
        {
            id: 'limitEditor',
            component: LimitConfigurator,
            position: PluginPosition.Footer,
        },
    );

    gridComponent.forceRender();
},

I see prop values in the this.config but don't know how to properly manipulate them from the plugin (currently learning preact + vue environment). Is there a "convenient" way to do it?

score 0 · Answer 1 · answered Nov 28 '22 at 18:43

I'm not sure if you've found a solution. But here is my take as I recently came across this and figured.

In a plugin which extends the base component, we have access to this.config. On this.config we have eventEmitter property. We can emit events and listen on the grid object which we originally created as gridjs has a global EventEmitter object.

Eg:

const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  sort: true,
  search: true,
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444'],
    ['Eoin', 'eo3n@yahoo.com',   '(05) 10 878 5554'],
    ['Nisen', 'nis900@gmail.com',   '313 333 1923']
  ]
});

grid.on('custom-event', data => console.log(data));

From your plugin method, you can just emit the 'custom-event' like this.config.eventEmitter.emit('custom-event', 'foobar')

How to change Grid.js state from the plugin?

1 Answers1