mirror of
https://github.com/payloadcms/payload.git
synced 2026-09-14 20:07:19 +08:00
Sean Zubrickas
4884195d71
Adds the first release of @payloadcms/ui component documentation, focused on common, visually useful components and working Payload v3 examples. - Adds component guides, usage guidance, props, and accessibility notes. - Adds an overview and curated component inventory under Features → UI Components. *_v4 as a fast follow once this gets approved_
40 lines
1.8 KiB
Plaintext
40 lines
1.8 KiB
Plaintext
---
|
|
title: Table
|
|
label: Table
|
|
order: 250
|
|
desc: Display pre-rendered column data with Payload's Table component.
|
|
keywords: ui, component, table, data, rows, columns
|
|
---
|
|
|
|
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
|
|
|
|
<ComponentPreview component="Table" example="basic" />
|
|
|
|
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._
|