# Table

> A real table: the markup DataTable renders, and all a plain table of figures needs. On a phone it scrolls sideways inside its own box instead of squeezing its columns. With maxHeight it scrolls down there too, and the header stays in view. Numbers go on the right, in tabular figures. No state, so a server page can render it.

Section: Data. Docs: https://entrepta.vercel.app/docs/components/table

## Install

```bash
npx @entrepta/cli@latest add table
```

Files: `data/table.tsx`.
npm packages: `class-variance-authority`.

## Usage

```tsx
import {
  Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow,
} from "@/components/entrepta/table"

<Table>
  <TableCaption>September</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>item</TableHead>
      <TableHead align="end">amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>rent</TableCell>
      <TableCell align="end"><Amount value={-180000} /></TableCell>
    </TableRow>
  </TableBody>
</Table>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `maxHeight` | `number \| string` | - | Past it the table scrolls in its box, the header held at the top (Table) |
| `align` | `"start" \| "center" \| "end"` | "start" | end for numbers (TableHead, TableCell) |