Hi,

You can try this:

<template>
  <smart-kanban
    :dataSource="tasks"
    :columns="columns"
    collapsible
    style="height: 100%; width: 100%;"
  ></smart-kanban>
</template>

<script>
import 'smart-webcomponents-vue/kanban';

export default {
  data() {
    return {
      tasks: [
        { id: 1, status: 'toDo', text: 'Create layout', tags: 'UI' },
        { id: 2, status: 'inProgress', text: 'Connect API', tags: 'Backend' },
        { id: 3, status: 'done', text: 'Deploy to staging', tags: 'DevOps' }
      ],
      columns: [
        { label: 'To Do', dataField: 'toDo' },
        { label: 'In Progress', dataField: 'inProgress' },
        { label: 'Done', dataField: 'done' }
      ]
    };
  }
};
</script>

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/