Plugin Architecture

Advanced guide to ZenGrid plugins, store actions, and API registry.

ZenGrid plugins are ordered extension modules. They receive a reactive store, a low-level API registry, and the current options context.

Plugin Shape

plugin.ts
import type { GridPlugin } from '@zengrid/core';


export const examplePlugin: GridPlugin = {
  name: 'example',
  phase: 300,
  dependencies: [],
  setup(store, api, context) {
    store.extend('example.enabled', true, 'example');


    store.action('example:toggle', () => {
      store.set('example.enabled', !store.get('example.enabled'));
    }, 'example');


    api.register('example', {
      toggle: () => store.exec('example:toggle'),
      isEnabled: () => store.get('example.enabled'),
      options: () => context.getOptions(),
    });


    return { teardown: [] };
  },
};

Install

install.ts
const grid = new Grid(container, {
  columns,
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
});


grid.usePlugin(examplePlugin);

Calling Plugin Methods

plugin-api.ts
const api = grid.getGridApi();
api.getMethod('example', 'toggle')?.();
console.log(api.getMethod('example', 'isEnabled')?.());

Built-In APIs From App Code

Normal application code should use the Grid instance namespaces.

public-apis.ts
grid.sort.toggle(1);
grid.filter.set(2, 'contains', 'active');
grid.columns.autoFitAll();
grid.scroll.toCell(1000, 0);

Events

plugin-events.ts
api.fireEvent('example:change', {
  enabled: store.get('example.enabled'),
});

Use documented grid events such as sort:change, filter:change, and selection:change when integrating with built-in behavior.

⚠ Warning

The plugin API is intentionally lower-level than the public Grid instance. Keep plugin methods wrapped and documented inside your own integration boundary.