# Table: Pinned column

> `pinned="start"` keeps the first column in view while the rest scrolls, and `pinnedEdge` shows a shadow once content slides under it.

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

## Add this example

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

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

## Source

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

const quarters = [
  "Q1 2025",
  "Q2 2025",
  "Q3 2025",
  "Q4 2025",
  "Q1 2026",
  "Q2 2026",
  "Q3 2026",
]

const teams = [
  { name: "Design systems", values: [12, 14, 15, 18, 21, 22, 24] },
  { name: "Platform", values: [31, 30, 33, 35, 34, 38, 40] },
  { name: "Growth", values: [8, 9, 11, 10, 12, 15, 16] },
]

export function TablePinned() {
  return (
    <Table variant="surface" className="w-max min-w-full">
      <TableHeader>
        <TableRow>
          <TableHead pinned="start" pinnedEdge>
            Team
          </TableHead>
          {quarters.map((quarter) => (
            <TableHead key={quarter} align="end">
              {quarter}
            </TableHead>
          ))}
        </TableRow>
      </TableHeader>
      <TableBody>
        {teams.map((team) => (
          <TableRow key={team.name}>
            <TableHead scope="row" pinned="start" pinnedEdge>
              {team.name}
            </TableHead>
            {team.values.map((value, index) => (
              <TableCell key={quarters[index]} align="end">
                {value}
              </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. |

### TableHead

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `scope` | `"col" \| "row"` | – | Use row for the cell that names a row. Inside the body it gets cell padding and foreground text. |
| `align` | `"start" \| "center" \| "end"` | `"start"` | end also switches to tabular numbers so digits line up. |
| `pinned` | `"start" \| "end"` | – | Keep the column in view while the table scrolls sideways. Set the same value on its header and every cell. |
| `pinnedEdge` | `boolean` | `false` | Draw a soft shadow on the inner edge of the last pinned column while content is hidden behind it. |

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