<Table />

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, avatars, or buttons.

Example

TypeScript

import {Table, Link, Button} 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="Email">Portfolio</Table.HeaderCell>
        <Table.HeaderCell>Role</Table.HeaderCell>
        <Table.HeaderCell>Status</Table.HeaderCell>
        <Table.HeaderCell>Actions</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.Cell>
            <Button label="Remove" variant="destructive" onClick={() => {}} />
          </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.Cell>
            <Button label="Edit" onClick={() => {}} />
            <Button label="Remove" variant="destructive" onClick={() => {}} />
          </Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

Props

string

An optional label to display above the table.

React.ReactNode

required

The table structure. Must contain exactly one <Table.Header /> and one <Table.Body />.

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

`<Table.Header />`

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

Props

React.ReactNode

required

The header cells to display.

A <Table.Header /> component can only have <Table.HeaderCell />s as children.

`<Table.HeaderCell />`

A single header cell in the table header.

Props

Icon

An optional Attio Icon to display next to the header text.

string

required

The text content of the header cell.

`<Table.Body />`

The body of the table containing all data rows.

Props

React.ReactNode

required

The table rows.

A <Table.Body /> component can only have <Table.Row />s as children.

`<Table.Row />`

A single data row in the table body.

Props

React.ReactNode

required

The table cells for this row.

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

`<Table.Cell />`

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

Props

React.ReactNode

required

The content of the table cell. Can be:

Plain text, on its own or with <Link /> components
One or more <Table.Cell.Badge /> components
One or more <Table.Cell.Avatar /> components
One or more <Button /> components

Badges, avatars and buttons cannot be mixed with each other or with text. A cell that contains badges must contain only badges, and the same holds for avatars and for buttons.

Buttons in a cell

Put <Button /> components in a cell to give a row its own actions. One button renders inline. If the column is too narrow for the label, the label is truncated. Two or more buttons collapse into a menu on the cell, because a column is rarely wide enough for two labels. Picking an action from that menu calls the button’s onClick. variant and disabled work as they do elsewhere, and a "destructive" button reads as destructive both inline and in the menu. In a dialog, buttons in a cell stay in the cell. They are not moved to the dialog footer.

`<Table.Cell.Badge />`

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

Props

string

required

The text content of the badge. Only text children are allowed.

required

The color of the badge.

`<Table.Cell.Avatar />`

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

Props

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.

string | null | undefined

required

The URL of the avatar image. If null or undefined, a fallback representation based on the name will be displayed.

Introduction

Guides

Extensions

Pages

Workflow blocks

Notifications

Dialogs

Navigation

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Example

Props

`<Table.Header />`

Props

`<Table.HeaderCell />`

Props

`<Table.Body />`

Props

`<Table.Row />`

Props

`<Table.Cell />`

Props

Buttons in a cell

`<Table.Cell.Badge />`

Props

`<Table.Cell.Avatar />`

Props

​Example

​Props

​<Table.Header />

​Props

​<Table.HeaderCell />

​Props

​<Table.Body />

​Props

​<Table.Row />

​Props

​<Table.Cell />

​Props

​Buttons in a cell

​<Table.Cell.Badge />

​Props

​<Table.Cell.Avatar />

​Props

Example

Props

`<Table.Header />`

Props

`<Table.HeaderCell />`

Props

`<Table.Body />`

Props

`<Table.Row />`

Props

`<Table.Cell />`

Props

Buttons in a cell

`<Table.Cell.Badge />`

Props

`<Table.Cell.Avatar />`

Props