Editing Plugin

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

const columns: ColumnDef[] = [
  { field: 'name', header: 'Name', width: 220, editable: true, editor: 'text' },
  { field: 'age', header: 'Age', width: 100, editable: true, editor: 'number' },
  { field: 'active', header: 'Active', width: 100, editable: true, editor: 'checkbox' },
];

const columns: ColumnDef[] = [
  {
    field: 'role',
    header: 'Role',
    width: 150,
    editable: true,
    editor: 'select',
    editorOptions: {
      options: [
        { value: 'admin', label: 'Administrator' },
        { value: 'editor', label: 'Editor' },
        { value: 'viewer', label: 'Viewer' },
      ],
    },
  },
];

grid.on('edit:start', ({ cell, value }) => {
  console.log('start', cell, value);
});

grid.on('edit:commit', ({ cell, oldValue, newValue }) => {
  rows[cell.row][cell.col] = newValue;
  console.log('commit', oldValue, newValue);
});

grid.on('edit:cancel', ({ cell }) => {
  console.log('cancel', cell);
});