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 Svelte component as an inline cell editor in Grid.

Usage​

registerInlineEditor?: (
  type: string,
  component: Component<{
    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 Svelte 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:

<script>
    import { Grid, registerInlineEditor } from "@svar-ui/svelte-grid";
    import ColorEditor from "../custom/ColorEditor.svelte";
    import { getData } from "../data";

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

    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 },
    ];
</script>

<Grid {data} {columns} />

Related articles: