Table

Starlight slots and the RefineUI components behind them

Slot	Components	Status
Header	Command, Button	Override
Sidebar	Sidebar, Resizable	Override
Footer	Footer	Override
EditLink	—	Starlight

Import

import {
  Table,
  TableCaption,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
} from "@pelagornis/page/components";

Example

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/TableExample.tsx

import {
  Badge,
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@pelagornis/page/components";

const rows = [
  { slot: "Header", component: "Command, Button", status: "Override" },
  { slot: "Sidebar", component: "Sidebar, Resizable", status: "Override" },
  { slot: "Footer", component: "Footer", status: "Override" },
  { slot: "EditLink", component: "—", status: "Starlight" },
];

export default function TableDemo() {
  return (
    <Table>
      <TableCaption>Starlight slots and the RefineUI components behind them</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Slot</TableHead>
          <TableHead>Components</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.slot}>
            <TableCell>{row.slot}</TableCell>
            <TableCell>{row.component}</TableCell>
            <TableCell>
              <Badge variant={row.status === "Override" ? "success" : "neutral"}>{row.status}</Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Use in MDX

Table is composed from parts that share React state. Children written in MDX are rendered as separate islands, so the parts can’t reach each other. Put the composition in a .tsx file, like the example above, and import that file instead.

src/content/docs/example.mdx

---
title: Example
---

import TableExample from "../../components/TableExample";

<TableExample client:load />

client:load hydrates the island on page load. Use client:visible for content far down the page.

Use in Markdoc

Markdoc tags render Astro components, and this one needs client state. Wrap the example in an .astro file that hydrates it, then register that file as a tag.

src/components/markdoc/TableExample.astro

---
import TableExample from "../TableExample";
---

<TableExample client:load />

markdoc.config.mjs

import { component, defineMarkdocConfig } from "@astrojs/markdoc/config";
import starlightMarkdoc from "@astrojs/starlight-markdoc";
import pageMarkdoc from "@pelagornis/page/markdoc";

export default defineMarkdocConfig({
  extends: [starlightMarkdoc(), pageMarkdoc()],
  tags: {
    "table-example": {
      render: component("./src/components/markdoc/TableExample.astro"),
      selfClosing: true,
    },
  },
});

src/content/docs/example.mdoc

{% table-example /%}

Anatomy

Parts of the component and the data-refineui role each one renders.

Part	Role
root	table
row	table-row

Reference

• RefineUI · Table for design guidance and token detail.
• Use in MDX and Use in Markdoc for the general rules.