> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Table />

> A component for displaying tabular data.

<img className="dark:hidden" width="720" height="440" noZoom src="https://mintcdn.com/attio/MtV7U9CRhT0ouJbz/images/table.png?fit=max&auto=format&n=MtV7U9CRhT0ouJbz&q=85&s=a40ed4dca9dce70dd2a94e6ed2b4443a" data-path="images/table.png" />

<img className="hidden dark:block" width="720" height="440" noZoom src="https://mintcdn.com/attio/MtV7U9CRhT0ouJbz/images/table-dark.png?fit=max&auto=format&n=MtV7U9CRhT0ouJbz&q=85&s=5f51af0128bf5f3a29d35d7e27439c77" data-path="images/table-dark.png" />

```js theme={"system"}
import {Table} from "attio/client"
```

The Table component provides a structured way to display data in rows and columns. It supports headers with optional icons, and cells can contain text, links, badges, or avatars.

## Example

```tsx TypeScript theme={"system"}
import {Table, Link} from "attio/client"

export function MyDialog() {
  return (
    <Table label="Team Members">
      <Table.Header>
        <Table.HeaderCell icon="user">Name</Table.HeaderCell>
        <Table.HeaderCell icon="image">Avatar</Table.HeaderCell>
        <Table.HeaderCell icon="envelope">Portfolio</Table.HeaderCell>
        <Table.HeaderCell>Role</Table.HeaderCell>
        <Table.HeaderCell>Status</Table.HeaderCell>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>John Doe</Table.Cell>
          <Table.Cell>
            <Table.Cell.Avatar name="John Doe" src="https://example.com/avatar.jpg" />
          </Table.Cell>
          <Table.Cell>
            <Link href="https://example.com">John's Portfolio</Link>
          </Table.Cell>
          <Table.Cell>
            <Table.Cell.Badge color="blue">Admin</Table.Cell.Badge>
          </Table.Cell>
          <Table.Cell>
            <Table.Cell.Badge color="green">Active</Table.Cell.Badge>
          </Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Jane Smith</Table.Cell>
          <Table.Cell>
            <Table.Cell.Avatar name="Jane Smith" src={null} />
          </Table.Cell>
          <Table.Cell>
            <Link href="https://example.com/jane">Jane's Portfolio</Link>
          </Table.Cell>
          <Table.Cell>
            <Table.Cell.Badge color="purple">Developer</Table.Cell.Badge>
          </Table.Cell>
          <Table.Cell>
            <Table.Cell.Badge color="green">Active</Table.Cell.Badge>
          </Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}
```

## Props

<ParamField path="label" type="string">
  An optional label to display above the table.
</ParamField>

<ParamField path="children" type="React.ReactNode" required>
  The table structure. Must contain exactly one `<Table.Header />` and one `<Table.Body />`.

  <Tip>
    A `<Table />` component must have exactly one `<Table.Header />` followed by exactly one `<Table.Body />` as children.
  </Tip>
</ParamField>

# `<Table.Header />`

The header row of the table. Contains the column headers.

## Props

<ParamField path="children" type="React.ReactNode" required>
  The header cells to display.

  <Tip>
    A `<Table.Header />` component can *only* have `<Table.HeaderCell />`s as children.
  </Tip>
</ParamField>

# `<Table.HeaderCell />`

A single header cell in the table header.

## Props

<ParamField path="icon" type="Icon">
  An optional [Attio Icon](../icons) to display next to the header text.
</ParamField>

<ParamField path="children" type="string" required>
  The text content of the header cell.
</ParamField>

# `<Table.Body />`

The body of the table containing all data rows.

## Props

<ParamField path="children" type="React.ReactNode" required>
  The table rows.

  <Tip>
    A `<Table.Body />` component can *only* have `<Table.Row />`s as children.
  </Tip>
</ParamField>

# `<Table.Row />`

A single data row in the table body.

## Props

<ParamField path="children" type="React.ReactNode" required>
  The table cells for this row.

  <Tip>
    Each `<Table.Row />` must contain the same number of `<Table.Cell />` components as there are `<Table.HeaderCell />` components in the header.
  </Tip>
</ParamField>

# `<Table.Cell />`

A single data cell in a table row. Can contain text, links, badges, or avatars.

## Props

<ParamField path="children" type="React.ReactNode" required>
  The content of the table cell. Can be: - Plain text - Text with [`<Link />`](./link) components - One or more `<Table.Cell.Badge />` components (if using
  badges, the cell must *only* contain badges) - One or more `<Table.Cell.Avatar />`
  components (if using avatars, the cell must *only* contain avatars)
</ParamField>

# `<Table.Cell.Badge />`

A badge component for use inside a table cell. Useful for displaying status indicators or categories.

## Props

<ParamField path="children" type="string" required>
  The text content of the badge. Only text children are allowed.
</ParamField>

<ParamField path="color" type="'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'lavender' | 'lime' | 'orange' | 'pink' | 'purple' | 'red' | 'yellow'" required>
  The color of the badge.
</ParamField>

# `<Table.Cell.Avatar />`

An avatar component for use inside a table cell. Useful for displaying profile pictures or organization logos.

## Props

<ParamField path="name" type="string" required>
  The name of the person or entity represented by the avatar. This is used for accessibility and as
  a fallback when no image is provided.
</ParamField>

<ParamField path="src" type="string | null | undefined" required>
  The URL of the avatar image. If `null` or `undefined`, a fallback representation based on the name
  will be displayed.
</ParamField>