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.

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

Here is an example of a custom List View:

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

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:

The following options are available:

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:

Here's an example of a custom beforeList component:

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:

Here's an example of a custom beforeListTable component:

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:

Here's an example of a custom afterList component:

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:

Here's an example of a custom afterListTable component:

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:

Here's an example of a custom Description component: