# Table: Sticky header

> `stickyHeader` keeps the header in view in a height-limited table, and adds a hairline under it once rows scroll beneath.

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

## Add this example

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

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

## Source

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

const events = Array.from({ length: 24 }, (_, index) => ({
  id: `evt_${(1024 + index).toString(16)}`,
  type: ["deploy", "rollback", "scale", "restart"][index % 4],
  minutes: index * 7 + 2,
}))

export function TableSticky() {
  return (
    <Table variant="surface" stickyHeader containerClassName="max-h-72">
      <TableHeader>
        <TableRow>
          <TableHead>Event</TableHead>
          <TableHead>Type</TableHead>
          <TableHead align="end">When</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {events.map((event) => (
          <TableRow key={event.id}>
            <TableCell>
              <span className="font-mono text-xs">{event.id}</span>
            </TableCell>
            <TableCell>{event.type}</TableCell>
            <TableCell align="end">{event.minutes} min ago</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. |
| `stickyHeader` | `boolean` | `false` | Keep the header in view. Give the container a max height through containerClassName. |
| `containerClassName` | `string` | – | Classes for the scroll container. |

### 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)
- [Compact](https://hextaui.com/docs/table/examples/sizes.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)
- [Right to left](https://hextaui.com/docs/table/examples/rtl.md)