Rerender Bug while using custom tables in ListView

[dkirchhof]

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

2. Goto http://localhost:3000/admin/collections/users
3. You should see a custom table
4. Change columns
5. 💥 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

[jessrynkar]

Hi @dkirchhof - thank you for the clear reproduction! I can see the issue you are experiencing in v3.22.0 - the behavior caused by the column selector has since been resolved. Please update your Payload version to latest, which is currently v3.37.0 and this problem will be fixed for you.

Thanks again!

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.