Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Is it possible to output a nested value of a collection field in list view?

default discord avatar
jakey___last year
6

I've got a bunch of grouped/array fields in a particular collection I'm working with. It would be ideal to be able to show the first element of an array, for instance, in the list view instead of the full json like shown by default. Is there a way to intercept this and display what I'd prefer?

  • default discord avatar
    jarrod69420last year

    Could you create a Cell component for the field?

    https://payloadcms.com/docs/admin/components#cell-component
  • default discord avatar
    jakey___last year

    Interesting, I'll give it a go!



    @jarrod69420 Sorry, I haven't had a chance to get back around to this till now. I don't quite understand what this documentation is telling me to do.



    I noticed there's a

    views.List

    thing that seems similar to what I want to override, but when I attempt to add it to my collection, I get a typescript error.



    Continuing to look into this myself but any other examples of this kind of thing being done would be helpful!



    so far i've been able to find the type declaration in the source code which led me to this being the property path



    const TheCollection: CollectionConfig = {
        admin: {
            components: {
                views: {
                    List: CustomList
                }
            }
            ...
        }
        ...
    }


    ok, got it replaced with a custom component. Working through that now! This specific question is answered imo.



    I'll be able to adjust how the data is output to the screen via this custom component.



    Just a quick update. I was indeed able to do this. I copied over the contents of

    https://github.com/payloadcms/payload/blob/536d7017eebd5a8e14b2936c55a7fccc90d3f530/src/admin/components/views/collections/List/Default.tsx

    along with the corresponding css file.



    after updating the imports it was a simple matter of adjusting the

    formattedDocs

    variable.



    thanks again!

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team..