Add label to row title

magneze909

4 months ago

9

• 

  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
• 

  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
• 

  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
• 

  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