Add label to row title

default discord avatar
magneze909
4 months ago
9

I'm working with the

template-website

template, looking a the header global section is it possible to add a label to the row. It'll be easier to understand from looking at the image. The reason I want to do this is to make it easier to reorder the row items as you will be able to see the name of the nav item,

  • default discord avatar
    imcorfitz
    4 months ago

    I believe what you are looking for is the

    label

    property for the

    collapsible

    field:

    https://payloadcms.com/docs/fields/collapsible#example
  • default discord avatar
    magneze909
    4 months ago

    Hi, thanks for the reply. I don't think there is a collapsible field, well I can't find one. I mistakenly thought it was a row field but looking again i think it may be a group, not too sure. This is the file in question, I should have posted this first

    https://github.com/payloadcms/template-website/blob/main/src/fields/link.ts
  • default discord avatar
    paulpopus
    4 months ago

    @magneze909 I think what you're looking for is the array admin config for

    RowLabel

    , you can basically override the React component for it with custom data

    https://payloadcms.com/docs/fields/array#admin-config


    Here's a more full code example from an older codebase I have


    admin: {
      components: {
        /* @ts-ignore */
        RowLabel: ({ data, index }) => {
          return `Item ${String(index).padStart(2, '0')}: ${data?.label ?? ''}`
        },
      },
      initCollapsed: true,
    },


    A bit complex but inside

    data

    you can inspect it via your console and see the full object you have access to, in my example im naming it Item + a number and the

    label

    from data if it exists



    This is added on the

    array

    field itself



    I think in that template it'll be inside

    Header.ts
  • default discord avatar
    magneze909
    4 months ago

    @paulpopus thanks Paul, you're spot on. Not sure how easy it will be getting the label in there though. I will take a look in a bit. Very useful to know this though for future reference. Thanks!



    Awesome! was actually pretty easy. Logging the object allowed me to find the label no problem

    ${data.link.label}

    thanks again for your help

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.