Tulip Logo IconTulip
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

  • InlineField binnen 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.

On this page