Skip to main content

registerInlineEditor

Description​

A function that registers a custom inline editor component for use in Grid cells

The function allows you to register a fully custom React component as an inline cell editor in Grid.

Usage​

registerInlineEditor?: (
  type: string,
  component: ComponentType<{
    editor: {
      id: string | number;
      column: string | number;
      value?: any;
      renderedValue?: any;
      config?: { [key: string]: any };
      options?: { id: string | number; label: string }[];
    };
    onSave?: (ignoreFocus: boolean) => void;
    onCancel?: () => void;
    onApply?: (value: any) => void;
    onAction?: (ev: { action: string; data?: { [key: string]: any } }) => void;
  }>
) => void;

Parameters​

The function takes two parameters:

  • type - (required) a string identifier for the custom editor (e.g., "color")
  • component - (required) a React component that will be rendered inside the grid cell when editing. The registered component receives the following props from Grid:
    • editor - an object with the following properties:
      • column - (required) column id
      • id - (required) row id
      • value - (optional) current cell value
      • renderedValue - (optional) visible cell value (may coincide with value)
      • config - (optional) custom editor configuration object
      • options - (optional) list of selectable options, each with id and label
    • onApply - (optional) applies the value to editor cell
    • onSave - (optional) closes the editor and saves the current value; by default focus returns to the cell after save (false); pass true to ignore focus
    • onCancel - (optional) closes editor while ignoring the update
    • onAction - (optional) calls built-in or custom action on EventBus

Example​

The example shows how to register the editor and use it in Grid:

import { Grid, registerInlineEditor } from "@svar-ui/react-grid";
import ColorEditor from "../custom/ColorEditor.jsx";
import { getData } from "../data";

// Register the custom editor under the "color" type
registerInlineEditor("color", ColorEditor);

function App() {
    const { data } = getData();
    const columns = [
        { id: "id", width: 50 },
        { id: "name", header: "Name", editor: "text", width: 160 },
        // Reference the registered editor by its type name
        { id: "color", header: "Color", editor: "color", width: 120 },
    ];

    return <Grid data={data} columns={columns} />;
}

export default App;

Related articles: