From 314671b3b71d591ea02f080e0b1f47d86301690b Mon Sep 17 00:00:00 2001
From: Dan Ribbens <dan.ribbens@gmail.com>
Date: Wed, 21 Sep 2022 14:20:01 -0400
Subject: [PATCH] docs: cell component props and example

---
 docs/admin/components.mdx | 50 +++++++++++++++++++++++++++++++++++----
 docs/fields/ui.mdx        | 12 +++++-----
 docs/plugins/overview.mdx |  2 +-
 3 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/docs/admin/components.mdx b/docs/admin/components.mdx
index 6e82397e8a..9950df5e40 100644
--- a/docs/admin/components.mdx
+++ b/docs/admin/components.mdx
@@ -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
 
diff --git a/docs/fields/ui.mdx b/docs/fields/ui.mdx
index 89737a40f7..657f3466ec 100644
--- a/docs/fields/ui.mdx
+++ b/docs/fields/ui.mdx
@@ -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.*
 
diff --git a/docs/plugins/overview.mdx b/docs/plugins/overview.mdx
index 180d19f755..bd4224fbd8 100644
--- a/docs/plugins/overview.mdx
+++ b/docs/plugins/overview.mdx
@@ -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).