Inline
Voorbeelden
Praktische voorbeelden voor detailpagina's en inline datatabellen.
Detailpagina voorbeeld
<InlineProvider permission={{ customer: ["update"] }}>
<InlineField>
<InlineFieldLabel>Naam</InlineFieldLabel>
<InlineStringInput
initialValue={customer.name}
variables={(value) => ({ id: customer.id, data: { name: value ?? undefined } })}
mutation={orpc.customers.update.mutationOptions()}
strategy={{ mode: "blur", validators: { onBlur: z.string().nullable() } }}
/>
<InlineFieldError />
</InlineField>
<InlineField>
<InlineFieldLabel>Notities</InlineFieldLabel>
<InlineEditor
initialValue={customer.notes ?? undefined}
variables={(value) => ({ id: customer.id, data: { notes: value ?? undefined } })}
mutation={orpc.customers.update.mutationOptions()}
strategy={{ mode: "change", delay: 700, validators: { onChange: z.any() } }}
>
<EditorMenuBubble />
<EditorContent />
</InlineEditor>
<InlineFieldError />
</InlineField>
</InlineProvider>Inline tabel voorbeeld
cell: ({ row }) => (
<InlineTableCell className="min-w-40">
<InlineDecimalInput
initialValue={row.original.price ?? undefined}
variables={(value) => ({ id: row.original.id, data: { price: value } })}
mutation={orpc.quotationItems.update.mutationOptions()}
strategy={{ mode: "blur", validators: { onBlur: z.string().nullable() } }}
variant="table"
permission={{ quotation: ["update"] }}
/>
<InlineTableCellError />
</InlineTableCell>
)