Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Collection Admin Config

The behavior of Collections within the Admin Panel can be fully customized to fit the needs of your application. This includes grouping or hiding their navigation links, adding Custom Components, selecting which fields to display in the List View, and more.

To configure Admin Options for Collections, use the admin property in your Collection Config:

1
import type { CollectionConfig } from 'payload'
2
3
export const MyCollection: CollectionConfig = {
4
// ...
5
admin: {
6
// ...
7
},
8
}

Admin Options

The following options are available:

Option

Description

group

Text or localization object used to group Collection and Global links in the admin navigation. Set to false to hide the link from the navigation while keeping its routes accessible.

hidden

Set to true or a function, called with the current user, returning true to exclude this Collection from navigation and admin routing.

hooks

Admin-specific hooks for this Collection. More details.

useAsTitle

Specify a top-level field to use for a document title throughout the Admin Panel. If no field is defined, the ID of the document is used as the title. A field with virtual: true cannot be used as the title.

description

Text to display below the Collection label in the List View to give editors more information. Alternatively, you can use the admin.components.Description to render a React component. More details.

defaultColumns

Array of field names that correspond to which columns to show by default in this Collection's List View.

hideAPIURL

Hides the "API URL" meta field while editing documents within this Collection.

enableRichTextLink

The Rich Text field features a Link element which allows for users to automatically reference related documents within their rich text. Set to true by default.

enableRichTextRelationship

The Rich Text field features a Relationship element which allows for users to automatically reference related documents within their rich text. Set to true by default.

meta

Page metadata overrides to apply to this Collection within the Admin Panel. More details.

preview

Function to generate preview URLs within the Admin Panel that can point to your app. More details.

livePreview

Enable real-time editing for instant visual feedback of your front-end application. More details.

components

Swap in your own React components to be used within this Collection. More details.

listSearchableFields

Specify which fields should be searched in the List search view. More details.

pagination

Set pagination-specific options for this Collection. More details.

baseListFilter

You can define a default base filter for this collection's List view, which will be merged into any filters that the user performs.

Custom Components

Collections can set their own Custom Components which only apply to Collection-specific UI within the Admin Panel. This includes elements such as the Save Button, or entire layouts such as the Edit View.

To override Collection Components, use the admin.components property in your Collection Config:

1
import type { SanitizedCollectionConfig } from 'payload'
2
3
export const MyCollection: SanitizedCollectionConfig = {
4
// ...
5
admin: {
6
components: {
7
// ...
8
},
9
},
10
}

The following options are available:

Path

Description

beforeList

An array of components to inject before the built-in List View

beforeListTable

An array of components to inject before the built-in List View's table

afterList

An array of components to inject after the built-in List View

afterListTable

An array of components to inject after the built-in List View's table

Description

A component to render below the Collection label in the List View. An alternative to the admin.description property.

edit.SaveButton

Replace the default Save Button with a Custom Component. Drafts must be disabled.

edit.SaveDraftButton

Replace the default Save Draft Button with a Custom Component. Drafts must be enabled and autosave must be disabled.

edit.PublishButton

Replace the default Publish Button with a Custom Component. Drafts must be enabled.

edit.PreviewButton

Replace the default Preview Button with a Custom Component. Preview must be enabled.

views

Override or create new views within the Admin Panel. More details.

Preview

It is possible to display a Preview Button within the Edit View of the Admin Panel. This will allow editors to visit the frontend of your app the corresponds to the document they are actively editing. This way they can preview the latest, potentially unpublished changes.

To configure the Preview Button, set the admin.preview property to a function in your Collection Config:

1
import type { CollectionConfig } from 'payload'
2
3
export const Posts: CollectionConfig = {
4
// ...
5
admin: {
6
preview: (doc, { locale }) => {
7
if (doc?.slug) {
8
return `/${doc.slug}?locale=${locale}`
9
}
10
11
return null
12
},
13
},
14
}

The preview property resolves to a string that points to your front-end application with additional URL parameters. This can be an absolute URL or a relative path.

The preview function receives two arguments:

Argument

Description

doc

The Document being edited.

ctx

An object containing locale, token, and req properties. The token is the currently logged-in user's JWT.

If your application requires a fully qualified URL, such as within deploying to Vercel Preview Deployments, you can use the req property to build this URL:

1
preview: (doc, { req }) => `${req.protocol}//${req.host}/${doc.slug}`

All Collections receive their own List View which displays a paginated list of documents that can be sorted and filtered. The pagination behavior of the List View can be customized on a per-Collection basis, and uses the same Pagination API that Payload provides.

To configure pagination options, use the admin.pagination property in your Collection Config:

1
import type { CollectionConfig } from 'payload'
2
3
export const Posts: CollectionConfig = {
4
// ...
5
admin: {
6
pagination: {
7
defaultLimit: 10,
8
limits: [10, 20, 50],
9
},
10
},
11
}

The following options are available:

Option

Description

defaultLimit

Integer that specifies the default per-page limit that should be used. Defaults to 10.

limits

Provide an array of integers to use as per-page options for admins to choose from in the List View.

List Searchable Fields

In the List View, there is a "search" box that allows you to quickly find a document through a simple text search. By default, it searches on the ID field. If defined, the admin.useAsTitle field is used. Or, you can explicitly define which fields to search based on the needs of your application.

To define which fields should be searched, use the admin.listSearchableFields property in your Collection Config:

1
import type { CollectionConfig } from 'payload'
2
3
export const Posts: CollectionConfig = {
4
// ...
5
admin: {
6
listSearchableFields: ['title', 'slug'],
7
},
8
}
Next

Global Admin Config