Svelte Data Grid Editor

RevoGrid provides a way to render native components as editor.

TIP

You can access close and save callbacks in properties. Check editor and EditorCtr type for more.

Use Editor(Component) from @revolist/svelte-datagrid to register a Svelte component as a custom editor.

Basic Setup

<script lang="ts">
  import {
    Editor,
    RevoGrid,
    Template,
    type ColumnRegular,
    type Editors,
    type EditorType,
  } from '@revolist/svelte-datagrid';
  import OperationCell from './svelte.cell.template.svelte';
  import OperationEditor from './svelte.editor.template.svelte';

  const OPERATION_EDITOR = 'operation';

  const source = [
    { name: 'Order 1', operation: 'Review' },
    { name: 'Order 2', operation: 'Archive' },
  ];

  const editors: Editors = {
    [OPERATION_EDITOR]: Editor(OperationEditor),
  };

  const columns: ColumnRegular[] = [
    { prop: 'name', name: 'Name' },
    {
      prop: 'operation',
      name: 'Operation',
      cellTemplate: Template(OperationCell),
      editor: OPERATION_EDITOR,
    },
  ];
</script>

<RevoGrid {source} {columns} {editors} />

Editor Component

<script lang="ts">
  import type { EditorType } from '@revolist/svelte-datagrid';

  let { val, value, save, close }: EditorType = $props();
  let currentValue = $state('');

  $effect(() => {
    currentValue = String(val ?? value ?? '');
  });

  export function getValue() {
    return currentValue;
  }
</script>

<input bind:value={currentValue} aria-label="Operation value" />
<button type="button" onclick={() => save(currentValue)}>Save</button>
<button type="button" onclick={() => close()}>Close</button>

The editor component receives flat props from EditorType, including the current edit-cell data plus:

• column: the column data schema model.
• save(value, preventFocus?): saves the value and closes the editor.
• close(focusNext?): closes the editor without saving.

If the editor should participate in autosave-on-close, export getValue() from the Svelte component.

Why Use Custom Editors?

With native editor rendering, you can:

• Customize the Editing Experience: Use any React component as a custom editor, providing a tailored user interface for editing data directly in the grid.
• Build Complex Editors: Embed interactive elements such as date pickers, dropdowns, or custom forms inside cells, which would be impossible with simple input fields alone.
• Improve Usability: Create inline editors that match your application’s UI, improving consistency and enhancing the overall user experience.