List View

The List View displays, filters, sorts, and paginates the documents in a Collection. 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:

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:

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 and calendar views. Every list and custom view option, including the list slots below, is listed in 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:

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.

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.

'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.

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.

'use client'

import type { AfterListClientProps } from 'frogbot'

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

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.

'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.

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":

'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.

import type { ViewDescriptionServerProps } from 'frogbot'

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

Start here

Basics

Managing Data

Features

Ecosystem

Deployment

Custom List View

Custom Components

beforeList

beforeListTable

afterListTable

afterList

NoResults

CreateButton

Description

​Custom List View

​Custom Components

​beforeList

​beforeListTable

​afterListTable

​afterList

​toolbar

​NoResults

​CreateButton

​Description

Custom List View

Custom Components

beforeList

beforeListTable

afterListTable

afterList

toolbar

NoResults

CreateButton

Description