Inline editing
Edit a typed cell with validation and a real update action.
Inline editing is a focused alternative to opening a form for every small change. Enable it for fields that have a clear editor and a safe patch contract.
Configuration example
Start from the React quick start or Vue quick start. The following file extends their product catalog. Pass this configuration through getTableConfig in React or config in Vue.
import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";
export const stockConfig = defineTableConfig({
...productConfig,
columns: {
...productConfig.columns,
definitions: productConfig.columns.definitions.map((column) =>
column.id === "stock"
? {
...column,
inlineEdit: { enabled: true, editor: "number" },
defaultCalculation: "sum",
}
: column
),
},
table: {
...productConfig.table,
allowInlineEdit: true,
allowEdit: true,
enableCalculations: true,
inlineEdit: { enabled: true, debounceMs: 400, optimistic: true },
rowClickMode: "none",
},
});import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";
export const stockConfig = defineTableConfig({
...productConfig,
columns: {
...productConfig.columns,
definitions: productConfig.columns.definitions.map((column) =>
column.id === "stock"
? {
...column,
inlineEdit: { enabled: true, editor: "number" },
defaultCalculation: "sum",
}
: column
),
},
table: {
...productConfig.table,
allowInlineEdit: true,
allowEdit: true,
enableCalculations: true,
inlineEdit: { enabled: true, debounceMs: 400, optimistic: true },
rowClickMode: "none",
},
});Wire validation and persistence
Supply getFormConfig with the field schema and getTableActions with update. A stock field should reject negative numbers and fractions both in the form and at the write boundary. fieldErrors maps server validation messages to field names. The stock recipe includes the complete adapter and schema.
Editor behavior
Double-click or Enter starts the supported cell editing flow. editor can explicitly choose text, number, select, multiSelect, boolean, date, JSON or URL behavior. formField maps a displayed column to a differently named form field. Read-only columns remain protected even when table-wide editing is enabled.
Avoid conflicting row gestures
Keep row-click editing off when a click is used for cell editing or a row link. Optimistic updates are provisional until the action succeeds. Test a rejected save and ensure the displayed value and cache return to the last confirmed state.
Enable one editable column
Expose an inline number editor for Price. Reuse productForm and editableActions so zero is accepted and negative prices are rejected by the schema and store.
Copy this complete configuration beside product-config.ts. Use () => exampleConfig as React’s getTableConfig, or :config="exampleConfig" in Vue.
Sample data. Changes stay in this preview.
import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
columns: {
...productConfig.columns,
definitions: productConfig.columns.definitions.map((column) =>
column.id === "price"
? { ...column, inlineEdit: { enabled: true, editor: "number" } }
: column
),
},
table: {
...productConfig.table,
allowEdit: true,
allowInlineEdit: true,
rowClickMode: "none",
},
});Sample data. Changes stay in this preview.
import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
columns: {
...productConfig.columns,
definitions: productConfig.columns.definitions.map((column) =>
column.id === "price"
? { ...column, inlineEdit: { enabled: true, editor: "number" } }
: column
),
},
table: {
...productConfig.table,
allowEdit: true,
allowInlineEdit: true,
rowClickMode: "none",
},
});Protect archived records
Use the row predicate for the interface and repeat authorization in the mutation handler. A hidden editor is not server authorization.
Copy this complete configuration beside product-config.ts. Use () => exampleConfig as React’s getTableConfig, or :config="exampleConfig" in Vue.
Sample data. Changes stay in this preview.
import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
columns: {
...productConfig.columns,
definitions: productConfig.columns.definitions.map((column) => ({
...column,
inlineEdit: column.id === "stock",
})),
},
table: {
...productConfig.table,
allowEdit: true,
allowInlineEdit: true,
canEditRow: (row) => row.status !== "archived",
rowClickMode: "none",
},
});Sample data. Changes stay in this preview.
import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
columns: {
...productConfig.columns,
definitions: productConfig.columns.definitions.map((column) => ({
...column,
inlineEdit: column.id === "stock",
})),
},
table: {
...productConfig.table,
allowEdit: true,
allowInlineEdit: true,
canEditRow: (row) => row.status !== "archived",
rowClickMode: "none",
},
});