Skip to main content

dynamicData

The functionality is available in PRO Edition only

PRO

Enables on-demand column loading. When turned on, the board starts without card data and requests cards for each column as it becomes visible. The store emits request-data for unloaded columns; your code answers with provide-data.

Usage​

dynamicData?: boolean;
  • false (default) - static mode. All columns are treated as loaded and the full cards array is expected up front.
  • true - dynamic mode. Columns start with a dataStatus of "unknown" and the store fires request-data as they become visible. The host fetches data and responds with provide-data to mark the column "loaded".

Example​

import { useState } from "react";
import { Kanban } from "@svar-ui/react-kanban";

const columns = [
  { id: "backlog", label: "Backlog" },
  { id: "doing", label: "In Progress" },
  { id: "done", label: "Done" },
];

function App() {
  const [api, setApi] = useState(null);

  return (
    <Kanban
      columns={columns}
      dynamicData
      cards={[]}
      init={obj => setApi(obj)}
      onRequestData={async ({ id }) => {
        const cards = await fetch(`/api/columns/${id}/cards`).then(r => r.json());
        api.exec("provide-data", { id, cards });
      }}
    />
  );
}