> ## 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.
#
> A component for displaying tabular data.
```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, avatars, or buttons.
## Example
```tsx TypeScript theme={"system"}
import {Table, Link, Button} from "attio/client"
export function MyDialog() {
return (
NameAvatarPortfolioRoleStatusActionsJohn Doe
John's Portfolio
AdminActiveJane Smith
Jane's Portfolio
DeveloperActive
)
}
```
## Props
An optional label to display above the table.
The table structure. Must contain exactly one `` and one ``.
A `
` component must have exactly one `` followed by exactly one `` as children.
## ``
The header row of the table. Contains the column headers.
## Props
The header cells to display.
A `` component can *only* have ``s as children.
## ``
A single header cell in the table header.
## Props
An optional [Attio Icon](../icons) to display next to the header text.
The text content of the header cell.
## ``
The body of the table containing all data rows.
## Props
The table rows.
A `` component can *only* have ``s as children.
## ``
A single data row in the table body.
## Props
The table cells for this row.
Each `` must contain the same number of `` components as there are `` components in the header.
## ``
A single data cell in a table row. Can contain text, links, badges, avatars, or buttons.
## Props
The content of the table cell. Can be:
* Plain text, on its own or with [``](./link) components
* One or more `` components
* One or more `` 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](../dialogs/show-dialog), buttons in a cell stay in the cell. They are not moved to the dialog footer.
## ``
A badge component for use inside a table cell. Useful for displaying status indicators or categories.
## Props
The text content of the badge. Only text children are allowed.
The color of the badge.
## ``
An avatar component for use inside a table cell. Useful for displaying profile pictures or organization logos.
## Props
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.
The URL of the avatar image. If `null` or `undefined`, a fallback representation based on the name
will be displayed.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.
```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, avatars, or buttons.
## Example
```tsx TypeScript theme={"system"}
import {Table, Link, Button} from "attio/client"
export function MyDialog() {
return (