# Table

Presentational table parts with selected rows and fluid hover.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





## Preview [#preview]

<ComponentPreview src="examples/components/table.tsx">
  <TableDemo />
</ComponentPreview>

## Installation [#installation]

<CodeBlockCommand __npm__="`npx shadcn@latest add ${SITE.URL}/r/table.json`" __pnpm__="`pnpm dlx shadcn@latest add ${SITE.URL}/r/table.json`" __yarn__="`yarn dlx shadcn@latest add ${SITE.URL}/r/table.json`" __bun__="`bunx shadcn@latest add ${SITE.URL}/r/table.json`" />

## Usage [#usage]

```tsx
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from "@/components/ui/table";

<Table>
  <TableCaption>Reading list</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Title</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow selected>
      <TableCell>Dune</TableCell>
    </TableRow>
  </TableBody>
</Table>;
```

## API Reference [#api-reference]

All parts accept their native table element props. Table `size`: default or compact, otherwise inherited. Row `selected` adds selection styling; `interactive` enables fluid hover. Put an accessible Button or link inside an interactive row. Table does not invent row keyboard semantics or manage sorting, filtering or pagination. Horizontal overflow remains scrollable.