---
title: "Table"
description: "A styled wrapper around `<table>`. Compose the usual `<thead>` and `<tbody>` children inside it, and lead with a `<caption>` so the table has an accessible name."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/table"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/table.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Table

A styled wrapper around `<table>`. Compose the usual `<thead>` and `<tbody>` children inside it, and lead with a `<caption>` so the table has an accessible name.

```tsx
import { Table } from "@sanity/sanity-id/components/table"
```

## Props

Also accepts every prop of `ComponentProps<"table">`.

## Usage

### Table with row and column headers

```tsx
import { Table } from "@sanity/sanity-id/components/table"

export default () => {
	return (
		<Table>
			<thead>
				<tr>
					<th>Performance and scale</th>
					<th>Sanity</th>
					<th>Contentful</th>
					<th>Why it matters</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>API Rate limit scope</th>
					<td>Per IP address (each user/service gets full limits)</td>
					<td>Per space (entire organization shares one limit)</td>
					<td>100 editors? Still 10 req/s total. Migration script? Everyone stops work.</td>
				</tr>
				<tr>
					<th>Mutation rate limits</th>
					<td>25 req/s per IP</td>
					<td>7-10 req/s for entire space</td>
					<td>"Mission-critical systems competing with auxiliary systems" - actual user quote</td>
				</tr>
			</tbody>
		</Table>
	)
}
```

### Table with column headers

```tsx
import { Table } from "@sanity/sanity-id/components/table"

export default () => {
	return (
		<Table>
			<thead>
				<tr>
					<th>Performance and scale</th>
					<th>Sanity</th>
					<th>Contentful</th>
					<th>Why it matters</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>API Rate limit scope</td>
					<td>Per IP address (each user/service gets full limits)</td>
					<td>Per space (entire organization shares one limit)</td>
					<td>100 editors? Still 10 req/s total. Migration script? Everyone stops work.</td>
				</tr>
				<tr>
					<td>Mutation rate limits</td>
					<td>25 req/s per IP</td>
					<td>7-10 req/s for entire space</td>
					<td>"Mission-critical systems competing with auxiliary systems" - actual user quote</td>
				</tr>
			</tbody>
		</Table>
	)
}
```

### Table with no headers

```tsx
import { Table } from "@sanity/sanity-id/components/table"

export default () => {
	return (
		<Table>
			<tbody>
				<tr>
					<td>API Rate limit scope</td>
					<td>Per IP address (each user/service gets full limits)</td>
					<td>Per space (entire organization shares one limit)</td>
					<td>100 editors? Still 10 req/s total. Migration script? Everyone stops work.</td>
				</tr>
				<tr>
					<td>Mutation rate limits</td>
					<td>25 req/s per IP</td>
					<td>7-10 req/s for entire space</td>
					<td>"Mission-critical systems competing with auxiliary systems" - actual user quote</td>
				</tr>
			</tbody>
		</Table>
	)
}
```