Form layout
Compose generated fields, sections, content and actions.
Separate the field contract from its arrangement. A field describes values and validation; blocks place those fields alongside explanatory text and custom actions.
Use the root TableConfig.presentation option for a shared view/create/edit/bulk surface, with an optional mobile choice. The default is a right drawer on every viewport. See shared record presentation for configuration and migration.
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 { z } from "zod";
import type { FormConfig } from "@/components/ui/yayaw-table/components/forms/types";
export const productForm: FormConfig = {
id: "products",
title: "Edit product",
presentation: "drawer",
width: "38rem",
submitMode: "patch",
fields: [
{
name: "name",
label: "Name",
type: "text",
required: true,
bulkEdit: false,
schema: z.string().trim().min(1),
},
{
name: "price",
label: "Price",
type: "number",
min: 0,
schema: z.number().min(0),
},
{
name: "stock",
label: "Stock",
type: "number",
min: 0,
step: 1,
schema: z.number().int().min(0),
},
{
name: "status",
label: "Status",
type: "select",
options: [
{ value: "draft", label: "Draft" },
{ value: "active", label: "Active" },
{ value: "archived", label: "Archived" },
],
},
],
blocks: [
{
type: "content",
id: "help",
text: "Only changed fields are saved.",
tone: "info",
},
{ type: "field", name: "name" },
{
type: "section",
id: "inventory",
title: "Inventory",
columns: 2,
blocks: [
{ type: "field", name: "price" },
{ type: "field", name: "stock" },
],
},
{ type: "field", name: "status" },
],
};import { z } from "zod";
import type { FormConfig } from "@/components/ui/yayaw-table-vue/types";
export const productForm: FormConfig = {
id: "products",
title: "Edit product",
presentation: "drawer",
width: "38rem",
submitMode: "patch",
fields: [
{
name: "name",
label: "Name",
type: "text",
required: true,
bulkEdit: false,
schema: z.string().trim().min(1),
},
{
name: "price",
label: "Price",
type: "number",
min: 0,
schema: z.number().min(0),
},
{
name: "stock",
label: "Stock",
type: "number",
min: 0,
step: 1,
schema: z.number().int().min(0),
},
{
name: "status",
label: "Status",
type: "select",
options: [
{ value: "draft", label: "Draft" },
{ value: "active", label: "Active" },
{ value: "archived", label: "Archived" },
],
},
],
blocks: [
{
type: "content",
id: "help",
text: "Only changed fields are saved.",
tone: "info",
},
{ type: "field", name: "name" },
{
type: "section",
id: "inventory",
title: "Inventory",
columns: 2,
blocks: [
{ type: "field", name: "price" },
{ type: "field", name: "stock" },
],
},
{ type: "field", name: "status" },
],
};Sections or blocks
Use sections for simple groups with one, two or three columns. Use blocks when the form needs mixed content: field, section, content, actions and custom. A field referenced more than once is rendered once; fields omitted from the layout remain available at the end.
Custom controls
React renderers return React nodes. Vue renderers return VNodes and custom form blocks can use their form-{id} slot. Keep field values in the form runtime through setFieldValue; custom actions can validate before running, and receive an abort signal. Choose presentation: "modal" for wide comparisons or a drawer for contextual editing.