Editing (Vue)

Enable inline cell editing and the fill handle in the Vue 3 grid with validators, custom editors, keyboard shortcuts, and clipboard-style range fill flows.

gp-grid supports inline cell editing with Excel-like fill handle.

Interactive Demo

Enable Editing

Set editable: true on column definitions:

<script setup lang="ts">
const columns: ColumnDefinition[] = [
  { field: "id", cellDataType: "number", width: 80 },
  {
    field: "name",
    cellDataType: "text",
    width: 150,
    editable: true,
  },
];
</script>

Start Editing

Action	Description
Double-click	Open editor with current value
`Enter`	Open editor with current value
`F2`	Open editor with current value
Start typing	Open editor with typed character

Commit or Cancel

Action	Description
`Enter`	Commit changes and move down
`Tab`	Commit changes and move right
`Escape`	Cancel changes
Click outside	Commit changes

Fill Handle

The fill handle appears at the bottom-right corner of selected cells. Drag it to fill values.

Custom Edit Renderers

<script setup lang="ts">
import { Grid, type EditRendererParams } from "@gp-grid/vue";
import { h } from "vue";

const DepartmentEditor = (params: EditRendererParams) => {
  return h("select", {
    value: params.value,
    autofocus: true,
    onChange: (e: Event) => {
      params.onValueChange((e.target as HTMLSelectElement).value);
      params.onCommit();
    },
    onKeydown: (e: KeyboardEvent) => {
      if (e.key === "Escape") params.onCancel();
    },
  }, [
    h("option", { value: "Engineering" }, "Engineering"),
    h("option", { value: "Marketing" }, "Marketing"),
    h("option", { value: "Sales" }, "Sales"),
  ]);
};
</script>

<template>
  <Grid
    :columns="columns"
    :row-data="data"
    :row-height="36"
    :edit-renderers="{ department: DepartmentEditor }"
  />
</template>