Records table

The records a domain needs, with the pending plan or the last observation on every row, one copy control per value, and a blocked record's reason beneath it.

records-table is the requirements, as a table. Every cell aligns middle, so the status column lines up with the type and the name rather than floating above them.

import { Domain } from "@domainkit/react";

import { ProviderRow } from "@/components/domainkit/provider-row";
import { RecordsTable } from "@/components/domainkit/records-table";

import {
  PreviewRoot,
  previewDomain,
  previewMarks,
  previewRequirements,
} from "../../lib/preview-flow.tsx";

function Table() {
  const flow = Domain.useFlow({ domain: previewDomain, requirements: previewRequirements });
  return <RecordsTable flow={flow} header={<ProviderRow flow={flow} marks={previewMarks} />} />;
}

export default function RecordsTableExample() {
  return (
    <PreviewRoot>
      <Table />
    </PreviewRoot>
  );
}

Installation

npx shadcn@latest add https://domain-kit.dev/r/records-table.json

pnpm dlx shadcn@latest add https://domain-kit.dev/r/records-table.json

yarn dlx shadcn@latest add https://domain-kit.dev/r/records-table.json

bunx shadcn@latest add https://domain-kit.dev/r/records-table.json

What a row says

While a plan is pending, the status column is what the plan will do: add it, leave it, or nothing while it is blocked. Once an apply has landed it is what the observers read back. Records.statusOf answers which of the two a row is on, so the table never decides.

A blocked record gets a second row under it naming what is in the way and what to do about it, both from the message catalog.

API

Boundary

The table renders what the plan and the observation already decided. Observing DNS, and deciding what readiness means for your product, both stay outside it.