Plugin Overview

Understand ZenGrid's built-in plugins and extension points.

ZenGrid installs the core plugin set when you create a Grid instance. Most applications should use the public Grid instance APIs instead of calling plugin internals directly.

App-Level APIs

app-apis.ts
grid.sort.toggle(1);
grid.filter.set(2, 'contains', 'active');
grid.pagination.goTo(2);
grid.columns.autoFitAll();
grid.scroll.toCell(1000, 0);
grid.state.getSnapshot();
grid.export.csv();

Built-In Plugin Areas

  • Core data and store setup.
  • DOM and lifecycle mounting.
  • Rendering, scrolling, viewport, and resize behavior.
  • Sorting and filtering.
  • Selection and editing.
  • Column resize, drag, and state.
  • Header rendering and header interactions.
  • Pagination when pagination.enabled is set.
  • Undo/redo internals for edit history.
  • Filter UI when columns support filtering.
  • Infinite scroll when configured.
ℹ Info

The built-in plugins are installed for you. You only call grid.usePlugin() when you are adding a custom plugin.

Custom Plugins

Plugins implement GridPlugin and register store state, actions, effects, events, or API methods.

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


export function createLoggerPlugin(): GridPlugin {
  return {
    name: 'logger',
    phase: 300,
    setup(store, api) {
      store.effect('logger:rows', () => {
        console.log('rows.viewCount', store.get('rows.viewCount'));
      }, 'logger');


      api.register('logger', {
        logVisibleRows: () => console.log(store.get('rows.viewCount')),
      });


      return { teardown: [] };
    },
  };
}
use-plugin.ts
grid.usePlugin(createLoggerPlugin());


const logVisibleRows = grid.getGridApi().getMethod('logger', 'logVisibleRows');
logVisibleRows?.();

Public vs Advanced Surfaces

  • Use grid.sort, grid.filter, grid.columns, and the other namespaced instance APIs in normal app code.
  • Use grid.getGridApi() only for plugin authoring or advanced integrations.
  • Use grid.getPluginHost() only when you need to inspect installed plugins or manage extension behavior.
⚠ Warning

getGridApi() exposes the low-level plugin registry. Treat methods registered there as integration hooks and wrap them before making them part of your app architecture.

Next Steps