Define a view

A view is a typed object that says: for this collection, show this subset of documents, in this shape, with these columns and these verbs. defineView is a helper that returns the same object — it exists for types and discoverability, not magic.

By the end you'll know every top-level option on ViewConfig, what each one does, and what a minimal table vs. kanban definition looks like.

The mental model

One views entry becomes one sidebar item, one route (/collections/:slug/views/:viewSlug), and one persisted preference key. Dyrected does not copy data — every view reads the same collection.

Minimal table view

To configure a table view, specify a slug, label, and the columns you want visible:

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

export const attendingGuests = defineView({
  slug: "attending-guests",
  label: "Attending Guests",
  icon: "UserCheck",
  layout: "table",
  filter: { attending: { equals: true } },
  columns: ["name", "guestCount", "checkedIn"],
});

Dyrected synthesizes a table with search, sorting, and faceted filters. Layout defaults to table if you omit it.

Compound filters with OR and AND

To create specialized views matching multiple conditions or alternative criteria, use compound OR or AND clauses in your filter:

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

export const pendingLogistics = defineView({
  slug: "pending-logistics",
  label: "Pending Logistics",
  icon: "Package",
  layout: "table",
  filter: {
    OR: [
      { asoebiPaymentStatus: { equals: "pending" } },
      { asoebiOrderStatus: { equals: "unfulfilled" } },
    ],
  },
  columns: ["name", "asoebiPaymentStatus", "asoebiOrderStatus", "asoebiAmountPaid"],
});

Logical operators are case-insensitive (OR / or, AND / and) and can be combined with field-level filters.

Kanban board view

Kanban views require a groupBy field to determine which field values represent the board's columns:

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

const markPaidAction = defineAction({
  name: "markPaid",
  label: "Mark Paid",
  type: "row",
  mutation: { asoebiStatus: "paid" },
});

export const asoebiPipeline = defineView({
  slug: "asoebi-pipeline",
  label: "Asoebi Fulfillment",
  icon: "Shirt",
  layout: "kanban",
  filter: { asoebi: { equals: true } },
  groupBy: "asoebiStatus",
  columns: ["name", "asoebiSize", "asoebiQuantity"],
  actions: [markPaidAction],
});

Calendar schedule view

Calendar views require a dateField containing an ISO date string to position documents onto the calendar grid:

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

export const tastingSchedule = defineView({
  slug: "tasting-schedule",
  label: "Tasting Schedule",
  icon: "Calendar",
  layout: "calendar",
  dateField: "appointmentDate",
  columns: ["name", "guestCount"],
});

Adding view-specific component slots

If you want a custom widget, header banner, or toolbar extension on a specific view rather than across the whole collection, declare components directly inside defineView:

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

export const asoebiPipeline = defineView({
  slug: "asoebi-pipeline",
  label: "Asoebi Fulfillment",
  icon: "Shirt",
  layout: "kanban",
  groupBy: "asoebiStatus",
  components: {
    beforeViewHeader: ["fulfillment-legend"],
    afterViewHeader: ["pipeline-kpi-summary"],
    beforeViewContent: ["kanban-filter-banner"],
    afterViewContent: ["fulfillment-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 extensions.

Setting a default view

To make a view the default landing page for a collection, set defaultView on the collection config pointing to the view's slug:

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

export const attendingGuests = defineView({
  slug: "attending-guests",
  label: "Attending Guests",
  icon: "UserCheck",
  layout: "table",
  filter: { attending: { equals: true } },
  columns: ["name", "guestCount", "checkedIn"],
});

export const GuestResponses = defineCollection({
  slug: "guest-responses",
  defaultView: "attending-guests",
  views: [attendingGuests],
  fields: [
    // ...
  ],
});

When defaultView is set:

• Navigating to /collections/guest-responses redirects automatically to /collections/guest-responses/views/attending-guests.
• The sidebar's primary collection link opens the default view directly.
• The sidebar submenu cleanly lists your defined operational views without displaying a generic All [Collection] item.

Configuration options

All options are optional except slug and label:

Defaults and fallbacks

• Hidden fields: Metadata fields like createdAt, updatedAt, id, and join fields are automatically excluded when Dyrected infers default columns.
• Search: Every view inherits the collection's admin.searchableFields (or useAsTitle fallback). Search runs on the backend for fast querying across large datasets.

Next steps

• Draw records your own way — Custom View Layouts
• Layout details — Table, Kanban, Calendar, Cards, Spreadsheet
• Add workflow buttons — Actions
• Add KPI summary cards — Metrics
• Best practices & anti-patterns — UX guidelines