Stock editor
Validate cell edits and recalculate stock totals.
What you will build
Edit stock directly, reject invalid quantities and keep totals consistent after a write.
Start with the React setup or Vue setup. Use the complete files below with the shared recipe modules. The browser-memory store resets on reload; an API integration must preserve the same contracts.
Required files: shared/products.ts, shared/store.ts, product-config.ts, list-records.ts, view-actions.ts, editable-actions.ts, product-form.ts, get-form-config.ts, stock-config.ts, recipe-stock.
Copy the shared mutation store and adapter, plus the product form catalog. The stock column uses that field schema and the same update action as a full form.
stock-config.ts
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",
},
});Entry component
Sample data. Changes stay in this preview.
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { NuqsAdapter } from "nuqs/adapters/react";
import { useState } from "react";
import { Toaster } from "sonner";
import { DataTable } from "@/components/ui/yayaw-table";
import { productStore } from "../shared/store";
import { editableActions } from "./editable-actions";
import { getFormConfig } from "./get-form-config";
import type { ExamplePresentation } from "./presentation";
import { stockConfig } from "./stock-config";
const getConfig = () => stockConfig;
export default function StockRecipe(presentation: ExamplePresentation = {}) {
const [queryClient] = useState(() => new QueryClient());
const [getStockActions] = useState(() => {
const actions = {
...editableActions,
update: async (id: string, patch: Record<string, unknown>) => {
const result = productStore.update(id, patch);
if (result.success) {
// The copied React registry caches footer totals separately from row data.
await queryClient.invalidateQueries({
queryKey: ["tableColumnCalculations", "recipe-stock"],
});
}
return result;
},
};
return (tableType: string) =>
tableType === "products" ? actions : undefined;
});
return (
<QueryClientProvider client={queryClient}>
<NuqsAdapter>
<DataTable
{...presentation}
getFormConfig={getFormConfig}
getRowId={(row) => String(row.id)}
getTableActions={getStockActions}
getTableConfig={getConfig}
tableId="recipe-stock"
tableType="products"
title={presentation.title ?? "Stock"}
/>
<Toaster />
</NuqsAdapter>
</QueryClientProvider>
);
}Sample data. Changes stay in this preview.
<script setup lang="ts">
import type { ExamplePresentation } from "./presentation";
defineProps<ExamplePresentation>();
import { YayawDataTable } from "@/components/ui/yayaw-table-vue";
import { getEditableActions } from "./editable-actions";
import { getFormConfig } from "./get-form-config";
import { stockConfig } from "./stock-config";
const getRowId = (row: Record<string, unknown>) => String(row.id);
</script>
<template>
<YayawDataTable v-bind="$props" table-type="products" table-id="recipe-stock" :title="title ?? 'Stock'"
:config="stockConfig" :get-table-actions="getEditableActions" :get-row-id="getRowId"
:get-form-config="getFormConfig" />
</template>Verify the result
The initial stock total is 18.
Edit Oak desk stock from 12 to 15 and commit: the total becomes 21.
Try -1 or 1.5: validation refuses the value.
Filter Status to Draft: the stock total is zero.
Clear filters and confirm the successful edit is still present.
Use the existing playground to explore the library’s controls.
The React recipe invalidates the footer calculation cache after a successful update. In the verified registry, this cache uses ["tableColumnCalculations", tableId] separately from row data. Keep that refresh when adapting the recipe to a server action; a failed validation leaves the existing total unchanged.
Walk through the result
| Action | Expected result |
|---|---|
| Open the stock table. | Stock totals 18: 12 + 0 + 6. |
Replace Oak desk stock with 15. | The record is saved and the total becomes 21. |
Try -1 or 1.5. | Validation rejects the write and the last saved value stays intact. |
Set Desk lamp stock to 0. | Zero remains a valid number; it is not treated as an empty field. |
On mobile, use View settings for presentation, the Data menu for export, and the search button in the toolbar. Resetting a view does not undo writes. Try the keyboard as well as pointer input.