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 setup>
  import { Kanban } from "@svar-ui/vue-kanban";
  import { ref } from "vue";

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

  const api = ref(null);
</script>

<template>
  <Kanban
    :columns="columns"
    :dynamicData="true"
    :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 });
    }"
  />
</template>