List View

The collection list is where editors browse, filter, and act on records. You can't rebuild it, but you can add your own components around it: a header with a custom action, a banner above the table, a summary row or custom pagination below. Dyrected gives you four slots on every collection list for this — now aliased as operational view slots so the same content mounts inside table/kanban/calendar/cards/spreadsheet workspaces. See Routing and preferences for the mapping.

By the end of this page you should know the four list slots (and their view aliases), the rich set of props your slot components receive, and how to register them per collection. This page assumes the declare-then-provide pattern from the Custom Components overview.

The four slots (and their view aliases)

A collection list has four injection points, top to bottom. The names below are the legacy beforeList keys — they still work inside operational views via an alias, with new beforeView* names preferred:

Dyrected seamlessly bridges beforeList to beforeViewHeader and other slot keys, ensuring existing custom component registrations continue functioning across all operational layouts.

Each slot accepts an array of component keys so you can stack multiple extensions. Declare slot components per collection under admin.components:

import { defineCollection, defineTextField } from "@dyrected/core";

export const Posts = defineCollection({
  slug: "posts",
  admin: {
    components: {
      beforeList: ["posts-header"],
      afterListTable: ["posts-summary"],
    },
  },
  fields: [
    defineTextField({ name: "title", label: "Title", required: true }),
    defineTextField({ name: "slug", label: "Slug", unique: true }),
  ],
});

Then register the components under the collectionList group when you mount the admin, matched by the same keys:

import { DyrectedAdmin } from "@dyrected/next/admin";
import { PostsHeader } from "./PostsHeader";
import { PostsSummary } from "./PostsSummary";

export default function AdminPage() {
  return (
    <DyrectedAdmin
      components={{
        collectionList: {
          "posts-header": PostsHeader,
          "posts-summary": PostsSummary,
        },
      }}
    />
  );
}

The registry key is the slot-key name you declared ("posts-header"), not the collection slug — the component renders wherever that key appears in a collection's slot lists. A key with no matching component is skipped (with a dev warning), and a component that throws is isolated by an error boundary so the list still renders.

View-specific component slots (defineView)

If a collection has multiple operational views (such as a Kanban pipeline, a Calendar schedule, and a standard Table), you might only want a custom widget on a single view rather than all of them.

You can declare component slots directly inside defineView:

import { defineView } from "@dyrected/core";

export const kanbanPipeline = defineView({
  slug: "pipeline",
  label: "Pipeline",
  layout: "kanban",
  groupBy: "status",
  components: {
    beforeViewHeader: ["kanban-legend"],
    afterViewHeader: ["pipeline-kpi-summary"],
    beforeViewContent: ["kanban-filter-banner"],
    afterViewContent: ["kanban-footer-stats"],
  },
});

When both collection-wide slots (collection.admin.components) and view-specific slots (view.components) are defined, Dyrected cleanly merges them in hierarchical order (collection banners render first, followed by view-specific widgets). Register the components under components.collectionView or components.collectionList in <DyrectedAdmin />.

Collection-wide vs. View-specific slots

What your component receives

List slot components get everything about the current list — the data, its loading and pagination state, the user's permissions, and links — so they can render summaries, actions, or context without re-fetching:

For example, a summary that shows the total count below the table:

import type { CollectionListSlotProps } from "@dyrected/admin";

export function PostsSummary({ pagination, isLoading }: CollectionListSlotProps) {
  if (isLoading) return null;
  return (
    <div className="dy-px-4 dy-py-2 dy-text-sm dy-text-muted-foreground">
      {pagination.total} posts total
    </div>
  );
}

Because you receive documents, pagination, and permissions, most list add-ons need no data fetching of their own — read what's already there. Reach for client only when you need something the list didn't load.

Slots inside operational views

When these slots render inside an operational view, your component receives the documents the active layout has loaded. documents and isLoading reflect what is on screen, and the view's own slot props (viewSlug, view) are included.

The legacy list keys (beforeList, afterListTable, and the rest) are not quite the same as on a plain collection list. response is undefined, and pagination describes a single page with total equal to the number of documents loaded, not the server's total. For the true total, paging, filters, and selection, read the view's state with useCollectionView():

import { useCollectionView } from "@dyrected/react";

export function ArrivalsSummary() {
  const { documents, total, isFetching } = useCollectionView();

  return (
    <p aria-live="polite">
      {isFetching ? "Updating…" : `${documents.length} of ${total} guests loaded`}
    </p>
  );
}

useCollectionView() is documented with the rest of the view hooks in Custom View Layouts. It works in any view slot, whichever layout the view uses.

Using Vue components

In a Vue or Nuxt app, register Vue components in the same collectionList map; they're wrapped automatically and receive the props above as Vue props. See the overview.

Recommended path

Use beforeList for a header or collection-level action, beforeListTable for a banner or notice, and afterListTable / afterList for summaries and totals. Read from the props you're given — documents, pagination, permissions — before reaching for client. For components on the dashboard instead, see Dashboard.