docs(dashboard): Add docs on customizing columns

docs/docs/guides/extending-the-dashboard/creating-pages/list-pages.md

@@ -149,3 +149,58 @@ The `ListPage` component can be customized to your exact needs, such as:
 - Defining bulk actions ("delete all selected" etc.)
 
 See the [ListPage component reference](/reference/dashboard/list-views/list-page) for an explanation of the available options.
+
+## Customizing Columns
+
+It is common that you will want to customize the way certain columns are rendered. This is done
+using the `customizeColumns` prop on the `ListPage` component.
+
+By default, an appropriate component will be chosen to render the column data
+based on the data type of the field. However, in many cases you want to have
+more control over how the column data is rendered.
+
+```tsx
+<ListPage
+  pageId="collection-list"
+  listQuery={collectionListDocument}
+  customizeColumns={{
+      // The key "name" matches one of the top-level fields of the
+      // list query type (Collection, in this example)
+      name: {
+          meta: {
+              // The Dashboard optimizes the list query `collectionListDocument` to
+              // only select field that are actually visible in the ListPage table.
+              // However, sometimes you want to render data from other fields, i.e.
+              // this column has a data dependency on the "children" and "breadcrumbs"
+              // fields in order to correctly render the "name" field.
+              // In this case, we can declare those data dependencies which means whenever
+              // the "name" column is visible, it will ensure the "children" and "breadcrumbs"
+              // fields are also selected in the query.
+              dependencies: ['children', 'breadcrumbs'],
+          },
+          header: 'Collection Name',
+          cell: ({ row }) => {
+              const isExpanded = row.getIsExpanded();
+              const hasChildren = !!row.original.children?.length;
+              return (
+                  <div
+                      style={{ marginLeft: (row.original.breadcrumbs?.length - 2) * 20 + 'px' }}
+                      className="flex gap-2 items-center"
+                  >
+                      <Button
+                          size="icon"
+                          variant="secondary"
+                          onClick={row.getToggleExpandedHandler()}
+                          disabled={!hasChildren}
+                          className={!hasChildren ? 'opacity-20' : ''}
+                      >
+                          {isExpanded ? <FolderOpen /> : <Folder />}
+                      </Button>
+                      <DetailPageButton id={row.original.id} label={row.original.name} />
+                  </div>
+              );
+          },
+      },
+  }}
+/>
+```