| <!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>docs/api/components/kanban-view | react-declarative</title><meta name="description" content="Documentation for react-declarative"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">react-declarative</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">react-declarative</a></li><li><a href="docs_api_components_kanban-view.html">docs/api/components/kanban-view</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="kanbanview-props-columns-items-and-row-definition" class="tsd-anchor"></a><h1 class="tsd-anchor-link">KanbanView props: columns, items, and row definition<a href="#kanbanview-props-columns-items-and-row-definition" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p><code>KanbanView</code> renders a horizontal kanban board made up of typed columns. Each column displays a virtualised list of cards drawn from the <code>items</code> array. Users can drag cards between columns; the component fires <code>onChangeColumn</code> so you can persist the move. Card content is declarative: each column carries a <code>rows</code> array that describes what data to show on every card in that column, and the <code>value</code> function on each row is called per-card to asynchronously compute the displayed text or node.</p> |
| <p>The component is generic over <code>Data</code> (the shape of each item's data object), <code>Payload</code> (context forwarded to row callbacks), and <code>ColumnType</code> (the value used to identify columns, defaults to <code>IAnything</code>).</p> |
| <pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">KanbanView</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"react-declarative"</span><span class="hl-1">;</span><br/><br/><span class="hl-4">type</span><span class="hl-1"> </span><span class="hl-7">Status</span><span class="hl-1"> = </span><span class="hl-3">"todo"</span><span class="hl-1"> | </span><span class="hl-3">"in-progress"</span><span class="hl-1"> | </span><span class="hl-3">"done"</span><span class="hl-1">;</span><br/><br/><span class="hl-4">interface</span><span class="hl-1"> </span><span class="hl-7">ITask</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">id</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">title</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">assignee</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">column</span><span class="hl-1">: </span><span class="hl-7">Status</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">data</span><span class="hl-1">: { </span><span class="hl-2">title</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">; </span><span class="hl-2">assignee</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1"> };</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">columns</span><span class="hl-1"> = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">column:</span><span class="hl-1"> </span><span class="hl-3">"todo"</span><span class="hl-1"> </span><span class="hl-0">as</span><span class="hl-1"> </span><span class="hl-7">Status</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">label:</span><span class="hl-1"> </span><span class="hl-3">"To Do"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">color:</span><span class="hl-1"> </span><span class="hl-3">"#e3f2fd"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">rows:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">label:</span><span class="hl-1"> </span><span class="hl-3">"Title"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">value</span><span class="hl-2">:</span><span class="hl-1"> (</span><span class="hl-2">_id</span><span class="hl-1">, </span><span class="hl-2">data</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">data</span><span class="hl-1">.</span><span class="hl-2">title</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">label:</span><span class="hl-1"> </span><span class="hl-3">"Assignee"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">value</span><span class="hl-2">:</span><span class="hl-1"> (</span><span class="hl-2">_id</span><span class="hl-1">, </span><span class="hl-2">data</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">data</span><span class="hl-1">.</span><span class="hl-2">assignee</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> ],</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">column:</span><span class="hl-1"> </span><span class="hl-3">"in-progress"</span><span class="hl-1"> </span><span class="hl-0">as</span><span class="hl-1"> </span><span class="hl-7">Status</span><span class="hl-1">, </span><span class="hl-2">label:</span><span class="hl-1"> </span><span class="hl-3">"In Progress"</span><span class="hl-1">, </span><span class="hl-2">color:</span><span class="hl-1"> </span><span class="hl-3">"#fff3e0"</span><span class="hl-1">, </span><span class="hl-2">rows:</span><span class="hl-1"> [] },</span><br/><span class="hl-1"> { </span><span class="hl-2">column:</span><span class="hl-1"> </span><span class="hl-3">"done"</span><span class="hl-1"> </span><span class="hl-0">as</span><span class="hl-1"> </span><span class="hl-7">Status</span><span class="hl-1">, </span><span class="hl-2">label:</span><span class="hl-1"> </span><span class="hl-3">"Done"</span><span class="hl-1">, </span><span class="hl-2">color:</span><span class="hl-1"> </span><span class="hl-3">"#e8f5e9"</span><span class="hl-1">, </span><span class="hl-2">rows:</span><span class="hl-1"> [] },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-0">default</span><span class="hl-1"> </span><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">TaskBoard</span><span class="hl-1">({ </span><span class="hl-2">tasks</span><span class="hl-1"> }: { </span><span class="hl-2">tasks</span><span class="hl-1">: </span><span class="hl-7">ITask</span><span class="hl-1">[] }) {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-7">KanbanView</span><br/><span class="hl-1"> </span><span class="hl-8">columns</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">columns</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">items</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">tasks</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">onChangeColumn</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-9">(</span><span class="hl-2">id</span><span class="hl-9">, </span><span class="hl-2">newColumn</span><span class="hl-9">, </span><span class="hl-2">data</span><span class="hl-9">, </span><span class="hl-2">payload</span><span class="hl-9">) </span><span class="hl-4">=></span><span class="hl-9"> {</span><br/><span class="hl-9"> </span><span class="hl-2">console</span><span class="hl-9">.</span><span class="hl-5">log</span><span class="hl-9">(</span><span class="hl-3">`Card </span><span class="hl-4">${</span><span class="hl-2">id</span><span class="hl-4">}</span><span class="hl-3"> moved to </span><span class="hl-4">${</span><span class="hl-2">newColumn</span><span class="hl-4">}</span><span class="hl-3">`</span><span class="hl-9">);</span><br/><span class="hl-9"> }</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-6">/></span><br/><span class="hl-1"> );</span><br/><span class="hl-1">}</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <a id="data" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Data<a href="#data" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong><code>items</code></strong> <code>IBoardItem<Data, Payload, ColumnType>[]</code> <em>(required)</em></p> |
| <p>The flat array of all kanban cards. Each item must have an <code>id</code> string and a <code>column</code> value matching one of the column identifiers in <code>columns</code>. <code>KanbanView</code> partitions this array by column on each render.</p> |
| <p><strong><code>columns</code></strong> <code>IBoardColumn<Data, Payload, ColumnType>[]</code> <em>(required)</em></p> |
| <p>Column definitions. Each entry is either an <code>IBoardColumnInternal</code> (a real column with cards) or an <code>IBoardDivider</code> (a visual spacer between column groups). See the <a href="#ibboardcolumn-shape">IBoardColumn shape</a> section for details.</p> |
| <p><strong><code>payload</code></strong> <code>Payload | (() => Payload)</code></p> |
| <p>Context object forwarded to every <code>value</code>, <code>visible</code>, and <code>click</code> function on <code>IBoardRow</code>. Use it to pass user data, permissions, or API clients.</p> |
| <a id="iboarditem-shape" class="tsd-anchor"></a><h2 class="tsd-anchor-link"><code>IBoardItem</code> shape<a href="#iboarditem-shape" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Each element in the <code>items</code> array must conform to this interface.</p> |
| <p><strong><code>id</code></strong> <code>string</code> <em>(required)</em></p> |
| <p>Unique identifier for the card. Used as the React key and passed to all row callback functions.</p> |
| <p><strong><code>column</code></strong> <code>ColumnType</code> <em>(required)</em></p> |
| <p>The current column this card belongs to. Must match the <code>column</code> field of one of your <code>IBoardColumn</code> entries.</p> |
| <p><strong><code>data</code></strong> <code>Data</code> <em>(required)</em></p> |
| <p>The payload object for this card. Passed as the second argument to all <code>IBoardRow</code> callback functions.</p> |
| <p><strong><code>label</code></strong> <code>React.ReactNode | ((id: string, data: Data, payload: Payload) => React.ReactNode | Promise<React.ReactNode>)</code></p> |
| <p>Card header label. Can be a static node or an async function. If omitted, falls back to the board-level <code>cardLabel</code> prop.</p> |
| <p><strong><code>updatedAt</code></strong> <code>string</code></p> |
| <p>ISO 8601 timestamp. When <code>withUpdateOrder</code> is enabled, cards are sorted by this field in descending order (most recently updated first).</p> |
| <a id="iboardcolumn-shape" class="tsd-anchor"></a><h2 class="tsd-anchor-link"><code>IBoardColumn</code> shape<a href="#iboardcolumn-shape" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong><code>column</code></strong> <code>ColumnType</code> <em>(required)</em></p> |
| <p>Unique identifier for this column. Cards whose <code>column</code> field equals this value are rendered here.</p> |
| <p><strong><code>label</code></strong> <code>string</code></p> |
| <p>Column header label shown above the card list.</p> |
| <p><strong><code>color</code></strong> <code>string</code></p> |
| <p>Background color of the column body and the small color dot in the header. Any valid CSS color string. Defaults to a theme-aware neutral tone.</p> |
| <p><strong><code>rows</code></strong> <code>IBoardRow<Data, Payload>[]</code> <em>(required)</em></p> |
| <p>Declarative row definitions that describe what data to render inside each card belonging to this column. Each row produces one labeled data line on the card.</p> |
| <a id="iboardrow-shape" class="tsd-anchor"></a><h2 class="tsd-anchor-link"><code>IBoardRow</code> shape<a href="#iboardrow-shape" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong><code>label</code></strong> <code>React.ReactNode</code> <em>(required)</em></p> |
| <p>The field label displayed to the left of the value on the card.</p> |
| <p><strong><code>value</code></strong> <code>(id: string, data: Data, payload: Payload) => React.ReactNode | Promise<React.ReactNode></code> <em>(required)</em></p> |
| <p>Async function that computes the displayed value for this row. Results are cached with a TTL controlled by <code>rowTtl</code>.</p> |
| <p><strong><code>visible</code></strong> <code>boolean | ((id: string, data: Data, payload: Payload) => boolean | Promise<boolean>)</code></p> |
| <p>Controls whether this row is rendered on the card. Omit or set to <code>true</code> to always show the row. When a function is provided it is evaluated async and the row is hidden until it resolves <code>true</code>.</p> |
| <p><strong><code>click</code></strong> <code>(id: string, data: Data, payload: Payload) => void | Promise<void></code></p> |
| <p>Called when the user clicks this specific row's value on the card.</p> |
| <a id="callbacks" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Callbacks<a href="#callbacks" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong><code>onChangeColumn</code></strong> <code>(id: string, column: ColumnType, data: Data, payload: IAnything) => void | Promise<void></code></p> |
| <p>Called after a card is successfully dragged to a new column. <code>id</code> is the card's identifier; <code>column</code> is the target column. This is where you persist the status change to your backend.</p> |
| <p><strong><code>onCardLabelClick</code></strong> <code>(id: string, data: Data, payload: IAnything) => void</code></p> |
| <p>Called when the user clicks the card's header label.</p> |
| <p><strong><code>onDataRequest</code></strong> <code>(initial: boolean) => void</code></p> |
| <p>Called on mount (<code>initial = true</code>) and whenever the page becomes visible again (<code>initial = false</code>). Use it to trigger a data refresh from your parent component.</p> |
| <p><strong><code>onLoadStart</code></strong> <code>() => void</code></p> |
| <p>Called when an async row value computation begins.</p> |
| <p><strong><code>onLoadEnd</code></strong> <code>(isOk: boolean) => void</code></p> |
| <p>Called when an async row value computation completes. <code>isOk</code> is <code>false</code> if it threw.</p> |
| <p><strong><code>fallback</code></strong> <code>(e: Error) => void</code></p> |
| <p>Error handler invoked when an async row callback rejects.</p> |
| <p><strong><code>filterFn</code></strong> <code>(item: IBoardItem<Data, Payload, ColumnType>) => boolean</code></p> |
| <p>Client-side predicate applied to <code>items</code> before partitioning into columns. Cards that return <code>false</code> are never rendered.</p> |
| <a id="slot-components" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Slot components<a href="#slot-components" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong><code>AfterCardContent</code></strong> <code>React.ComponentType<{ id: string; data: Data; payload: IAnything }></code></p> |
| <p>Custom content rendered below the declarative rows inside every card.</p> |
| <p><strong><code>BeforeColumnTitle</code></strong> <code>React.ComponentType<{ column: ColumnType; payload: IAnything }></code></p> |
| <p>Custom content rendered to the left of the column header title.</p> |
| <p><strong><code>AfterColumnTitle</code></strong> <code>React.ComponentType<{ column: ColumnType; payload: IAnything }></code></p> |
| <p>Custom content rendered to the right of the column header title (e.g. a card count badge).</p> |
| <a id="layout-and-performance" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Layout and performance<a href="#layout-and-performance" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong><code>sx</code></strong> <code>SxProps</code></p> |
| <p>MUI <code>sx</code> prop applied to the root container.</p> |
| <p><strong><code>style</code></strong> <code>React.CSSProperties</code></p> |
| <p>Inline styles applied to the root container.</p> |
| <p><strong><code>className</code></strong> <code>string</code></p> |
| <p>CSS class applied to the root container.</p> |
| <p><strong><code>bufferSize</code></strong> <code>number</code></p> |
| <p>Number of extra cards rendered outside the visible viewport by the internal virtual list. Increase this value if you see blank cards during fast scrolling. Defaults to <code>15</code>.</p> |
| <p><strong><code>minRowHeight</code></strong> <code>number</code></p> |
| <p>Minimum card height in pixels used by the virtual list to calculate scroll positions. Defaults to <code>125</code>.</p> |
| <p><strong><code>rowTtl</code></strong> <code>number</code></p> |
| <p>Time-to-live in milliseconds for the async <code>value</code> and <code>label</code> result cache. After this duration, the next render triggers a fresh call. Defaults to <code>500</code>.</p> |
| <p><strong><code>cardLabel</code></strong> <code>React.ReactNode | ((id: string, data: Data, payload: Payload) => React.ReactNode | Promise<React.ReactNode>)</code></p> |
| <p>Default card header label used when an individual item does not specify its own <code>label</code>. Can be a static node or an async function receiving <code>(id, data, payload)</code>.</p> |
| <a id="flags" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Flags<a href="#flags" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong><code>withGoBack</code></strong> <code>boolean</code></p> |
| <p>When <code>true</code>, cards can be dragged to a column that appears earlier in the <code>columns</code> array (i.e. "backwards" in the workflow). Defaults to <code>false</code>.</p> |
| <p><strong><code>withUpdateOrder</code></strong> <code>boolean</code></p> |
| <p>When <code>true</code>, cards within each column are sorted by <code>updatedAt</code> in descending order — most recently updated cards appear at the top.</p> |
| <p><strong><code>withHeaderTooltip</code></strong> <code>boolean</code></p> |
| <p>When <code>true</code>, a tooltip is shown on column headers, useful when the label is truncated.</p> |
| <p><strong><code>disabled</code></strong> <code>boolean</code></p> |
| <p>When <code>true</code>, all drag interactions are disabled and the board is read-only.</p> |
| <p><strong><code>deps</code></strong> <code>any[]</code></p> |
| <p>Dependency array. Changing any value clears the row cache and triggers a re-partition of <code>items</code>.</p> |
| <p><strong><code>reloadSubject</code></strong> <code>TSubject<void></code></p> |
| <p>Emit on this subject to clear the row and label caches and force all cards to re-evaluate their <code>value</code> functions.</p> |
| <a id="static-helper" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Static helper<a href="#static-helper" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><code>KanbanView.enableScrollOnDrag(ref, options?)</code> is a static utility you can attach as a <code>useEffect</code> to enable auto-scroll while dragging near the left or right edges of the board.</p> |
| <pre><code class="tsx"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">boardRef</span><span class="hl-1"> = </span><span class="hl-5">useRef</span><span class="hl-1"><</span><span class="hl-7">HTMLDivElement</span><span class="hl-1">>();</span><br/><br/><span class="hl-5">useEffect</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-2">KanbanView</span><span class="hl-1">.</span><span class="hl-5">enableScrollOnDrag</span><span class="hl-1">(</span><span class="hl-2">boardRef</span><span class="hl-1">, { </span><span class="hl-2">threshold:</span><span class="hl-1"> </span><span class="hl-16">200</span><span class="hl-1">, </span><span class="hl-2">speed:</span><span class="hl-1"> </span><span class="hl-16">15</span><span class="hl-1"> }),</span><br/><span class="hl-1"> []</span><br/><span class="hl-1">);</span><br/><br/><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-7">KanbanView</span><span class="hl-1"> </span><span class="hl-8">ref</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">boardRef</span><span class="hl-4">}</span><span class="hl-1"> </span><span class="hl-19">...</span><span class="hl-1"> </span><span class="hl-6">/></span><span class="hl-1">;</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <table> |
| <thead> |
| <tr> |
| <th>Option</th> |
| <th>Type</th> |
| <th>Default</th> |
| <th>Description</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td><code>threshold</code></td> |
| <td><code>number</code></td> |
| <td><code>200</code></td> |
| <td>Pixel distance from the edge that triggers auto-scroll.</td> |
| </tr> |
| <tr> |
| <td><code>speed</code></td> |
| <td><code>number</code></td> |
| <td><code>15</code></td> |
| <td>Pixels scrolled per interval tick.</td> |
| </tr> |
| </tbody> |
| </table> |
| </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#kanbanview-props-columns-items-and-row-definition"><span>Kanban<wbr/>View props: columns, items, and row definition</span></a><ul><li><a href="#data"><span>Data</span></a></li><li><a href="#iboarditem-shape"><span>IBoard<wbr/>Item shape</span></a></li><li><a href="#iboardcolumn-shape"><span>IBoard<wbr/>Column shape</span></a></li><li><a href="#iboardrow-shape"><span>IBoard<wbr/>Row shape</span></a></li><li><a href="#callbacks"><span>Callbacks</span></a></li><li><a href="#slot-components"><span>Slot components</span></a></li><li><a href="#layout-and-performance"><span>Layout and performance</span></a></li><li><a href="#flags"><span>Flags</span></a></li><li><a href="#static-helper"><span>Static helper</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">react-declarative</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html> |
|
|
