# Data & Collections
Use when you display or manipulate sets of data.
## Index
- [`calendar`](#calendar) — Month/week/day calendar with events and drag-to-move
- [`data-view`](#data-view) — Data table with search, sort, pagination and row actions
- [`kanban`](#kanban) — Drag & keyboard board moving cards across columns
- [`sortable-table`](#sortable-table) — Drag/keyboard row & column reordering plus resizing
- [`tree`](#tree) — Nested list with expand/collapse and tri-state checkboxes
---
## calendar
> Deep dive: [`docs/llm/calendar.md`](../../../docs/llm/calendar.md)
Month/week/day calendar with events, keyboard date navigation and drag-to-move.
```html
```
```ts
import { Calendar } from '@42/core/calendar';
const cal = new Calendar(root, {
view: 'month',
events: [{ id: 'e1', title: 'Standup', start: new Date(2026, 5, 16, 9, 0) }],
});
cal.on('calendar:select', (e) => console.log(e.detail.dateKey));
```
The controller renders day cells into `[data-c42-calendar-grid]` (role=grid),
marking `data-today`/`data-selected`/`data-focused`/`data-outside`. Events render
as `[data-c42-calendar-event]` inside their day, with `--c42-calendar-event-start/-end`
fractions for week/day positioning.
Keyboard (grid focused): arrows move the focused day (Up/Down by week), Home/End to week edges, PageUp/PageDown change period, Enter selects. Drag an event to another day to move it.
Options: `defaultDate`, `view` (month), `weekStartsOn` (0), `events`, `locale`
Methods: `setView(v)`, `navigate(dir)`, `goToToday()`, `goToDate(d)`, `selectDate(d)`, `addEvent(e)`, `removeEvent(id)`, `moveEvent(id, day)`, `getEvents()`, `currentView`, `currentDate`, `selectedDate`
Events: `calendar:select` → `{ date, dateKey }`, `calendar:viewchange` → `{ view }`, `calendar:navigate` → `{ date, view }`, `calendar:eventclick` → `{ id, event }`, `calendar:eventmove` → `{ id, event, start, end }`
---
## data-view
> Deep dive: [`docs/llm/data-view.md`](../../../docs/llm/data-view.md)
Data table with search, sort, pagination, column visibility, row actions, and async loading support.
---
## kanban
> Deep dive: [`docs/llm/kanban.md`](../../../docs/llm/kanban.md)
Drag- and keyboard-driven board: move cards between columns and reorder within
a column.
```html
```
```ts
import { Kanban } from '@42/core/kanban';
const board = new Kanban(root);
board.moveItem('t1', 'doing');
board.on('kanban:move', (e) => console.log(e.detail.order));
```
Keyboard (item focused): Up/Down reorder, Home/End jump within column, Left/Right move to the adjacent column. Pointer: drag a card across lists.
Options: `drag` (true), `keyboard` (true)
Methods: `getOrder()`, `moveItem(item, toColumn, toIndex?)`
Events: `kanban:move` → `{ item, from, to, fromIndex, toIndex, order }`
---
## sortable-table
> Deep dive: [`docs/llm/sortable-table.md`](../../../docs/llm/sortable-table.md)
Drag/keyboard row & column reordering plus column resizing on a ``.
Assumes the Nth `[data-c42-sortable-col]` maps to the Nth cell per row.
```html
```
```ts
import { SortableTable } from '@42/core/sortable-table';
const t = new SortableTable(root, { reorderRows: true, reorderColumns: true, resizeColumns: true });
t.moveRow('r1', 'r3');
```
Keyboard: row handle Up/Down/Home/End; column handle Left/Right; resize handle Left/Right.
Options: `reorderRows` (default true), `reorderColumns` (default false), `resizeColumns` (default false), `resizeStep` (16), `minColumnWidth` (48)
Methods: `getRowOrder()`, `getColumnOrder()`, `moveRow(a,b)`, `moveColumn(a,b)`, `setColumnWidth(value, px)`
Events: `sortabletable:reorder` → `{ axis, from, to, order }`, `sortabletable:resize` → `{ value, width }`
---
## tree
Nested list with expand/collapse, checkbox tri-state, keyboard nav.
```html
```
```ts
import { Tree } from '@42/core/tree';
new Tree(root, { expandAll: false, treeSelection: true });
```
Options: `expandAll`, `treeSelection`
Events: `tree:change` → `{ values: string[] }`, `tree:toggle`