torch-glare 2.1.3 → 2.1.5

package/apps/lib/components/DataViews/DataViewsLayout.tsx

@@ -7,6 +7,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type ElementType,
   type ReactNode,
 } from "react";
 import { List, LayoutGrid, Inbox as InboxIcon, Network } from "lucide-react";
@@ -61,6 +62,12 @@ export type DataViewsLayoutProps = {
   addNewLabel?: string;
 
   inboxItemHref?: (item: DynamicRecord, id: any) => string;
+  /**
+   * Component used to render inbox item links when `inboxItemHref` is set.
+   * Defaults to a plain `<a>` (full-page navigation). Pass your router's link
+   * (e.g. Next.js `Link`, React Router `Link`) for client-side navigation.
+   */
+  inboxLinkComponent?: ElementType;
   inboxSelectedId?: any;
   inboxRenderDetail?: (item: DynamicRecord | null) => ReactNode;
 
@@ -108,6 +115,7 @@ export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
       onAddNew,
       addNewLabel,
       inboxItemHref,
+      inboxLinkComponent,
       inboxSelectedId,
       inboxRenderDetail,
       searchValue,
@@ -276,6 +284,7 @@ export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
                     onFilterChange={setFilterState}
                     showFilters={false}
                     itemHref={inboxItemHref}
+                    linkComponent={inboxLinkComponent}
                     selectedItemId={inboxSelectedId}
                     renderDetail={inboxRenderDetail}
                   />

package/apps/lib/components/DataViews/FilterPanel.tsx

@@ -222,7 +222,8 @@ export function FilterPanel({
               <Badge
                 {...countBadge}
                 label={String(totalFilters)}
-                className="h-5 min-w-[20px] rounded-full p-0 text-xs"
+                showIcon={false}
+                className="h-5 w-5 min-w-0 justify-center rounded-full p-0 text-xs"
                 size="XS"
               />
             )}
@@ -270,9 +271,9 @@ export function FilterPanel({
             <Badge
               {...countBadge}
               label={String(totalFilters)}
-              className="h-5 min-w-[20px] rounded-full p-0 text-xs"
+              showIcon={false}
+              className="h-5 w-5 min-w-0 justify-center rounded-full p-0 text-xs"
               size="XS"
-
             />
           )}
         </div>

package/apps/lib/components/DataViews/InboxView.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type ElementType,
+  type ReactNode,
+} from "react";
 import { Badge } from "../Badge";
 import { FilterPanel } from "./FilterPanel";
 import {
@@ -57,6 +63,12 @@ export type InboxViewProps = {
   onFilterChange?: (filters: FilterState) => void;
   showFilters?: boolean;
   itemHref?: (item: DynamicRecord, id: any) => string;
+  /**
+   * Component used to render each item's link when `itemHref` is set. Defaults
+   * to a plain `<a>` (full-page navigation). Pass your router's link
+   * (e.g. Next.js `Link`, React Router `Link`) for client-side navigation.
+   */
+  linkComponent?: ElementType;
   selectedItemId?: any;
   renderDetail?: (item: DynamicRecord | null) => ReactNode;
 };
@@ -100,6 +112,7 @@ export function InboxView({
   onFilterChange,
   showFilters = true,
   itemHref,
+  linkComponent,
   selectedItemId,
   renderDetail,
 }: InboxViewProps) {
@@ -350,6 +363,7 @@ export function InboxView({
                 selected={selected}
                 onSelect={() => handleSelectItem(item)}
                 href={itemHref?.(item, itemId)}
+                linkComponent={linkComponent}
               />
             );
           })}

