Simplify your stack and build anything. Or everything.
Schedule a Demo
USE CASES
Headless CMSEnterprise App BuilderHeadless E-CommerceDigital Asset Management
FEATURES
Multi-TenancyWhite LabelLocalizationAccess ControlAuth
CASE STUDIES

See what others are building with Payload.

Browse Case Studies
Build tomorrow’s web with a modern solution you truly own.
PAYLOAD IS FOR
DevelopersMarketing teamsEnterprise companiesAgencies & Consultancies
COMPARE PAYLOAD
Payload vs WordPressPayload vs ContentfulPayload vs SanityPayload vs StrapiPayload vs Directus
AGENCY TESTIMONIAL

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Become a PartnerFind a Partner
Code-based nature means you can build on top of it to power anything.
Resources
DocumentationExamplesTemplatesGitHubReleasesBlog
Community
RoadmapDiscordCommunity Help
Payload Cloud

Deploy your entire stack in one place with Payload Cloud.

LoginCloud Pricing
It’s time to take back your content infrastructure.
Schedule a Demo
Enterprise Features
SSOAI Auto-EmbeddingPublishing WorkflowsVisual EditorStatic A/B testingAI features
Customer Stories
MicrosoftASICSBlue OriginHello BelloTekton
Featured Customer Story

Microsoft chose Payload to tell the world about AI.

Read the case studyBrowse all
LoginGet Started

List View

The List View is where users interact with a list of Collection Documents within the Admin Panel. This is where they can view, sort, filter, and paginate their documents to find exactly what they're looking for. This is also where users can perform bulk operations on multiple documents at once, such as deleting, editing, or publishing many.

The List View can be swapped out in its entirety for a Custom View, or it can be injected with a number of Custom Components to add additional functionality or presentational elements without replacing the entire view.

Custom List View

To swap out the entire List View with a Custom View, use the admin.components.views.list property in your Payload Config:

1
import { buildConfig } from 'payload'
2
3
const config = buildConfig({
4
// ...
5
admin: {
6
components: {
7
views: {
8
list: '/path/to/MyCustomListView',
9
},
10
},
11
},
12
})

Here is an example of a custom List View:

Server Component

1
import React from 'react'
2
import type { ListViewServerProps } from 'payload'
3
import { DefaultListView } from '@payloadcms/ui'
4
5
export function MyCustomServerListView(props: ListViewServerProps) {
6
return (
7
<div>
8
This is a custom List View (Server)
9
</div>
10
)
11
}

Client Component

1
'use client'
2
import React from 'react'
3
import type { ListViewClientProps } from 'payload'
4
5
export function MyCustomClientListView(props: ListViewClientProps) {
6
return (
7
<div>
8
This is a custom List View (Client)
9
</div>
10
)
11
}

For details on how to build Custom Views, including all available props, see Building Custom Views.

Custom Components

In addition to swapping out the entire List View with a Custom View, you can also override individual components. This allows you to customize specific parts of the List View without swapping out the entire view for your own.

To override List View components for a Collection, use the admin.components property in your Collection Config:

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

The following options are available:

Path

Description

beforeList

An array of custom components to inject before the list of documents in the List View. More details.

beforeListTable

An array of custom components to inject before the table of documents in the List View. More details.

afterList

An array of custom components to inject after the list of documents in the List View. More details.

afterListTable

An array of custom components to inject after the table of documents in the List View. More details.

Description

A component to render a description of the Collection. More details.

beforeList

The beforeList property allows you to inject custom components before the list of documents in the List View.

To add beforeList components, use the components.beforeList property in your Collection Config:

1
import type { CollectionConfig } from 'payload'
2
3
export const MyCollection: CollectionConfig = {
4
// ...
5
admin: {
6
components: {
7
beforeList: [
8
'/path/to/MyBeforeListComponent',
9
],
10
},
11
},
12
}

Here's an example of a custom beforeList component:

Server Component

1
import React from 'react'
2
import type { BeforeListServerProps } from 'payload'
3
4
export function MyBeforeListComponent(props: BeforeListServerProps) {
5
return (
6
<div>
7
This is a custom beforeList component (Server)
8
</div>
9
)
10
}

Client Component

