tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: cell component props and example

Browse Source
This commit is contained in:
Dan Ribbens
2022-09-21 14:20:01 -04:00
parent 686085496a
commit 314671b3b7
3 changed files with 52 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/admin/components.mdx
View File

@@ -97,11 +97,51 @@ All Payload fields support the ability to swap in your own React components. So,
**Fields support the following custom components:**
| Component | Description |
| --------------- | -------------|
| **`Filter`** | Override the text input that is presented in the `List` view when a user is filtering documents by the customized field. |
| **`Cell`** | Used in the `List` view's table to represent a table-based preview of the data stored in the field. |
| **`Field`** | Swap out the field itself within all `Edit` views. |
| Component | Description |
| --------------- |------------------------------------------------------------------------------------------------------------------------------|
| **`Filter`** | Override the text input that is presented in the `List` view when a user is filtering documents by the customized field. |
| **`Cell`** | Used in the `List` view's table to represent a table-based preview of the data stored in the field. [More](#cell-component) |
| **`Field`** | Swap out the field itself within all `Edit` views. [More](#field-component) |
## Cell Component
These are the props that will be passed to your custom Cell to use in your own components.
| Property | Description |
|--------------|-------------------------------------------------------------------|
| **`field`** | An object that includes the field configuration. |
| **`colIndex`** | A unique number for the column in the list. |
| **`collection`** | An object with the config of the collection that the field is in. |
| **`cellData`** | The data for the field that the cell represents. |
| **`rowData`** | An object with all the field values for the row. |
#### Example
```tsx
import React from 'react';
import './index.scss';
const baseClass = 'custom-cell';
const CustomCell: React.FC<Props> = (props) => {
const {
field,
colIndex,
collection,
cellData,
rowData,
} = props;
return (
<span className={baseClass}>
{ cellData }
</span>
);
};
```
## Field Component
When writing your own custom components you can make use of a number of hooks to set data, get reactive changes to other fields, get the id of the document or interact with a context from a custom provider.
### Sending and receiving values from the form

12
docs/fields/ui.mdx
View File

@@ -23,12 +23,12 @@ With this field, you can also inject custom `Cell` components that appear as add
### Config
| Option | Description |
| ---------------------------- | ----------- |
| **`name`** * | A unique identifier for this field. |
| **`label`** | Human-readable label for this UI field. |
| **`admin.components.Field`** | React component to be rendered for this field within the Edit view. |
| **`admin.components.Cell`** | React component to be rendered as a Cell within collection List views. |
| Option | Description |
| ---------------------------- |-------------------------------------------------------------------------------------------------------------------|
| **`name`** * | A unique identifier for this field. |
| **`label`** | Human-readable label for this UI field. |
| **`admin.components.Field`** | React component to be rendered for this field within the Edit view. [More](/admin/components/#field-component) |
| **`admin.components.Cell`** | React component to be rendered as a Cell within collection List views. [More](/admin/components/#field-component) |
*\* An asterisk denotes that a property is required.*

2
docs/plugins/overview.mdx
View File

@@ -134,7 +134,7 @@ const addLastModified: Plugin = (incomingConfig: Config): Config => {
export default addLastModified;
```
#### Available Plugins
### Available Plugins
You can discover existing plugins by browsing the `payload-plugin` topic on [GitHub](https://github.com/topics/payload-plugin).