# Table

A structured data display component with rows and columns.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import {
	Badge,
	Table,
	TableBody,
	TableCaption,
	TableCell,
	TableFooter,
	TableHead,
	TableHeader,
	TableRow,
} from "coss-svelte";

const projects = [
	{
		budget: "$12,500",
		dot: "bg-emerald-500",
		name: "Website Redesign",
		status: "Paid",
		team: "Frontend Team",
	},
	{
		budget: "$8,750",
		dot: "bg-muted-foreground/64",
		name: "Mobile App",
		status: "Unpaid",
		team: "Mobile Team",
	},
	{
		budget: "$5,200",
		dot: "bg-amber-500",
		name: "API Integration",
		status: "Pending",
		team: "Backend Team",
	},
	{
		budget: "$3,800",
		dot: "bg-emerald-500",
		name: "Database Migration",
		status: "Paid",
		team: "DevOps Team",
	},
	{
		budget: "$7,200",
		dot: "bg-emerald-500",
		name: "User Dashboard",
		status: "Paid",
		team: "UX Team",
	},
	{
		budget: "$2,100",
		dot: "bg-red-500",
		name: "Security Audit",
		status: "Failed",
		team: "Security Team",
	},
];
</script>

<Table>
	<TableCaption>A list of current projects.</TableCaption>
	<TableHeader>
		<TableRow>
			<TableHead>Project</TableHead>
			<TableHead>Status</TableHead>
			<TableHead>Team</TableHead>
			<TableHead class="text-right">Budget</TableHead>
		</TableRow>
	</TableHeader>
	<TableBody>
		{#each projects as project (project.name)}
			<TableRow>
				<TableCell class="font-medium">{project.name}</TableCell>
				<TableCell>
					<Badge variant="outline">
						<span aria-hidden="true" class={`size-1.5 rounded-full ${project.dot}`}></span>
						{project.status}
					</Badge>
				</TableCell>
				<TableCell>{project.team}</TableCell>
				<TableCell class="text-right">{project.budget}</TableCell>
			</TableRow>
		{/each}
	</TableBody>
	<TableFooter>
		<TableRow>
			<TableCell colspan={3}>Total Budget</TableCell>
			<TableCell class="text-right">$39,550</TableCell>
		</TableRow>
	</TableFooter>
</Table>

```

## Anatomy

- `Table`
- `TableBody`
- `TableCaption`
- `TableCell`
- `TableFooter`
- `TableHead`
- `TableHeader`
- `TableRow`

## API Reference

### Table

A structured data display component with rows and columns.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <div> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### TableBody

Groups the main rows or body content.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### TableCaption

Provides a caption for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### TableCell

Renders one cell within the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### TableFooter

Groups footer content and actions for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### TableHead

Renders a header cell for a table.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `scope` | `Scope` | `"col"` | Scope attribute forwarded to the table header cell. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <th> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### TableHeader

Groups heading content for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### TableRow

Renders one row inside the parent table.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | native |
| Category | Content & Display |
| Particles | 8 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/table.json` for the complete local file and dependency closure.
- Table is stable in the current source catalog.