---
title: Table
description: A simple table component for displaying tabular data.
---

<ComponentPreview name="p-table-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/table
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="table" title="components/ui/table.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

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

```tsx
<Table>
  <TableCaption>Caption</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Header</TableHead>
      <TableHead>Header</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Cell</TableCell>
      <TableCell>Cell</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

## API Reference

### Table

The main table container component. Set `variant="card"` for a card-style table: separated borders, rounded corners, and row surfaces that read as cards. That pairs well with a [Frame](/ui/docs/components/frame) (page chrome) or [CardFrame](/ui/docs/components/card) (card shell with optional header actions). The default variant is a simpler row layout with standard borders.

| Prop        | Type                         | Default     |
| ----------- | ---------------------------- | ----------- |
| `className` | `string`                     |             |
| `variant`   | `"default"` \| `"card"`      | `"default"` |

```tsx
<Table>
  <TableHeader>...</TableHeader>
  <TableBody>...</TableBody>
</Table>
```

```tsx
<Table variant="card">
  <TableHeader>...</TableHeader>
  <TableBody>...</TableBody>
</Table>
```

### TableHeader

Header section of the table containing column headers.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<TableHeader>
  <TableRow>
    <TableHead>Header</TableHead>
  </TableRow>
</TableHeader>
```

### TableBody

Body section of the table containing table rows and data.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<TableBody>
  <TableRow>
    <TableCell>Cell</TableCell>
  </TableRow>
</TableBody>
```

### TableFooter

Footer section of the table.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<TableFooter>
  <TableRow>
    <TableCell>Footer</TableCell>
  </TableRow>
</TableFooter>
```

### TableRow

A row in the table.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<TableRow>
  <TableCell>Cell</TableCell>
</TableRow>
```

### TableHead

A header cell in the table.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<TableHead>Header</TableHead>
```

### TableCell

A data cell in the table.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<TableCell>Cell</TableCell>
```

### TableCaption

A caption for the table.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<TableCaption>Caption</TableCaption>
```

## Examples

### Card-style table

Use `variant="card"` when the grid itself should look like a set of cards (for example dashboards or standalone tables without an outer frame).

<ComponentPreview name="p-table-5" />

### Table in CardFrame

Put the table in [CardFrame](/ui/docs/components/card) so the grid sits inside the card shell (border, radius, clipping). Use `variant="card"` on `Table`. The example below is static markup—no row selection or TanStack.

<ComponentPreview name="p-table-7" />

### Table in Frame

Wrap the table in a [Frame](/ui/docs/components/frame) for bordered app-surface framing. Use `variant="card"` on `Table` so rows keep the card-style treatment inside the frame.

<ComponentPreview name="p-table-2" />

### Data table with TanStack

Use [TanStack Table](https://tanstack.com/table) with `variant="card"` when you need column definitions, row selection, and `flexRender` over the same table primitives. Add `@tanstack/react-table` to your project for headless state (sorting, pagination, selection) beyond static markup.

<ComponentPreview name="p-table-6" />

## Changelog

- [Apr 12, 2026](/ui/docs/changelog#table) — `Table` adds optional `variant` (`default` or `card`)