# Table: Right to left

> Alignment, pinned columns and scroll fades follow the reading direction.

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

## Add this example

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

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

## Source

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

const rows = [
  { name: "التصميم", members: 8, budget: "١٢٬٠٠٠" },
  { name: "الهندسة", members: 21, budget: "٤٨٬٥٠٠" },
]

export function TableRtl() {
  return (
    <div dir="rtl" className="w-full">
      <Table variant="surface">
        <TableHeader>
          <TableRow>
            <TableHead>الفريق</TableHead>
            <TableHead align="end">الأعضاء</TableHead>
            <TableHead align="end">الميزانية</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.name}>
              <TableHead scope="row">{row.name}</TableHead>
              <TableCell align="end">{row.members}</TableCell>
              <TableCell align="end">{row.budget}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
```

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

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