Grouping collections in admin

[scenic sundial]

Is there a straightforward way to group collections in the admin panel? I have a large (and growing) number of collections that would benefit enormously from being able to be organized in some sort of a hierarchy, similar to the way fields have groups.

[woeful karma]

There is a way to group collections in nav bar if it helps - https://payloadcms.com/docs/configuration/collections#admin-options

[scenic sundial]

Perfect! Exactly what I was hoping for.

[topaz sierra]

@scenic sundial something like this might also be useful 👼

const groupCollections = (group: string, collections: CollectionConfig[]): CollectionConfig[] => {
  return collections.map(collection => {
    return {
      ...collection,
      admin: {
        ...collection.admin,
        group,
      },
    }
  })
}

const ContentCollections = [Posts, Pages]

const configToBuild: Config = {
  // ...rest of config,
  collections: [
    ...groupCollections('Content', ContentCollections),
  ],
}

[scenic sundial]

I like it 🙂 Nice one!

[north topaz]

This is almost exactly what I'm looking for... but how do I make it localized with I18n?

This is how I solved it:

const groupCollections = (group: string | Record<string, string>, collections: CollectionConfig[]): CollectionConfig[] => {
  return collections.map(collection => {
    return {
      ...collection,
      admin: {
        ...collection.admin,
        group,
      },
    }
  })
}

const ContentCollections = [Posts, Pages]
const configToBuild: Config = {
  // ...rest of config,
  collections: [
    ...groupCollections({en: 'Content', es: 'Contentido'}, ContentCollections),
  ],
}

I don't know how to change the group name of the default User collection though. Is it possible without making a collectionconfig for it?

[north topaz]

@topaz sierra
It would be neat if grouping inside of payload.config.ts was possible out of the box without creating that method btw. Imo, it's a much more practical way to group collections, than doing it inside every collection config.

Perhaps it could look something like this?

const configToBuild: Config = {
  // ...rest of config,
  collections: {
    {
      group: { en: "Content", es: "Contentido"},
      collections: [Posts, Pages]
    },
    {
      group: { en: "Users", es: "Usuarios"},
      collections: [Users, UserGroups, UserPrivileges]
    },
  },
}

[topaz sierra]

Yeah that would be a large api lift though as it would affect a lot of code. I am not sure that is the pattern I would like to see. It's a bit awkward having collections inside of collections. For now I think the method abstraction is the way to go.

[north topaz]

Agreed. It's not the best way to do it, but being able to change groups easily in the payload.config.ts file would be very neat

how about something like this instead?

const configToBuild: Config = {
  // ...rest of config,
  collections: [Posts, Pages,Users, UserGroups, UserPrivileges],
  admin {
    collectionGroups: {
      group: { en: "Content", es: "Contentido"},
      collections: [Posts, Pages]
    },
    {
      group: { en: "Users", es: "Usuarios"},
      collections: [Users, UserGroups, UserPrivileges]
    },
  }
}