You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
docs: document ListViewServerProps/ClientProps and custom list view component patterns (#15970)
Fixes#15416
- adds banner on custom views to state props are for root views only
- add props table for list view props
- adds default list view section and example
- adds slot props section
---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
- https://app.asana.com/0/0/1213860518113230
---------
Co-authored-by: Patrik Kozak <35232443+PatrikKozak@users.noreply.github.com>
Copy file name to clipboardExpand all lines: docs/custom-components/list-view.mdx
+110-8Lines changed: 110 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,23 +18,25 @@ The List View can be swapped out in its entirety for a Custom View, or it can be
18
18
19
19
## Custom List View
20
20
21
-
To swap out the entire List View with a [Custom View](./custom-views), use the `admin.components.views.list` property in your [Payload Config](../configuration/overview):
21
+
To swap out the entire List View with a [Custom View](./custom-views), use the `admin.components.views.list` property in your [Collection Config](../configuration/collections):
22
22
23
-
```tsx
24
-
import{ buildConfig } from'payload'
23
+
```ts
24
+
importtype { CollectionConfig } from'payload'
25
25
26
-
constconfig =buildConfig({
26
+
exportconstMyCollection:CollectionConfig={
27
27
// ...
28
28
admin: {
29
29
components: {
30
30
views: {
31
31
// highlight-start
32
-
list: '/path/to/MyCustomListView',
32
+
list: {
33
+
Component: '/path/to/MyCustomListView',
34
+
},
33
35
// highlight-end
34
36
},
35
37
},
36
38
},
37
-
})
39
+
}
38
40
```
39
41
40
42
Here is an example of a custom List View:
@@ -44,7 +46,6 @@ Here is an example of a custom List View:
return <div>This is a custom List View (Server)</div>
@@ -63,14 +64,115 @@ export function MyCustomClientListView(props: ListViewClientProps) {
63
64
}
64
65
```
65
66
66
-
_For details on how to build Custom Views, including all available props, see [Building Custom Views](./custom-views#building-custom-views)._
67
+
### Props
68
+
69
+
Custom List Views receive a different set of props than other views because Payload pre-fetches data and pre-renders components before passing the results to your component. The exact props available depend on whether you are building a Server or Client Component.
70
+
71
+
#### Server Component Props (`ListViewServerProps`)
72
+
73
+
Server components receive all [client props](#client-component-props-listviewclientprops) plus the following additional server-only data:
|`collectionSlug`| The slug of the collection being displayed. |
95
+
|`columnState`| An array of column definitions describing the current table columns and their state. |
96
+
|`disableBulkDelete`| When `true`, hides the bulk delete action. |
97
+
|`disableBulkEdit`| When `true`, hides the bulk edit action. |
98
+
|`disableQueryPresets`| When `true`, disables the query presets feature. |
99
+
|`enableRowSelections`| When `true`, enables checkboxes on each row for bulk actions. |
100
+
|`hasCreatePermission`| Whether the current user has permission to create new documents. |
101
+
|`hasDeletePermission`| Whether the current user has permission to delete documents. |
102
+
|`hasTrashPermission`| Whether the current user has permission to use the trash. |
103
+
|`newDocumentURL`| The URL to navigate to when creating a new document. |
104
+
|`renderedFilters`| A `Map<string, React.ReactNode>` of pre-rendered filter components, keyed by field path. |
105
+
|`resolvedFilterOptions`| A `Map<string, ResolvedFilterOptions>` of resolved options for relationship filter fields. |
106
+
|`viewType`| The current view type identifier. |
107
+
|`Table`| A pre-rendered React node of the documents table. Pass this through to render the built-in table. |
108
+
|`AfterList`| Slot for components rendered after the list. |
109
+
|`AfterListTable`| Slot for components rendered after the table. |
110
+
|`BeforeList`| Slot for components rendered before the list. |
111
+
|`BeforeListTable`| Slot for components rendered before the table. |
112
+
|`Description`| Slot for the collection description component. |
113
+
|`listMenuItems`| Slot for custom items rendered in the list controls menu. |
114
+
115
+
<Bannertype="info">
116
+
**Note:** Custom List Views are rendered inside a `ListQueryProvider`. This
117
+
means any Client Component in the tree can call `useListQuery()` from
118
+
`@payloadcms/ui` to read or update the current query state (search term, sort,
119
+
page, filters, etc.).
120
+
</Banner>
121
+
122
+
### Using DefaultListView
123
+
124
+
If you want to keep Payload's built-in table and controls but add your own layout around them, import and render `DefaultListView` from `@payloadcms/ui`:
In addition to swapping out the entire List View with a [Custom View](./custom-views), you can also override individual components. This allows you to customize specific parts of the List View without swapping out the entire view for your own.
71
145
72
146
To override List View components for a Collection, use the `admin.components` property in your [Collection Config](../configuration/collections):
73
147
148
+
### Slot Props
149
+
150
+
All slot components (`beforeList`, `beforeListTable`, `afterList`, `afterListTable`) receive the same base set of client props plus additional server-only props in Server Components:
0 commit comments