# Table: Compact

> `size="sm"` tightens row height and padding for dense data.

Example: https://hextaui.com/docs/table/examples/sizes
Component docs: https://hextaui.com/docs/table.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/table-sizes.json
```

This adds `components/examples/table/sizes.tsx` with the Table component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/table/sizes.tsx"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const rows = [
  { region: "us-east-1", latency: "42 ms", uptime: "99.99%" },
  { region: "eu-west-2", latency: "38 ms", uptime: "99.98%" },
  { region: "ap-south-1", latency: "71 ms", uptime: "99.95%" },
]

export function TableSizes() {
  return (
    <Table variant="surface" size="sm">
      <TableHeader>
        <TableRow>
          <TableHead>Region</TableHead>
          <TableHead align="end">Latency</TableHead>
          <TableHead align="end">Uptime</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.region}>
            <TableCell>
              <span className="font-mono text-xs">{row.region}</span>
            </TableCell>
            <TableCell align="end">{row.latency}</TableCell>
            <TableCell align="end">{row.uptime}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}
```

## Props in this example

### Table

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "surface"` | `"default"` | surface adds a rounded hairline frame and a muted header band. |
| `size` | `"sm" \| "default"` | `"default"` |  |

### TableHead

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "end"` | `"start"` | end also switches to tabular numbers so digits line up. |

### TableCell

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "end"` | `"start"` | end also switches to tabular numbers so digits line up. |

## More Table examples

- [Default](https://hextaui.com/docs/table/examples/plain.md)
- [Wrapping text](https://hextaui.com/docs/table/examples/wrap.md)
- [Wide tables](https://hextaui.com/docs/table/examples/scroll.md)
- [Pinned column](https://hextaui.com/docs/table/examples/pinned.md)
- [Sticky header](https://hextaui.com/docs/table/examples/sticky.md)
- [Right to left](https://hextaui.com/docs/table/examples/rtl.md)