## Installation [#installation]
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add @dotui/table
```
```bash
pnpm dlx shadcn@latest add @dotui/table
```
```bash
yarn dlx shadcn@latest add @dotui/table
```
```bash
bun x shadcn@latest add @dotui/table
```
## Usage [#usage]
Use tables to display data in rows and columns with support for selection, sorting, and more.
```tsx
import {
Table,
TableBody,
TableCell,
TableColumn,
TableContainer,
TableFooter,
TableHeader,
TableRow,
TableVirtualizer,
} from '@/components/ui/table'
```
```tsx
Name
Type
Date Modified
Games
File folder
6/7/2020
Total
1 item
```
Use `TableContainer` to control the scroll region.
```tsx
```
By default, `TableContainer` renders a plain `div` so the table uses native CSS auto layout. Set `resizable` to opt into React Aria's resizable table layout. In that mode, use `width`, `defaultWidth`, `minWidth`, and `maxWidth` on `TableColumn`.
```tsx
```
Use `TableVirtualizer` for large collections. It uses the table layout exported by this component so row, cell, and selection column alignment stays consistent. Row and header heights default to the active density.
```tsx
```
## Examples [#examples]
## API Reference [#api-reference]
### TableContainer [#tablecontainer]
### Table [#table]
### TableHeader [#tableheader]
### TableColumn [#tablecolumn]
### TableBody [#tablebody]
### TableFooter [#tablefooter]
### TableRow [#tablerow]
### TableCell [#tablecell]
### TableLoadMore [#tableloadmore]
### TableDropIndicator [#tabledropindicator]
### TableVirtualizer [#tablevirtualizer]