Database View

Usage

• Use DatabaseView to embed a full database block (title, view tabs, toolbar, layout) in a page.
• Pass db from useDatabase() when other parts of the page read or write the same rows; pass data for a self-contained block.
• Pass onOpenRow and render the shell’s SidePeek for the full page chrome; the built-in row peek is a minimal fallback.
• Use hideTitle when the surrounding page already shows the database name.
• Don’t use DatabaseView for a read-only grid of figures; use Table or DataTable instead.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { DatabaseView, createTasksSample, SAMPLE_TODAY } from '@krackedui/motion';

export function Demo() {
  return <DatabaseView data={createTasksSample()} initialViewId="v-board" today={SAMPLE_TODAY} />;
}

Examples

Filter menu open

defaultOpenMenu opens one toolbar menu on mount (docs and lab use it to show menu states).

Active filter and sort

A view with rules shows the rule pills under the toolbar; the toolbar icons turn blue.

Custom row opening

Pass onOpenRow to open rows in your own peek or route instead of the built-in one.

Without title

Full-page databases show the page title instead: hideTitle.

Composition

<DatabaseView>                       // owns menu + peek state, provides DatabaseApi
  title                               // collection.name, 24/31.2 600 (hideTitle to drop)
  tablist  → ViewTab × n, "N more…"   // → ViewsMenu + NewViewMenu
  toolbar  → Filter (FilterMenu) · Sort (SortMenu) · Automations · AI · Search
             · Open as full page · Settings (ViewSettingsPanel) · New ▾
  rule pills → SortEditor / FilterEditor popovers
  body     → TableView | BoardView | GalleryView | ListView | CalendarView | TimelineView | ChartView
  row peek → PropertyList (when onOpenRow is not given)
</DatabaseView>

API Reference

DatabaseView

Pass data (uncontrolled) or db (controlled useDatabase() instance).

Accessibility

• View tabs: role="tablist" of role="tab" buttons with aria-selected; Tab moves between them, Enter/Space switches view.
• Toolbar buttons are icon buttons with aria-label and title (Filter, Sort, Automations, AI Autofill, Search, Open as full page, Settings, More add options).
• Menus open in Radix popovers: Escape closes, focus returns to the trigger; inside, ArrowUp/ArrowDown move and Enter selects. Search field: Escape clears and closes.
• The row peek is a role="dialog" labelled by the page title; Escape closes it.