Multiple <Table /> components in custom ListView display same global data instead of filtered props

[shestakov2103]

Hi everyone,

I am new to Payload CMS and React, and I'm struggling with customizing the List View.

My Goal:
I want to create a grouped List View where documents are categorized by a specific field (e.g., "group"). Each group should be inside a component and contain a

showing only the documents belonging to that group.

The Problem:
I have successfully grouped my data and passed the filtered array to the data prop of the

component. However, the UI ignores the data prop. Instead, every table on the page renders the exact same records (the first few documents from the entire collection).

Interestingly, if I stringify the data (JSON.stringify(items)), it shows the correct filtered items, but the

component next to it displays the incorrect global data.

It seems like the

component is strictly tied to the global ListQueryProvider context from DefaultListView and ignores the data prop when nested.

export function CustomListView(props: ListViewClientProps) {
    const { columnState, collectionSlug } = props
    const { data } = useListQuery()

    const grouped = useMemo(() => {
        const groups: Record<string, any[]> = {}
        const docs = data?.docs || []
        for (const it of docs) {
            const key = it.group || 'No Group'
            if (!groups[key]) groups[key] = []
            groups[key].push(it)
        }
        return groups
    }, [data?.docs])

    const collapsibleTable = (
        <div>
            {Object.entries(grouped).map(([group, items]) => (
                <Collapsible header={group} key={group}>
                    {/* This table displays global data, not "items" */}
                    <Table data={items} columns={columnState} />
                    {/* This JSON shows the correct filtered data */}
                    <pre>{JSON.stringify(items, null, 2)}</pre>
                </Collapsible>
            ))}
        </div>
    )

    return <DefaultListView {...props} Table={collapsibleTable} />
}

Questions:

Why does the

component ignore the data prop when used inside DefaultListView?

How can I "isolate" or "reset" the context for each table so they respect the filtered data while keeping standard features like links and column formatting?

Is there a recommended way to achieve grouping in Payload CMS without completely rewriting the table logic from scratch?

Since this is my first experience with Payload, I might be missing something fundamental about how Providers work here. Any help would be greatly appreciated!

[zubricks]

Hey @shestakov2103 you might want to look into groupBy if you haven't yet! This enables grouping in the list view UI using findDistinct under the hood. It's marked as experimental, but it's the supported path.

With it you can do something like

// collections/MyCollection.ts
export const MyCollection: CollectionConfig = {
  slug: 'my-collection',
  admin: {
    groupBy: true,
  },
  fields: [
    { name: 'group', type: 'text' },
    // ...
  ],
}

[shestakov2103]

Thanks! groupBy looks like a great built-in solution, I'll definitely check it out.

However, for the sake of learning and more complex layouts, I'm still curious: why does the Table component ignore the data prop when nested?