From 0ee45d3581d2735b1c26ce7755d11be5b111a757 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Tue, 26 Mar 2024 19:44:00 +0100
Subject: [PATCH] docs: document mapRow ExternalField API

---
 .../configuration/fields/external.mdx         | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/apps/docs/pages/docs/api-reference/configuration/fields/external.mdx b/apps/docs/pages/docs/api-reference/configuration/fields/external.mdx
index 3d9898a7e1..4a67e19fe7 100644
--- a/apps/docs/pages/docs/api-reference/configuration/fields/external.mdx
+++ b/apps/docs/pages/docs/api-reference/configuration/fields/external.mdx
@@ -60,6 +60,7 @@ const config = {
 | [`initialFilters`](#initialfilters)       | `{ "rating": 1 }`                            | Object     | -        |
 | [`initialQuery`](#initialquery)           | `initialQuery: "Hello, world"`               | String     | -        |
 | [`mapProp()`](#mappropitem)               | `mapProp: async ({ title }) => title`        | Function   | -        |
+| [`mapRow()`](#mappropitem)                | `mapRow: async ({ title }) => title`         | Function   | -        |
 | [`placeholder`](#placeholder)             | `placeholder: "Select content"`              | String     | -        |
 | [`showSearch`](#showsearch)               | `showSearch: true`                           | Boolean    | -        |
 
@@ -435,6 +436,56 @@ const config = {
   }}
 />
 
+### `mapRow(item)`
+
+Modify the shape of the item before rendering it in the table. This will not affect the selected data.
+
+```tsx {13} copy
+const config = {
+  components: {
+    Example: {
+      fields: {
+        data: {
+          type: "external",
+          fetchList: async () => {
+            return [
+              { title: "Hello, world", description: "Lorem ipsum 1" },
+              { title: "Goodbye, world", description: "Lorem ipsum 2" },
+            ];
+          },
+          mapRow: (item) => ({ ...item, title: item.title.toUpperCase() }),
+        },
+      },
+      render: ({ data }) => {
+        return <p>{data || "No data selected"}</p>;
+      },
+      // ...
+    },
+  },
+};
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      data: {
+        type: "external",
+        fetchList: async () => {
+          return [
+            { title: "Hello, world", description: "Lorem ipsum 1" },
+            { title: "Goodbye, world", description: "Lorem ipsum 2" },
+          ];
+        },
+        mapRow: (item) => ({ ...item, title: item.title.toUpperCase() }),
+      },
+    },
+    render: ({ data }) => {
+      return <p>{data?.title || "No data selected"}</p>;
+    },
+  }}
+/>
+
 ### `placeholder`
 
 Set the placeholder text when no item is selected.