1
'use client'
2
import React from 'react'
3
import type { BeforeListClientProps } from 'payload'
4
5
export function MyBeforeListComponent(props: BeforeListClientProps) {
6
return (
7
<div>
8
This is a custom beforeList component (Client)
9
</div>
10
)
11
}

beforeListTable

The beforeListTable property allows you to inject custom components before the table of documents in the List View.

To add beforeListTable components, use the components.beforeListTable property in your Collection Config:

1
import type { CollectionConfig } from 'payload'
2
3
export const MyCollection: CollectionConfig = {
4
// ...
5
admin: {
6
components: {
7
beforeListTable: [
8
'/path/to/MyBeforeListTableComponent',
9
],
10
},
11
},
12
}

Here's an example of a custom beforeListTable component:

Server Component

1
import React from 'react'
2
import type { BeforeListTableServerProps } from 'payload'
3
4
export function MyBeforeListTableComponent(props: BeforeListTableServerProps) {
5
return (
6
<div>
7
This is a custom beforeListTable component (Server)
8
</div>
9
)
10
}

Client Component

1
'use client'
2
import React from 'react'
3
import type { BeforeListTableClientProps } from 'payload'
4
5
export function MyBeforeListTableComponent(props: BeforeListTableClientProps) {
6
return (
7
<div>
8
This is a custom beforeListTable component (Client)
9
</div>
10
)
11
}

afterList

The afterList property allows you to inject custom components after the list of documents in the List View.

To add afterList components, use the components.afterList property in your Collection Config:

1
import type { CollectionConfig } from 'payload'
2
3
export const MyCollection: CollectionConfig = {
4
// ...
5
admin: {
6
components: {
7
afterList: [
8
'/path/to/MyAfterListComponent',
9
],
10
},
11
},
12
}

Here's an example of a custom afterList component:

Server Component

1
import React from 'react'
2
import type { AfterListServerProps } from 'payload'
3
4
export function MyAfterListComponent(props: AfterListServerProps) {
5
return (
6
<div>
7
This is a custom afterList component (Server)
8
</div>
9
)
10
}

Client Component

1
'use client'
2
import React from 'react'
3
import type { AfterListClientProps } from 'payload'
4
5
export function MyAfterListComponent(props: AfterListClientProps) {
6
return (
7
<div>
8
This is a custom afterList component (Client)
9
</div>
10
)
11
}

afterListTable

The afterListTable property allows you to inject custom components after the table of documents in the List View.

To add afterListTable components, use the components.afterListTable property in your Collection Config:

1
import type { CollectionConfig } from 'payload'
2
3
export const MyCollection: CollectionConfig = {
4
// ...
5
admin: {
6
components: {
7
afterListTable: [
8
'/path/to/MyAfterListTableComponent',
9
],
10
},
11
},
12
}

Here's an example of a custom afterListTable component:

Server Component

1
import React from 'react'
2
import type { AfterListTableServerProps } from 'payload'
3
4
export function MyAfterListTableComponent(props: AfterListTableServerProps) {
5
return (
6
<div>
7
This is a custom afterListTable component (Server)
8
</div>
9
)
10
}

Client Component

1
'use client'
2
import React from 'react'
3
import type { AfterListTableClientProps } from 'payload'
4
5
export function MyAfterListTableComponent(props: AfterListTableClientProps) {
6
return (
7
<div>
8
This is a custom afterListTable component (Client)
9
</div>
10
)
11
}

Description

The Description property allows you to render a custom description of the Collection in the List View.

To add a Description component, use the components.Description property in your Collection Config:

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

Here's an example of a custom Description component:

Server Component

1
import React from 'react'
2
import type { ViewDescriptionServerProps } from 'payload'
3
4
export function MyDescriptionComponent(props: ViewDescriptionServerProps) {
5
return (
6
<div>
7
This is a custom Collection description component (Server)
8
</div>
9
)
10
}

Client Component

1
'use client'
2
import React from 'react'
3
import type { ViewDescriptionClientProps } from 'payload'
4
5
export function MyDescriptionComponent(props: ViewDescriptionClientProps) {
6
return (
7
<div>
8
This is a custom Collection description component (Client)
9
</div>
10
)
11
}
Next

Authentication Overview