Editor Plugins Overview

BeautifulGrid’s official editor plugins connect input components from external UI libraries to the Grid editing lifecycle. Each integration renders popups through getPortalContainer(), saves selections through commit(changes[]), and handles cancellation and focus restoration consistently.

If text, basic Select, Date, and checkbox editors are enough, start with Built-in Editors and avoid adding another UI dependency. When internal design systems or custom asynchronous inputs are required, author custom plugins directly by following the Custom Plugin Guide.

Choose an integration

MUI and Mantine do not provide direct equivalents for Cascader and TreeSelect, so those editor families are intentionally outside their integration scope. Use the Ant Design or Shadcn UI integration, or follow the Custom Plugin Guide to author an application-specific plugin when needed.

Shared setup flow

1. Install BeautifulGrid, your UI library, and the corresponding official plugin.
2. Import the UI library and plugin styles once from the application entry point.
3. Create editor configurations with the required create...EditorPlugin() factories.
4. Assign each configuration to an editable: true column’s editor.

const statusEditor = createLibrarySelectEditorPlugin<Order, Order['status']>({
  id: 'order-status',
  ariaLabel: 'Select order status',
  options: statusOptions,
});

const columns: BGridColumn<Order>[] = [
  { key: 'status', label: 'Status', editable: true, editor: statusEditor },
];

Factory names and Provider and stylesheet requirements vary by library. Open the matching guide above for exact installation commands, Provider setup, a runnable editing example, and the supported editor scope.

Application-specific inputs: Custom Plugin Guide

Connect internal design system components, asynchronous remote autocompletes, or modal search dialogs with defineEditorPlugin().

import { defineEditorPlugin } from 'beautiful-grid/editors';
import type { BGridEditorPluginProps } from 'beautiful-grid';

function InHouseStatusEditor({
  value,
  column,
  commit,
  cancel,
  getPortalContainer,
}: BGridEditorPluginProps<Order>) {
  return (
    <MyDesignSystemSelect
      autoFocus
      defaultValue={value}
      portalContainer={getPortalContainer()}
      onChange={next => void commit([{ key: column.key, value: next }])}
      onKeyDown={e => {
        if (e.key === 'Escape') cancel();
      }}
    />
  );
}

export const inHouseStatusPlugin = defineEditorPlugin<Order>({
  id: 'inhouse-order-status',
  component: InHouseStatusEditor,
  getClipboardText: ({ value }) => String(value ?? ''),
  parseClipboardText: text => text.trim(),
});

Three Core Rules for Custom Plugins

• Always use getPortalContainer(): Render dropdowns and popups in the container returned by getPortalContainer() to synchronize with Grid virtual scrolling and click-outside listeners.
• Single terminal action: Call either commit() or cancel() exactly once, and guard against duplicate calls during unmount.
• Clipboard support: Provide getClipboardText and parseClipboardText to handle copying and multi-cell paste validation cleanly.

For a complete step-by-step walkthrough, debounce search examples, and multi-column atomic commits, see the Custom Plugin Guide.