Skip to main content

dynamicData

PRO

The functionality is available in PRO Edition only

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​

<script>
  import { Kanban } from "@svar-uisvelte-kanban";

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

  let api;
</script>

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