# Table

Table is a neobrutalist React component from Cruise UI. A fully bordered table with a --primary header row and zebra rows.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/table
```

Import: `import { CruiseTable } from "@/components/cruise/table";`

## When to use

Comparing rows of the same kind of data: orders, routes, invoices.

## When not to

Layout. A single record (use a Card).

## Example (React)

```tsx
import type { ReactNode } from "react";
import { CruiseBadge } from "@/components/cruise/badge";
import { CruiseTable, type CruiseColumn } from "@/components/cruise/table";

type Row = { route: string; fare: string; status: ReactNode };

const columns: CruiseColumn<Row>[] = [
  { key: "route", header: "Route" },
  { key: "fare", header: "Fare", numeric: true },
  { key: "status", header: "Status" },
];

const rows: Row[] = [
  { route: "Oshodi – CMS", fare: "₦800", status: <CruiseBadge tone="success">Paid</CruiseBadge> },
  { route: "Ikeja – Yaba", fare: "₦600", status: <CruiseBadge tone="muted">Pending</CruiseBadge> },
  { route: "Ojota – Obalende", fare: "₦1,000", status: <CruiseBadge tone="danger">Overdue</CruiseBadge> },
];

export default function TableExample() {
  return <CruiseTable columns={columns} rows={rows} rowKey={(row) => row.route} />;
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<div class="brutal" style="overflow-x: auto">
  <table style="width: 100%; border-collapse: collapse">
    <thead class="on-primary"><tr><th style="border: 2px solid var(--ink); padding: 8px 12px; text-align: left">Route</th><th style="border: 2px solid var(--ink); padding: 8px 12px; text-align: right">Fare</th></tr></thead>
    <tbody><tr><td style="border: 2px solid var(--ink); padding: 8px 12px">Oshodi – CMS</td><td style="border: 2px solid var(--ink); padding: 8px 12px; text-align: right">₦800</td></tr></tbody>
  </table>
</div>
```

## Props: CruiseTable

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `columns` | `CruiseColumn<Row>[]` | — | — |
| `rows` | `Row[]` | — | — |
| `rowKey` | `(row: Row) => string` | — | Stable React key per row. |
| `caption?` | `ReactNode` | — | — |
| `className?` | `string` | — | — |

## Accessibility

- A real <table> with <th> headers; numbers are right-aligned.
- Scrolls sideways inside its box on small screens.