package/dist/src/shared/getDependenciesAndInstallNestedComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getDependenciesAndInstallNestedComponents.d.ts","sourceRoot":"","sources":["../../../cli/src/shared/getDependenciesAndInstallNestedComponents.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yCAAyC,CACrD,aAAa,EAAE,MAAM,EACrB,qBAAqB,EAAE,GAAG,CAAC,MAAM,CAAC,GACnC,GAAG,CAAC,MAAM,CAAC,CAgEb"}
+{"version":3,"file":"getDependenciesAndInstallNestedComponents.d.ts","sourceRoot":"","sources":["../../../cli/src/shared/getDependenciesAndInstallNestedComponents.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yCAAyC,CACrD,aAAa,EAAE,MAAM,EACrB,qBAAqB,EAAE,GAAG,CAAC,MAAM,CAAC,GACnC,GAAG,CAAC,MAAM,CAAC,CAsEb"}

package/dist/src/shared/getDependenciesAndInstallNestedComponents.js

@@ -2,6 +2,7 @@ import * as fs from "fs";
 import * as path from "path";
 import { addUtil } from "../commands/utils.js";
 import { addHook } from "../commands/hook.js";
+import { addLayout } from "../commands/layout.js";
 import { add } from "../commands/add.js";
 /**
  * Walk a copied component file's imports and (a) collect 3rd-party deps to
@@ -65,6 +66,13 @@ export function getDependenciesAndInstallNestedComponents(componentPath, install
                 addHook(`${hookEntry}.ts`);
             }
         }
+        else if (head === "layouts") {
+            // layouts/DataViewCard → copy from apps/lib/layouts (NOT components)
+            const layoutEntry = rest[1];
+            if (layoutEntry) {
+                addLayout(layoutEntry);
+            }
+        }
         else if (head === "components") {
             const compEntry = rest[1];
             if (compEntry) {
@@ -126,7 +134,7 @@ function routeByLocation(absPath) {
             addUtil(entry);
             break;
         case "layouts":
-            add(stripExt(entry));
+            addLayout(stripExt(entry));
             break;
     }
 }

package/dist/src/shared/getDependenciesAndInstallNestedComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"getDependenciesAndInstallNestedComponents.js","sourceRoot":"","sources":["../../../cli/src/shared/getDependenciesAndInstallNestedComponents.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"getDependenciesAndInstallNestedComponents.js","sourceRoot":"","sources":["../../../cli/src/shared/getDependenciesAndInstallNestedComponents.ts"],"names":[],"mappings":"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"}

package/docs/components/data-views-layout.md

@@ -140,6 +140,8 @@ Inbox auto-detects `isRead`, `isStarred`, `hasAttachment`, `priority`. Override
 | `views` | `ViewVisibility` | all on (tree auto) | Per-view toggle: `{ table?, kanban?, inbox?, tree? }`. Omitted keys default to `true` (Tree auto-hides without hierarchy). |
 | `kanbanGroupBy` | `string` | `"status"` | Dot-path to the field used for Kanban columns. |
 | `inboxConfig` | `InboxConfig` | auto-detected | Map of starred/read/attachment/priority field paths for Inbox. |
+| `inboxItemHref` | `(item, id) => string` | — | When set, each Inbox row becomes a link to the returned href. |
+| `inboxLinkComponent` | `ElementType` | `"a"` | Component used to render Inbox item links when `inboxItemHref` is set. Pass your router's link (Next.js `Link`, React Router `Link`) for client-side navigation; defaults to a plain `<a>` (full-page nav). |
 | `treeConfig` | `TreeConfig` | auto-detected | `childrenField`, `parentField`, `idField`, `nodeLabel`, `defaultExpanded`. |
 | `filterState` | `FilterState` | uncontrolled | Controlled filter state. Pair with `onFilterChange`. |
 | `onFilterChange` | `(state: FilterState) => void` | — | Fires when any filter changes. When provided, the layout is controlled. |

package/docs/components/inbox-view.md

@@ -0,0 +1,159 @@
+---
+title: InboxView
+description: Standalone inbox/list view for DataViews — a master list with read/starred/priority states and an optional detail pane. Use inside DataViewsLayout (tab mode) or directly in Composable Mode.
+group: Data Display
+keywords: [data-views, inbox-view, inbox, list, master-detail, read, starred, priority, attachment, composable, dynamic-data]
+---
+
+# InboxView
+
+> The inbox renderer behind `DataViewsLayout`'s "Inbox" tab. It renders records as a scannable list with read / starred / priority / attachment affordances, plus an optional detail pane. In tab mode the layout renders it for you; render it directly only in **Composable Mode**.
+
+## Installation
+
+Part of `torch-glare`. Ships with the `DataViews` folder when you run `npx torch-glare add DataViews` — no separate install. It depends on the shared `Badge`, `Button`, `Avatar`, `Card`, `Divider`, and `TabFormItem` components plus `lucide-react`.
+
+## Import
+
+```tsx
+import { InboxView, useDataViewsState } from "torch-glare"
+import type { InboxViewProps, InboxConfig, FieldConfig } from "torch-glare"
+```
+
+## When to use it directly
+
+| Situation | Use |
+|---|---|
+| You want the standard tabbed multi-view UI | `DataViewsLayout` with `views={{ inbox: true }}` — it mounts `InboxView` for you. |
+| You want a custom master-detail layout | Render `InboxView` directly with state from `useDataViewsState`, and supply `renderDetail`. |
+
+## Field auto-detection
+
+InboxView auto-detects these record fields and maps them to UI affordances.
+Override any of them with `inboxConfig`.
+
+| Detected field | Affordance |
+|---|---|
+| `isRead` | Read/unread weight |
+| `isStarred` | Star toggle |
+| `hasAttachment` | Paperclip icon |
+| `priority` | Priority flag |
+
+## Composable Mode example
+
+```tsx
+import { InboxView, useDataViewsState } from "torch-glare"
+import type { FieldConfig, InboxConfig } from "torch-glare"
+
+const messages = [
+  { id: 1, subject: "Welcome", from: { name: "Ada" }, isRead: false, isStarred: true, sentAt: "2024-06-01" },
+  { id: 2, subject: "Invoice", from: { name: "Billing" }, isRead: true, hasAttachment: true, sentAt: "2024-06-02" },
+]
+
+const fields: FieldConfig[] = [
+  { path: "subject", type: "text" },
+  { path: "from.name", label: "From", type: "text" },
+  { path: "sentAt", type: "date-format", dateFormat: "YYYY-MM-DD" },
+]
+
+const inboxConfig: InboxConfig = {
+  titlePath: "subject",
+  previewPath: "from.name",
+  dateField: "sentAt",
+}
+
+function Mailbox() {
+  const state = useDataViewsState({ data: messages, fields })
+  const [selectedId, setSelectedId] = useState<number | null>(null)
+  return (
+    <InboxView
+      data={state.flatItems}
+      fields={state.resolvedFields}
+      config={state.config}
+      inboxConfig={inboxConfig}
+      selectedItemId={selectedId}
+      renderDetail={(item) =>
+        item ? <MessageDetail message={item} /> : <Empty />
+      }
+    />
+  )
+}
+```
+
+### Link rows to routes (framework-agnostic)
+
+`itemHref` turns each row into a link. By default the card renders a plain `<a>`
+(full-page navigation), so it works in any framework. For client-side routing,
+pass your router's link via `linkComponent` — this is what makes navigation
+behave consistently across environments. Without it you get a normal `<a>`.
+
+```tsx
+// Next.js
+import Link from "next/link"
+
+<InboxView
+  data={state.flatItems}
+  fields={state.resolvedFields}
+  config={state.config}
+  itemHref={(item, id) => `/messages/${id}`}
+  linkComponent={Link}        // React Router users pass their <Link> the same way
+/>
+```
+
+> Via `DataViewsLayout` (tab mode) the same prop is named `inboxLinkComponent`.
+
+## API Reference
+
+### `InboxViewProps`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `data` | `DynamicRecord[]` | — (required) | Records to render as list items. Pass `state.flatItems`. |
+| `fields` | `FieldConfig[]` | — (required) | Field map controlling list-item content. Pass `state.resolvedFields`. |
+| `config` | `ViewConfig` | — (required) | View config from `useDataViewsState`. |
+| `inboxConfig` | `InboxConfig` | auto-detected | Overrides for which record paths map to title/preview/avatar/date/read/starred/attachment/priority. |
+| `columns` | `DynamicColumnConfig[]` | `undefined` | Explicit column overrides. Usually derived from `fields`. |
+| `onDataUpdate` | `(data: DynamicRecord[]) => void` | `undefined` | Called when item data changes (e.g. toggling read/starred). |
+| `filters` | `DynamicFilterConfig[]` | `undefined` | Explicit filter definitions. Usually inferred from `filterable` fields. |
+| `filterState` | `FilterState` | uncontrolled | Controlled filter state. Pair with `onFilterChange`. |
+| `onFilterChange` | `(filters: FilterState) => void` | `undefined` | Fires when a filter changes. |
+| `showFilters` | `boolean` | `true` | Show the integrated filter panel. |
+| `itemHref` | `(item: DynamicRecord, id: any) => string` | `undefined` | When set, each row becomes a link to the returned href. |
+| `linkComponent` | `ElementType` | `"a"` | Component used to render each item's link when `itemHref` is set. Pass your router's link (Next.js `Link`, React Router `Link`) for client-side navigation. Defaults to a plain `<a>` (full-page nav). |
+| `selectedItemId` | `any` | `undefined` | Id of the currently selected row (drives the detail pane + highlight). |
+| `renderDetail` | `(item: DynamicRecord \| null) => ReactNode` | `undefined` | Renders the right-hand detail pane for the selected item. |
+
+### `InboxConfig`
+
+```ts
+type InboxConfig = {
+  starredField?: string
+  readField?: string
+  attachmentField?: string
+  priorityField?: string
+  titlePath?: string
+  previewPath?: string
+  avatarPath?: string
+  dateField?: string
+}
+```
+
+See [`DataViewsLayout`](./data-views-layout.md#fieldconfig) for `FieldConfig`,
+`FilterState`, and related shapes.
+
+## Accessibility
+
+- The all/starred/priority switcher uses [`TabFormItem`](./tab-form-item.md) (full keyboard support).
+- Star/archive/delete actions are real `<button>`s with accessible labels.
+- Avatars fall back to initials via [`Avatar`](./avatar.md).
+
+## Theming
+
+Uses only `*-presentation-*` design tokens. Control the scheme via the parent
+`DataViewsLayout`'s `theme`.
+
+## Related
+
+- [`DataViewsLayout`](./data-views-layout.md) — the tabbed container that renders this for you
+- [`TableView`](./table-view.md) · [`KanbanView`](./kanban-view.md) · [`TreeView`](./tree-view.md) — sibling views
+- [How-to: Render a backend response with DataViews](../how-to/data-views-from-backend-response.md)

package/docs/components/kanban-view.md

@@ -0,0 +1,125 @@
+---
+title: KanbanView
+description: Standalone kanban board view for DataViews — groups records into columns by a field and renders each as a card. Use inside DataViewsLayout (tab mode) or directly in Composable Mode.
+group: Data Display
+keywords: [data-views, kanban-view, kanban, board, columns, group-by, cards, composable, dynamic-data, fields]
+---
+
+# KanbanView
+
+> The board renderer behind `DataViewsLayout`'s "Board" tab. It groups records into columns by `groupByField` and renders each record as a card. In tab mode the layout renders it for you; render it directly only in **Composable Mode**.
+
+## Installation
+
+Part of `torch-glare`. Ships with the `DataViews` folder when you run `npx torch-glare add DataViews` — no separate install. It depends on the shared `Button` component, the `DataViewCard` layout, and `lucide-react`.
+
+## Import
+
+```tsx
+import { KanbanView, useDataViewsState } from "torch-glare"
+import type { KanbanViewProps, FieldConfig } from "torch-glare"
+```
+
+## When to use it directly
+
+| Situation | Use |
+|---|---|
+| You want the standard tabbed multi-view UI | `DataViewsLayout` with `views={{ kanban: true }}` — it mounts `KanbanView` for you. |
+| You want a custom layout (e.g. kanban beside a table) | Render `KanbanView` directly with state from `useDataViewsState`. |
+
+## Composable Mode example
+
+`KanbanView` groups by the `groupByField` path — every distinct value becomes a
+column. Column colors are assigned deterministically, or per-value via the
+field's `kanbanVariants`.
+
+```tsx
+import { KanbanView, useDataViewsState } from "torch-glare"
+import type { FieldConfig } from "torch-glare"
+
+const tasks = [
+  { id: 1, title: "Spec API", status: "Todo", assignee: "Ada" },
+  { id: 2, title: "Build UI", status: "In Progress", assignee: "Linus" },
+  { id: 3, title: "Ship", status: "Done", assignee: "Grace" },
+]
+
+const fields: FieldConfig[] = [
+  { path: "title", type: "text" },
+  {
+    path: "status",
+    type: "enum-badge",
+    kanbanVariants: {
+      Todo: { label: "To Do", color: "gray" },
+      "In Progress": { label: "In Progress", color: "blue" },
+      Done: { label: "Done", color: "green" },
+    },
+  },
+  { path: "assignee", type: "text" },
+]
+
+function TaskBoard() {
+  const state = useDataViewsState({ data: tasks, fields })
+  return (
+    <KanbanView
+      data={state.flatItems}
+      fields={state.resolvedFields}
+      config={state.config}
+      groupByField="status"
+      titleField="title"
+    />
+  )
+}
+```
+
+### Column header actions
+
+Pass `onColumnAction` to show an overflow (⋯) button on each column header. When
+omitted the button is hidden.
+
+```tsx
+<KanbanView
+  data={state.flatItems}
+  fields={state.resolvedFields}
+  config={state.config}
+  groupByField="status"
+  onColumnAction={(columnId) => openColumnMenu(columnId)}
+/>
+```
+
+## API Reference
+
+### `KanbanViewProps`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `data` | `DynamicRecord[]` | — (required) | Records to group into columns. Pass `state.flatItems` in composable mode. |
+| `fields` | `FieldConfig[]` | — (required) | Field map controlling card content. Pass `state.resolvedFields`. |
+| `config` | `ViewConfig` | — (required) | View config from `useDataViewsState`. |
+| `groupByField` | `string` | `"status"` | Dot-path to the field whose distinct values become columns. |
+| `titleField` | `string` | first visible non-group field | Dot-path of the field rendered as the card title. |
+| `columns` | `DynamicColumnConfig[]` | `undefined` | Explicit column overrides. Usually derived from `fields`. |
+| `onDataUpdate` | `(data: DynamicRecord[]) => void` | `undefined` | Called when a card moves between columns (updates the group-by value). |
+| `onColumnAction` | `(columnId: string) => void` | `undefined` | Click handler for the column header overflow button. When omitted, the button is hidden. |
+
+Per-column colors come from each field's `kanbanVariants` map
+(`{ [value]: { label?, color? } }`). Available `color` keys: `gray`, `purple`,
+`orange`, `blue`, `green`, `red`. See
+[`DataViewsLayout`](./data-views-layout.md#fieldconfig) for the full
+`FieldConfig` shape.
+
+## Accessibility
+
+- Cards are keyboard-focusable; the column overflow button is a real `<button>`.
+- Card titles use semantic heading markup within each [`DataViewCard`](./card.md).
+
+## Theming
+
+Uses `*-presentation-*` tokens plus a small set of deeply-saturated column-header
+fills matched to `glare-torch-mode` raw tokens. Control the scheme via the
+parent `DataViewsLayout`'s `theme`.
+
+## Related
+
+- [`DataViewsLayout`](./data-views-layout.md) — the tabbed container that renders this for you
+- [`TableView`](./table-view.md) · [`InboxView`](./inbox-view.md) · [`TreeView`](./tree-view.md) — sibling views
+- [How-to: Render a backend response with DataViews](../how-to/data-views-from-backend-response.md)

package/docs/components/table-view.md

@@ -0,0 +1,131 @@
+---
+title: TableView
+description: Standalone table view for DataViews — sortable columns, row selection, and an integrated filter panel. Use inside DataViewsLayout (tab mode) or directly in Composable Mode.
+group: Data Display
+keywords: [data-views, table-view, table, sortable, columns, selection, filter, composable, dynamic-data, fields]
+---
+
+# TableView
+
+> The table renderer behind `DataViewsLayout`'s "List" tab. In tab mode the layout renders it for you. Render it directly only in **Composable Mode** (custom layouts), wiring it with `useDataViewsState`.
+
+## Installation
+
+Part of `torch-glare`. Ships with the `DataViews` folder when you run `npx torch-glare add DataViews` — no separate install. It depends on the shared `Card`, `Checkbox`, and `Table` components plus the colocated `FilterPanel`.
+
+## Import
+
+```tsx
+import { TableView, useDataViewsState } from "torch-glare"
+import type { TableViewProps, FieldConfig } from "torch-glare"
+```
+
+## When to use it directly
+
+| Situation | Use |
+|---|---|
+| You want the standard tabbed multi-view UI | `DataViewsLayout` — it mounts `TableView` for you. Don't render this yourself. |
+| You want a custom layout (e.g. table beside a kanban) | Render `TableView` directly with state from `useDataViewsState`. |
+| You only ever need a table and nothing else | Render `TableView` directly, or just use the simpler [`Table`](./table.md) / [`DataTable`](./data-table.md). |
+
+## Composable Mode example
+
+`TableView` is controlled — it does not own field detection or config. Pull those from `useDataViewsState` (which auto-detects fields and columns from your data) and pass them down.
+
+```tsx
+import { TableView, useDataViewsState } from "torch-glare"
+import type { FieldConfig } from "torch-glare"
+
+const employees = [
+  { id: 1, name: "Ada Lovelace", role: "Engineer", salary: 120000, joinDate: "2024-04-12" },
+  { id: 2, name: "Linus Torvalds", role: "Engineer", salary: 145000, joinDate: "2023-09-01" },
+]
+
+const fields: FieldConfig[] = [
+  { path: "name", label: "Name", type: "text" },
+  { path: "role", type: "text", filterable: true },
+  { path: "salary", type: "currency", currency: "USD" },
+  { path: "joinDate", type: "date-format", dateFormat: "YYYY-MM-DD" },
+]
+
+function EmployeesTable() {
+  const state = useDataViewsState({ data: employees, fields })
+  return (
+    <TableView
+      data={state.flatItems}
+      fields={state.resolvedFields}
+      config={state.config}
+      onSortChange={(sortBy, sortOrder) =>
+        state.setConfig({ ...state.config, sortBy, sortOrder })
+      }
+      filterState={state.filterState}
+      onFilterChange={state.setFilterState}
+    />
+  )
+}
+```
+
+### Hide the inline filter panel
+
+```tsx
+<TableView
+  data={state.flatItems}
+  fields={state.resolvedFields}
+  config={state.config}
+  showFilters={false}
+/>
+```
+
+### Controlled sorting
+
+`TableView` does not sort internally — it calls `onSortChange` and reads the
+active sort from `config.sortBy` / `config.sortOrder`. Wire it to your config
+state (or your backend) to make headers interactive.
+
+```tsx
+<TableView
+  data={rows}
+  fields={fields}
+  config={{ defaultView: "table", sortBy: "name", sortOrder: "asc" }}
+  onSortChange={(sortBy, sortOrder) => refetch({ sortBy, sortOrder })}
+/>
+```
+
+## API Reference
+
+### `TableViewProps`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `data` | `DynamicRecord[]` | — (required) | Flat array of rows to render. In composable mode pass `state.flatItems`. |
+| `fields` | `FieldConfig[]` | — (required) | Field map controlling which columns render and how cells format. Pass `state.resolvedFields` for auto-detected fields. |
+| `config` | `ViewConfig` | — (required) | View config. `sortBy` / `sortOrder` drive the active sort indicator. |
+| `columns` | `DynamicColumnConfig[]` | `undefined` | Explicit column overrides (visibility/order). Usually derived from `fields`. |
+| `onDataUpdate` | `(data: DynamicRecord[]) => void` | `undefined` | Called when row data changes (e.g. inline selection). |
+| `onSortChange` | `(sortBy: string, sortOrder: "asc" \| "desc") => void` | `undefined` | Fires on header click. When omitted, headers are not sortable. |
+| `filters` | `DynamicFilterConfig[]` | `undefined` | Explicit filter definitions. Usually inferred from `filterable` fields. |
+| `filterState` | `FilterState` | uncontrolled | Controlled filter state. Pair with `onFilterChange`. |
+| `onFilterChange` | `(filters: FilterState) => void` | `undefined` | Fires when a filter changes. When provided, the view is controlled. |
+| `showFilters` | `boolean` | `true` | Show the integrated filter panel. |
+
+`DynamicColumnConfig`, `DynamicFilterConfig`, `FilterState`, and `FieldConfig`
+share the same shapes documented in
+[`DataViewsLayout`](./data-views-layout.md#api-reference).
+
+## Accessibility
+
+- Built on the accessible [`Table`](./table.md) primitive (semantic `<table>` markup, sortable headers).
+- Row selection uses `TableCheckbox` with proper labelling.
+- Filter checkboxes carry labels and `htmlFor` linkage.
+
+## Theming
+
+Uses only `*-presentation-*` design tokens. Wrap with `ThemeProvider` or pass a
+`theme` to the parent `DataViewsLayout` to control the color scheme.
+
+## Related
+
+- [`DataViewsLayout`](./data-views-layout.md) — the tabbed multi-view container that renders this for you
+- [`KanbanView`](./kanban-view.md) · [`InboxView`](./inbox-view.md) · [`TreeView`](./tree-view.md) — the sibling views
+- [`Table`](./table.md) / [`DataTable`](./data-table.md) — lower-level table components
+- [How-to: Render a backend response with DataViews](../how-to/data-views-from-backend-response.md)