## Overview [#overview]
The `Table` component provides styled native table primitives. The table itself stays transparent and structural, while headers, footers, selected rows, and pinned cells derive their surfaces and borders from the current surface context.
## Usage [#usage]
```tsx
import {
Table,
TableBody,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@tilt-legal/cubitt-components/table";
```
```tsx
Invoice
Status
Amount
INV001
Paid
$250.00
```
## Examples [#examples]
### Basic [#basic]
A simple table with a header, body, and footer.
```tsx
import {
Table,
TableBody,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@tilt-legal/cubitt-components/table";
export default function Component() {
return (
Invoice
Status
Method
Amount
INV001
Paid
Credit Card
$250.00
Total
$250.00
);
}
```
### Selected Rows [#selected-rows]
Use `data-state="selected"` on a row or cell when the row is selected.
```tsx
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@tilt-legal/cubitt-components/table";
export default function Component() {
return (
Matter
Owner
Status
Hale acquisition
Marcus Lee
Selected
);
}
```
### Pinned Column [#pinned-column]
Pinned cells use `data-pinned` and `data-last-col` so their background and separator border stay opaque while horizontally scrolling.
```tsx
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@tilt-legal/cubitt-components/table";
export default function Component() {
return (
Matter
Phase
Owner
Atlas Holding
Discovery
Damian Petrov
);
}
```
## API Reference [#api-reference]
### Components [#components]
| Component | Element | Description |
| -------------- | --------- | ------------------------------------------------------------------------ |
| `Table` | `table` | Wraps a native table in a horizontal overflow container. |
| `TableHeader` | `thead` | Header row group. |
| `TableBody` | `tbody` | Body row group with spacing from the header. |
| `TableFooter` | `tfoot` | Footer row group with a contextual surface and border. |
| `TableRow` | `tr` | Table row. Supports `data-state="selected"`. |
| `TableHead` | `th` | Header cell with contextual surface and border. |
| `TableCell` | `td` | Body or footer cell. Supports `data-state="selected"` and `data-pinned`. |
| `TableCaption` | `caption` | Caption text for the table. |