# Table: Wrapping text

> Cells stay on one line by default, which suits data. `wrap` lets them wrap and aligns rows to the top, for prose like glossaries or API references. Pair it with `table-fixed` and column widths.

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

## Add this example

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

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

## Source

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

const terms = [
  {
    term: "Concentric radius",
    meaning:
      "An inner corner radius equal to the outer radius minus the gap between the two edges, so nested shapes look like they belong together.",
  },
  {
    term: "Hairline",
    meaning:
      "The thinnest line the screen can draw: 1px on standard displays and two thirds of a pixel on high-density ones.",
  },
]

export function TableWrap() {
  return (
    <Table variant="surface" wrap className="table-fixed">
      <TableHeader>
        <TableRow>
          <TableHead className="w-1/3">Term</TableHead>
          <TableHead>Meaning</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {terms.map((row) => (
          <TableRow key={row.term}>
            <TableHead scope="row">{row.term}</TableHead>
            <TableCell>
              <span className="text-muted-foreground">{row.meaning}</span>
            </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. |
| `wrap` | `boolean` | `false` | Let cell text wrap and align rows to the top. |

### 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. |

## More Table examples

- [Default](https://hextaui.com/docs/table/examples/plain.md)
- [Compact](https://hextaui.com/docs/table/examples/sizes.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)