getReactiveState
Returns reactive stores for each field of the Kanban state. Subscribing to an individual store re-runs dependent logic whenever that field changes. Unlike getState(), which returns a one-time snapshot.
Usage
getReactiveState(): TState<State>
The returned object contains a reactive store for each state field:
| Field | Type | Description |
|---|---|---|
cards | CardsStore | Internal card storage |
columns | ColumnConfig[] | Column definitions in board order |
columnAccessor | ColumnAccessor | Resolver for card-to-column membership |
filters | Map<string, FilterPredicate> | Active filter predicates keyed by tag |
sort | SortCriterion | Active sort criterion, or null |
editorData | KanbanCard | null | Currently selected card, or null |
dynamicData | boolean | Whether dynamic loading is on |
columnData | Map<ColumnID, { status: ColumnDataStatus }> | Per-column load state ("unknown", "loading", or "loaded") |
history | { undo: number; redo: number } | Available undo/redo step counts |
viewData | KanbanModel | Projected render model (ordered, filtered, sorted columns) |
Each store is a Svelte reactive value. Reading it inside a reactive context ($derived, $effect) sets up automatic tracking.
Example
<script>
import { Kanban } from "@svar-uisvelte-kanban";
let api = $state();
function init(kanbanApi) {
api = kanbanApi;
}
const state = $derived(api?.getReactiveState());
const cards = $derived(state?.cards.v);
</script>
<Kanban {init} {cards} {columns} />
<p>Total cards: {cards?.length ?? 0}</p>