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

On this page