ReferenceTable

A table for a reference: names in code, a type, a default, allowed values and a text, in a scrollable region.

Preview

Keys of the search group
Key	Type	Default	Allowed values	Description
`search.enabled`	boolean	true	true, false	Turn search on.
`site.url`	string (URL)	required	-	The origin of the site.

src/examples/reference-table/example.astro

---
import { ReferenceTable } from "@/presentation/components/site/reference-table";
---

<ReferenceTable
  label="Keys of the search group"
  rows={[
    {
      name: "search.enabled",
      type: "boolean",
      default: "true",
      allowed: "true, false",
      text: "Turn search on.",
    },
    {
      name: "site.url",
      type: "string (URL)",
      default: "required",
      text: "The origin of the site.",
    },
  ]}
/>

Add to your site

npx docs-sitekit add reference-table

It writes these files, and keeps a file you changed:

src/presentation/components/site/reference-table.tsx

It requires nothing else from the registry.

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of ReferenceTable
Key	Type	Default	Allowed values	Description
`label`	string	required	-	What the table lists, for example Keys of the search group. It names the scrollable region.
`rows`	readonly ReferenceRow[]	required	-	The rows, in the order shown.

Fields of ReferenceRow
Key	Type	Default	Allowed values	Description
`name`	string	required	-	The name, written in code: a config key, an option, a flag.
`type`	string	required	-	The type, as a short text.
`default`	string	-	-	The default, or a word such as required. Optional, a row without one shows a dash.
`allowed`	string	-	-	The values the name accepts. Optional, a row without them shows a dash.
`text`	string	required	-	What the name does.

Variants and states

A long name

A name stays on one line, so the table scrolls inside its region and the page does not.

A table with a long name
Key	Type	Default	Allowed values	Description
`search.averyveryveryveryverylongkeynamethatmustnotwidenthepage`	string	-	-	A long name stays on one line inside the scrolling region.

src/examples/reference-table/long-name.astro

---
import { ReferenceTable } from "@/presentation/components/site/reference-table";
---

<ReferenceTable
  label="A table with a long name"
  rows={[
    {
      name: "search.averyveryveryveryverylongkeynamethatmustnotwidenthepage",
      type: "string",
      text: "A long name stays on one line inside the scrolling region.",
    },
  ]}
/>

About

A table for a reference page written in Astro: a column of code names, a type, a default, the values a name accepts and a text. The configuration reference of this project is markdown, see Configuration reference, and a markdown table already scrolls and takes focus. Use the component where a page is .astro and the rows are data. The props tables of these pages are drawn with it.

The wrapper scrolls, not the page. The table is 40rem wide at least, so on a phone it scrolls sideways inside a region that has a border, and the page does not scroll with it.
Names stay on one line, so a long key scrolls instead of breaking in the middle. The description column wraps.
default and allowed are optional. A row without them shows a dash, never an empty cell.

Accessibility

The wrapper has role="region", an aria-label from label and tabindex="0" in the HTML, so Tab reaches it and the arrow keys scroll it, with no JavaScript. The focus ring is the one of the rest of the site.
It is a real table: it has a caption, scope="col" headers and the name of each row as its scope="row" header, so a screen reader says the name with each cell.
The text uses the fg, fg-muted and brand tokens, which reach AA in both themes, and it chooses no status color.

Source

reference-table.tsx

Edit this page

Last updated 5 November 2026