mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
Pasquale Vitiello
f4ef088cae
* table wip * build reg * mc * build reg * wip * build reg * mc * mc * mc * mc * col sizing improvements * make the entire row clickable * mc * improvements * update card * improve table support * improve filtering system * mc * add calendar filter * mc * mc * fix ts errors * mc * split chip components * more splitting * mc * mc * mc * mc * rename table variant to card * color-mix hover/footer * update docs * fix * mc * improve table footer padding * restore popover * checkbox improvements * mc * fix input group * fix registry * mc * build registry
225 lines
4.7 KiB
Plaintext
225 lines
4.7 KiB
Plaintext
---
|
|
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`)
|