Examples
Editing
Cell editing examples in Vue
Editing
gp-grid supports inline cell editing with Excel-like fill handle.
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>