Table View

Usage

• Use the table layout when people compare many properties across rows or edit values in place.
• Keep the title column first and hide rarely used properties with view visibility rather than removing them from the schema.
• Don’t use a table for visual content such as covers or images; use the gallery layout instead.
• Don’t rely on column resizing for essential information; it is pointer-only.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

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

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

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

Examples

Hover, selection and calculations

Property menu open

Bare view

Without the block chrome, inside your own provider. The table is as wide as its columns, so give it a horizontal scroll container (DatabaseView brings its own); 28px of start padding leaves room for the row checkboxes.

Composition

Views read the database from context, so render them inside <DatabaseView> (which picks the active view for you) or inside your own <DatabaseProvider value={useDatabase(...)}>.

<TableView>                        // role="table"
  header row  → checkbox gutter · columnheader × n (PropertyTypeIcon + name, resize handle) · "+" add property
                 click a header → PropertyMenu
  rows        → checkbox · PropertyCell × n (title: page icon + OPEN on hover)
  "+ New page"
  calculation footer (calculations)
</TableView>

API Reference

TableView

Reads the active view from database context.

Accessibility

• role="table" labelled by the view name, with row, columnheader and cell; column headers are focusable (tabIndex=0) and open the property menu.
• Row selection uses the Checkbox atom with an aria-label per row and a select-all checkbox.
• Cells: click (or Enter) to edit; select/status cells open the SelectPicker (ArrowUp/Down, Enter, Escape); date cells open the DateCellPicker; checkboxes toggle with Space.
• Column resize is pointer-only (drag the header edge, min 80px).