Description
Describe the Bug
Hello, I want to render a custom table component in my (default) listview. So I set the path of admin.components.view.list.Component.
The component renders the DefaultListView with a custom Table prop.
<DefaultListView
Description={props.Description}
BeforeList={props.BeforeList}
BeforeListTable={props.BeforeListTable}
AfterListTable={props.AfterListTable}
AfterList={props.AfterList}
collectionSlug={props.collectionSlug}
columnState={props.columnState}
disableBulkDelete={props.disableBulkDelete}
disableBulkEdit={props.disableBulkEdit}
enableRowSelections={props.enableRowSelections}
hasCreatePermission={props.hasCreatePermission}
listPreferences={props.listPreferences}
newDocumentURL={props.newDocumentURL}
preferenceKey={props.preferenceKey}
renderedFilters={props.renderedFilters}
Table={
<CustomTable
columns={props.columnState}
docs={props.data.docs}
enableRowSelections={props.enableRowSelections}
/>
}
/>At first sight, everything looks fine. I can see the docs in my custom table. I can use sorting, pagination, the search bar and filters. Great.
Now, if I change the columns which should be displayed / hidden, the view rerenders with the default list view (and default table).
After reloading the page, my custom table will be displayed again (with new columns state).
I think the change of columns doesn't trigger a server request. So it wouldn't render the new table on the server, but on the client side. So I added "use client" to the view component. But in the client component, I can't get the documents as props.data.docs because the data prop is undefined.
Link to the code that reproduces this issue
https://github.com/dkirchhof/payload3-custom-list-view-bug
Reproduction Steps
npm install
npm run dev
- Goto http://localhost:3000/admin/collections/users
- You should see a custom table
- Change columns
- 💥 Default table will be displayed
Which area(s) are affected? (Select all that apply)
area: ui
Environment Info
Binaries:
Node: 23.7.0
npm: 11.1.0
Yarn: 1.22.22
pnpm: 10.2.1
Relevant Packages:
payload: 3.22.0
next: 15.1.5
@payloadcms/graphql: 3.22.0
@payloadcms/next/utilities: 3.22.0
@payloadcms/translations: 3.22.0
@payloadcms/ui/shared: 3.22.0
react: 19.0.0
react-dom: 19.0.0