Creating Plugins

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

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

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

import { Grid } from '@zengrid/core';
import { createRowCountPlugin } from './row-count-plugin';

const grid = new Grid(document.getElementById('grid')!, {
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  columns,
});

grid.usePlugin(createRowCountPlugin());

const log = grid.getGridApi().getMethod('rowCountLogger', 'log');
log?.();

export function createHighlightPlugin(): GridPlugin {
  return {
    name: 'highlighter',
    phase: 300,
    setup(store, api) {
      store.extend('highlighter.rows', [], 'highlighter');
      store.action('highlighter:addRow', (row: number) => {
        const rows = store.get('highlighter.rows') as number[];
        store.set('highlighter.rows', [...rows, row]);
      }, 'highlighter');

      api.register('highlighter', {
        addRow: (row: number) => {
          store.exec('highlighter:addRow', row);
          api.fireEvent('highlighter:change', {
            rows: store.get('highlighter.rows'),
          });
        },
        getRows: () => store.get('highlighter.rows'),
      });

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

const api = grid.getGridApi();
api.getMethod('highlighter', 'addRow')?.(5);
console.log(api.getMethod('highlighter', 'getRows')?.());