# Table

> The data table primitive: 14px rows with `border` dividers, 40px header cells in medium weight, `muted` at 50% on hover and selection.

## Facts

- **Product**: Max
- **Family**: Layout
- **Global**: `window.DigitalCrew.Table`
- **Source**: `max-agent: src/components/ui/table.tsx`
- **Import in the app**: `import { Table } from "@/components/ui/table";`
- **Live preview**: /design/components/table/preview.html
- **Page**: /design/components/table

## Guidelines

**Use it for** records people compare across columns: campaigns, prospects, deals. Right-align numbers with `tabular-nums`. Put status in a pill ([**CampaignStatusBadge**](/design/components/campaign-status-badge.md), [**StatusColors**](/design/components/status-colors.md)) and actions in a trailing [`DropdownMenu`](/design/components/dropdown-menu.md).

**What you provide**: `Table` › `TableHeader`/`TableBody`/`TableFooter` › `TableRow` › `TableHead`/`TableCell`, and an optional `TableCaption`. Max's data-table kit adds a toolbar (32px search and dashed faceted filters), sortable column headers, 32px pagination and a floating bulk-action bar above the mobile tab bar.

**Fill gaps where they are**: an empty cell offers its fix inline (an `Enrich` link) instead of a dash.

## API

```ts
declare function Table({ className, ...props }: React.ComponentProps<"table">): any;
declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): any;
declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): any;
declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): any;
declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): any;
declare function TableHead({ className, ...props }: React.ComponentProps<"th">): any;
declare function TableCell({ className, ...props }: React.ComponentProps<"td">): any;
declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): any;
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
var ROWS = [["Q4 fintech outreach", "active", 214, "38%", "6"], ["Series B founders", "paused", 96, "41%", "3"], ["Webinar follow-up", "completed", 402, "52%", "19"], ["Partner intro — DACH", "draft", 0, "—", "—"]];
function App() {
  return h(DC.Table, null,
    h(DC.TableCaption, null, "Campaigns this quarter"),
    h(DC.TableHeader, null, h(DC.TableRow, null,
      h(DC.TableHead, null, "Campaign"), h(DC.TableHead, null, "Status"),
      h(DC.TableHead, { className: "text-right" }, "Prospects"), h(DC.TableHead, { className: "text-right" }, "Open rate"), h(DC.TableHead, { className: "text-right" }, "Meetings"))),
    h(DC.TableBody, null, ROWS.map(function (r) {
      return h(DC.TableRow, { key: r[0] },
        h(DC.TableCell, { className: "font-medium" }, r[0]),
        h(DC.TableCell, null, h(DC.CampaignStatusBadge, { status: r[1] })),
        h(DC.TableCell, { className: "text-right tabular-nums" }, r[2]),
        h(DC.TableCell, { className: "text-right tabular-nums" }, r[3]),
        h(DC.TableCell, { className: "text-right tabular-nums" }, r[4]));
    })));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Layout

- [Accordion](/design/components/accordion.md): Stacked sections that expand one at a time (or several); height animates in 250ms on the smooth-out ease (`--acc-*`).
- [Card](/design/components/card.md): The raised surface for grouped content: `card` fill, `border`, `radius-xl` (14px), `shadow-sm`, 24px padding and gap.
- [Collapsible](/design/components/collapsible.md): Shows and hides one region under its trigger (Radix Collapsible); animates with the accordion tokens.
- [ContentSection](/design/components/content-section.md): The settings-page section: a title, a one-line description, a separator, then a scrolling body.
- [DataTableToolbar](/design/components/data-table-toolbar.md): The toolbar of Max's data-table kit (search, faceted filters, Reset and the View columns menu) and how the kit's pieces fit around a `Table`.
- [Main](/design/components/main.md): The page body of Max's app shell: a `<main>` with the standard page padding and, by default, a centred 7xl width.
- [PanelSplitter](/design/components/panel-splitter.md): The draggable seam between two side-by-side panels; every split view in Max uses it, so one gesture works everywhere.
- [ScrollArea](/design/components/scroll-area.md): A scroll container with thin themed scrollbars (10px track, `border`-coloured thumb) that appear on hover.
- [Separator](/design/components/separator.md): A 1px `border` hairline, horizontal or vertical (Radix Separator, decorative by default).