# Table

Source: https://payloadcms.com/docs/ui-components/table

The `Table` component renders Payload's responsive table structure and styles. Columns define their heading and provide one rendered cell for each row.

## Import

```tsx
import { Table } from '@payloadcms/ui'
import type { ClientField, Column } from 'payload'
```

## Basic usage

**Implementation**

```tsx
const rows = [
  { id: '1', name: 'Button', status: 'Documented' },
  { id: '2', name: 'DatePicker', status: 'In progress' },
  { id: '3', name: 'Upload', status: 'Planned' },
]

const columns: Column[] = [
  {
    accessor: 'name',
    active: true,
    field: { name: 'name', type: 'text' } as ClientField,
    Heading: 'Component',
    renderedCells: rows.map((row) => row.name),
  },
  {
    accessor: 'status',
    active: true,
    field: { name: 'status', type: 'text' } as ClientField,
    Heading: 'Status',
    renderedCells: rows.map((row) => row.status),
  },
]

<Table columns={columns} data={rows} />
```

**Styling**

Customize the Table header, striped rows, and cell borders while leaving column rendering and interactions intact.

```css
.table thead {
  background: #211b4d;
  color: #ffffff;
}

.table tbody tr:nth-child(odd) {
  background: #f3f1ff;
}

.table th,
.table td {
  border-color: #ded8ff;
}
```

- `background`: Header or striped-row surface.
- `border-color`: Cell separator color.
- `color`: Header label color.

Keep each column's `renderedCells` array in the same order as `data`. Columns with `active: false` are omitted from the table.

## Rendering cells

`renderedCells` accepts React nodes, so simple custom tables can format values directly. Payload also exports `DefaultCell` for rendering values from Payload field configurations. `DefaultCell` expects the Config and Translation providers available inside the Admin Panel.

## Common props

These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.

| Prop          | Type                        | Default     | Description                                          |
| ------------- | --------------------------- | ----------- | ---------------------------------------------------- |
| `data` \*     | `Record<string, unknown>[]` | —           | Rows rendered by the table.                          |
| `columns`     | `Column[]`                  | —           | Defines headings, fields, and rendered cell content. |
| `appearance`  | `'default' \| 'condensed'`  | `'default'` | Selects the table's spacing and border treatment.    |
| `BeforeTable` | `ReactNode`                 | —           | Renders content immediately before the table.        |

_\* An asterisk denotes that a prop is required._