Skip to content

Commit c403b00

Browse files
authored
docs: update cell component docs (#15574)
Fixes #15513 - updates cell component props - adds custom cell example
1 parent dc1b799 commit c403b00

File tree

1 file changed

+61
-5
lines changed

1 file changed

+61
-5
lines changed

docs/fields/overview.mdx

Lines changed: 61 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -910,19 +910,75 @@ export const myField: Field = {
910910
}
911911
```
912912

913-
All Cell Components receive the same [Default Field Component Props](#field), plus the following:
913+
#### Example: Custom Cell Component
914914

915-
| Property | Description |
916-
| ------------- | --------------------------------------------------------------------- |
917-
| **`link`** | A boolean representing whether this cell should be wrapped in a link. |
918-
| **`onClick`** | A function that is called when the cell is clicked. |
915+
```ts
916+
'use client'
917+
import type { DefaultCellComponentProps } from 'payload'
918+
919+
export const MyCustomCellComponent: React.FC<DefaultCellComponentProps> = ({
920+
cellData,
921+
field,
922+
rowData,
923+
}) => {
924+
const price = cellData as number
925+
const currency = rowData.currency || 'USD'
926+
927+
return (
928+
<span>
929+
{new Intl.NumberFormat('en-US', {
930+
style: 'currency',
931+
currency,
932+
}).format(price)}
933+
</span>
934+
)
935+
}
936+
```
937+
938+
<Banner type="warning">
939+
**Important:** Use `DefaultCellComponentProps` for client components (with
940+
`'use client'` directive) and `DefaultServerCellComponentProps` for server
941+
components. Omitting `'use client'` will change the expected prop types.
942+
</Banner>
943+
944+
All Cell Components receive the following props:
945+
946+
| Property | Description |
947+
| --------------------- | ---------------------------------------------------------------------------- |
948+
| **`cellData`** | The data value for this specific cell. |
949+
| **`collectionSlug`** | The slug of the collection being rendered. |
950+
| **`field`** | The field configuration object. |
951+
| **`rowData`** | An object containing all data for the current row. |
952+
| **`className`** | Optional CSS class name for styling the cell. |
953+
| **`columnIndex`** | Optional index number of the column. |
954+
| **`customCellProps`** | Optional additional custom props passed to the cell. |
955+
| **`link`** | Optional boolean representing whether this cell should be wrapped in a link. |
956+
| **`linkURL`** | Optional URL string for the link. |
957+
| **`onClick`** | Optional function called when the cell is clicked. |
958+
| **`viewType`** | Optional string representing the type of view being rendered. |
959+
960+
<Banner type="success">
961+
**Note:** Cell components receive a different set of props than Field
962+
components, optimized specifically for rendering data in the List View. They
963+
do not receive the standard Field component props like `docPreferences`,
964+
`validate`, or `path`.
965+
</Banner>
919966

920967
For details on how to build Custom Components themselves, see [Building Custom Components](../custom-components/overview#building-custom-components).
921968

922969
#### Filter
923970

924971
The Filter Component is the actual input element rendered within the "Filter By" dropdown of the List View used to represent this field when building filters.
925972

973+
All Custom Filter Components receive the following props:
974+
975+
| Property | Description |
976+
| -------------- | -------------------------------------------------- |
977+
| **`disabled`** | Boolean indicating whether the filter is disabled. |
978+
| **`onChange`** | Function to call when the filter value changes. |
979+
| **`operator`** | The comparison operator being used for the filter. |
980+
| **`value`** | The current value of the filter. |
981+
926982
To swap in your own Filter Component, use the `admin.components.Filter` property in your Field Config:
927983

928984
```ts

0 commit comments

Comments
 (0)