Inline
Inline tabellen
Best practices voor inline editing in data tabellen.
Gebruik in inline tabellen altijd het table-specifieke patroon:
{
accessorKey: "articleNumber",
header: ({ column }) => <TableColumnHeader column={column} title="Artikel" />,
cell: ({ row }) => (
<InlineTableCell className="min-w-40">
<InlineStringInput
initialValue={row.original.articleNumber ?? undefined}
variables={(value) => ({
id: row.original.id,
data: { articleNumber: value as string },
})}
mutation={orpc.quotationItems.update.mutationOptions()}
strategy={{ mode: "blur", validators: { onBlur: z.string().nullable() } }}
permission={{ quotation: ["update"] }}
variant="table"
/>
<InlineTableCellError />
</InlineTableCell>
),
}Waarom dit patroon?
- Geen block-level error onder de input (geen rijhoogte jumps)
- Error feedback blijft beschikbaar als overlay
- Consistente styling voor alle editable cells
Wat niet doen
InlineFieldbinnen tabelcellen gebruiken- Error tekst inline onder de cell tonen
- Validators typen die niet passen bij het inputtype
Read-only cell
Read-only kolommen kunnen op bestaande TableInlineCell + InlineDataTableReadOnly blijven.