> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frogbot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# List View

The List View displays, filters, sorts, and paginates the documents in a [Collection](https://docs.frogbot.ai/configuration/collections.md). You can replace the view or add components around its table.

## Custom List View

Use a custom entry in `admin.views` to replace the collection list. `shell: false` replaces the complete collection area and requires this to be the only view:

```ts theme={"theme":"tokyo-night"}
import type { CollectionConfig } from 'frogbot'

export const Posts: CollectionConfig = {
  slug: 'posts',
  admin: {
    views: [
      {
        type: 'custom',
        component: '/components/PostsList#PostsList',
        shell: false,
      },
    ],
  },
  fields: [],
}
```

The custom Server Component receives `AdminViewServerProps`. Fetch any data it needs with the current request and access enforcement:

```tsx theme={"theme":"tokyo-night"}
import type { AdminViewServerProps } from 'frogbot'

export async function PostsList({ initPageResult }: AdminViewServerProps) {
  const { req } = initPageResult
  const result = await req.frogbot.find({
    collection: 'posts',
    req,
    overrideAccess: false,
  })

  return <p>{result.totalDocs} posts</p>
}
```

To retain the built-in table, filters, sorting, and pagination, use a `type: 'list'` entry and customize its slots instead. A custom view owns its content and can pass serializable data to its own Client Components.

FrogBot also supports multiple collection views through `admin.views`, including the [board](https://docs.frogbot.ai/admin/collection-board.md) and [calendar](https://docs.frogbot.ai/admin/collection-calendar.md) views. Every list and custom view option, including the list slots below, is listed in [Collection Views](https://docs.frogbot.ai/configuration/collections.md#collection-views).

## Custom Components

Configure list slots on the list entry's `components` object in `admin.views`. The shared collection `Description` remains under `admin.components`:

```ts theme={"theme":"tokyo-night"}
import type { CollectionConfig } from 'frogbot'

export const Posts: CollectionConfig = {
  slug: 'posts',
  admin: {
    views: [
      {
        type: 'list',
        components: {
          beforeView: ['/components/ListNotice#ListNotice'],
          toolbar: ['/components/ExportButton#ExportButton'],
          beforeTable: ['/components/ListSummary#ListSummary'],
          afterTable: ['/components/ListFooter#ListFooter'],
          afterView: ['/components/ListHelp#ListHelp'],
          NoResults: '/components/NoPosts#NoPosts',
        },
      },
    ],
    components: {
      CreateButton: '/components/NewPostButton#NewPostButton',
      Description: '/components/PostsDescription#PostsDescription',
    },
  },
  fields: [],
}
```

Each slot has Server and Client Component props. Import the matching type from `frogbot`, such as `BeforeListServerProps`, `BeforeListClientProps`, `BeforeListTableServerProps`, `BeforeListTableClientProps`, `AfterListServerProps`, `AfterListClientProps`, `AfterListTableServerProps`, or `AfterListTableClientProps`.

### beforeList

The `beforeView` slot renders before the document list and its controls. Its prop types retain the `BeforeList` name.

```tsx theme={"theme":"tokyo-night"}
import type { BeforeListServerProps } from 'frogbot'

export function ListNotice({ data }: BeforeListServerProps) {
  return <p>Showing {data.totalDocs} documents.</p>
}
```

### beforeListTable

The `beforeTable` slot renders immediately before the table. Its prop types retain the `BeforeListTable` name.

```tsx theme={"theme":"tokyo-night"}
'use client'

import type { BeforeListTableClientProps } from 'frogbot'

export function ListSummary({ collectionSlug }: BeforeListTableClientProps) {
  return <p>Results for {collectionSlug}</p>
}
```

### afterListTable

The `afterTable` slot renders immediately after the table. Its prop types retain the `AfterListTable` name.

```tsx theme={"theme":"tokyo-night"}
import type { AfterListTableServerProps } from 'frogbot'

export function ListFooter({ limit }: AfterListTableServerProps) {
  return <p>Up to {limit} documents per page.</p>
}
```

### afterList

The `afterView` slot renders after the complete list view. Its prop types retain the `AfterList` name.

```tsx theme={"theme":"tokyo-night"}
'use client'

import type { AfterListClientProps } from 'frogbot'

export function ListHelp({ hasCreatePermission }: AfterListClientProps) {
  return hasCreatePermission ? <a href="/collections/posts/create">Create a post</a> : null
}
```

### toolbar

The `toolbar` slot renders in the list controls toolbar, before Filters. Below the small breakpoint it moves beside the row-selection controls, which show only when the list has rows. It is not shown in relationship drawers. Each component receives `collectionSlug`, `hasCreatePermission`, `hasDeletePermission` and `newDocumentURL`, plus the list's server props when it is a Server Component.

```tsx theme={"theme":"tokyo-night"}
'use client'

export function ExportButton({ collectionSlug }: { collectionSlug: string }) {
  return <a href={`/api/${collectionSlug}/export`}>Export</a>
}
```

### NoResults

`NoResults` replaces the empty state shown when the list has no documents. It is not shown in relationship drawers.

```tsx theme={"theme":"tokyo-night"}
export function NoPosts() {
  return <p>No posts yet. Draft one to get started.</p>
}
```

### CreateButton

`admin.components.CreateButton` replaces the **Create New** button where it sits: in the toolbar after the layout toggle, before the ⋮ menu, and in the list's empty state (unless the view sets `NoResults`). It does the same on board and calendar views, which have no Create New of their own, and renders in no trash view or relationship drawer. Below the small breakpoint it follows `toolbar`, and on a list with no rows it shows only in the empty state.

It always renders, so it decides what a user without `create` access sees. It receives `collectionSlug`, `hasCreatePermission` and `newDocumentURL`; `create` access still governs REST and GraphQL create, the document view and relationship drawers. To match Create New, use the admin `Button` with `buttonStyle="primary"` and `size="medium"`:

```tsx theme={"theme":"tokyo-night"}
'use client'

import { Button } from '@frogbotai/ui/admin'

export function NewPostButton({ newDocumentURL }: { newDocumentURL: string }) {
  return (
    <Button buttonStyle="primary" el="link" size="medium" to={newDocumentURL}>
      New post
    </Button>
  )
}
```

### Description

`Description` replaces the description below the collection label. It is shared by the List and [Edit Views](https://docs.frogbot.ai/custom-components/edit-view.md).

```tsx theme={"theme":"tokyo-night"}
import type { ViewDescriptionServerProps } from 'frogbot'

export function PostsDescription(_props: ViewDescriptionServerProps) {
  return <p>Editorial posts shown on the website.</p>
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.