customize admin-appearance of array-element-headers (similar to defaultColumns/useAsTitle)

[bigmistqke]

At the moment arrays are being displayed collapsed as the following:

I propose a feature similar to defaultColumns in the admin-property of the CollectionConfig, with which we can define how the list of entries of a collection is being displayed:

becomes

This would allow for a much better overview in collapsed view, especially important when dealing with big arrays.

When you do not provide a defaultColumns (I guess we could call it columns as the cms-user won't be able to adapt it themselves), it could just default to the auto-indented view we have now.

[bigmistqke]

I started playing around with this feature at https://github.com/vincentvandijck/payload/tree/feat/arrayfield-admin-columns-useAsTitle
My idea is to implement both useAsTitle and columns, and to model their behavior to how it works in the collection-list

I made a naive implementation of useAsTitle.

getFielding every re-render.

The title currently only updates when the collection is saved. If there is a way how it could reactively update lmk. I know it must be possible, as this is the behavior with useAsTitle when you haven't saved yet (after you saved it does not update reactively anymore, neither after a save, I don't know if this is expected behavior or a bug), but I haven't properly looked into it yet.

I am displaying everything as a string for now.
For arrays we could follow the pattern of the collection-lists and do: array.length + fieldname + s.
For images it would be kinda handy to be able to display them as a thumbnails (in collection-list too), but that's also for another feature-request.

[jmikrut]

OK so here's my thoughts on how this pattern should work.

It should function very similarly to how our Description property works. There, you can pass in a React component. That component should accept three props at a minimum:

• data, which is the current data stored in the form and will be updated every time a field updates
• siblingData, which is just the current row's data
• index, which is the index of the row

From there, you could take whatever data you needed from the form and compose an intelligent label. Payload would basically be responsible internally for retrieving the data and siblingData, and then passing to the custom Description component.

To retrieve the data from the form, you'd do:

const { getData, getSiblingData } = useForm();
const data = getData();

// the path, including the index, of the current array field is needed here.
// It would be something like `array.0` where `array` is the current array field's path, and `.0` is the index of the row
const siblingData = getSiblingData(path);

Collapsible Usage

With the Collapsible component, we could not simply extend the existing label, because that label needs to be a string, which is used to store user preferences on the last collapsed / expanded state. However, we could change that, so the Collapsible field uses name instead for the preferences, and then label could be safely extended.

In order for this to not be a breaking change, we would need to "sanitize" collapsible fields. If the user passes a string as a label, but no name, then we can set the name of the collapsible field during sanitization, equal to the label. This will ensure that collapsibles properly always have a name property.

But, if the user passes a React component as a label, and no name, we would need to throw an error. This could be caught in field schema validation.

Array / Blocks Usage

Here, we could add another property to the array / block fields admin property called rowLabel, which takes a React component.

Does this make sense?

[TomSmedley]

This makes complete sense to me, I would love to see this feature :-)

[falko100]

I'd love this! Might attempt a PR for it.

[bigmistqke]

ye hehe, I was looking a bit into it in the beginning, but then life took over... if you would like to implement this, please go ahead, the proposal sounds great and I would still really like this feature.

[danchistyakov]

Yes, I need it too!

[bigmistqke]

I drafted a proposal today here

[zubricks]

This is now complete.

[JarrodMFlesch]

Closed with this PR

Docs here

• Array: https://payloadcms.com/docs/fields/array#admin-config
• Collapsible: https://payloadcms.com/docs/fields/collapsible#config