Not possible to show a field that is in a group as a column

[DavidOliver]

Bug Report

I've been separating fields into groups to visually break up the CRUD interface but have now found that that precludes child fields being individually shown as columns in the listing view.

For example, I have a group named 'details' containing fields named 'nameFirst' and 'nameLast':

Steps to Reproduce

1. Create a group field that contains other fields
2. Show the Columns selector on the listing page

Other Details

Payload 1.2.5

[jacobsfletch]

This is currently not possible but would make a great feature. In the meantime, you could inject your own Cell component and display whatever you'd like. https://payloadcms.com/docs/admin/components#cell-component

[DavidOliver]

Thanks - that's good to know.

I think for now I'll need to remove the use of groups as it's not (yet) straightforwardly possible to prevent groups from showing the columns selector, and my client is bound to find that out and mention it. :)

It would be great to have some way to visually break up sets of fields/add spacing that didn't affect the fields' names/grouping behaviour.

[JarrodMFlesch]

@DavidOliver you could implement this yourself if you wanted to by rearranging your config fields!

Personally I would wire up re-usable ui react component and render that between row fields (rows do not affect data shape). The UI field could take a title and add top padding/margin with a top border to get a similar look and feel of the group component 😃

Edit: but we are all in agreement that the searching/sorting/filtering could use some love, for sure 👍

[DavidOliver]

Thanks, both.

This is currently not possible but would make a great feature. In the meantime, you could inject your own Cell component and display whatever you'd like. https://payloadcms.com/docs/admin/components#cell-component

I don't have any experience with React. I have the example cell component replacing the whole list view by using it with admin.components.views.List.

import { CollectionConfig } from 'payload/types';
import React from "react";

const baseClass = "custom-cell";

const CustomCell: React.FC<Props> = (props) => {
  const { field, colIndex, collection, cellData, rowData } = props;

  return <span className={baseClass}>{cellData}</span>;
};

const Systems: CollectionConfig = {
  slug: 'systems',
  admin: {
    components: {
      views: {
        List: CustomCell,
      },
    }
  },

And, of course, this results in an essentially blank view.

How can I instead inject it into the default list view (and only for the group field concerned?)?

If this kind of question is not appropriate here, I understand. I can simply remove the groups for now and come back to this later.

[DanRibbens]

You could replace your field group with collapsible - https://payloadcms.com/docs/fields/collapsible.

That is organizational only so your data shape will change slightly.

I'm converting this to a discussion so we can track it as a new feature.

[JarrodMFlesch]

@DavidOliver, I think what you are looking to do is slightly different than what you have above. Something like this is what I was thinking if you are just looking to get the Cell in the table to look nice:

{
  type: 'group',
  name: 'groupField',
  admin: {
    components: {
      Cell: CustomCell
    },
  },
  fields: [ ...yourFieldsHere ],
}

[DavidOliver]

@JarrodMFlesch, thanks very much - that gets me further. It looks like the relationship fields' values in cellData within the group are the IDs rather than the string names of the related entries. It's probably more practical for me to simplify and do without the groups.

@DanRibbens, thanks - I think collapsibles will do the job. It's nice that they can initially appear not collapsed.

[cbratschi]

I checked the redirects plugin and it uses a group reference for 'to.type':

https://github.com/payloadcms/plugin-redirects/blob/main/src/index.ts#L16

My implementation uses now two groups: from and to. All data is stored there and therefore cannot be shown in columns. Would be great if this would be supported. I guess I have to remove the groups again to get the columns working.

[andershermansen]

This is implemented in #7355