Components/Data displayIntroduced in 1.3.0

ETaskBoard Task board

import EUI 1.0

Examples

Drag and reorder

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETaskBoard { height: 310 width: Math.min(860, parent.width) tasks: [{ "key": 1, "title": qsTr("Design components"), "status": "todo" }, { "key": 2, "title": qsTr("Implement interactions"), "status": "doing" }, { "key": 3, "title": qsTr("Write tests"), "status": "todo" }, { "key": 4, "title": qsTr("Document API"), "status": "done" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Filter tasks

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETaskBoard { height: 310 filterable: true width: Math.min(860, parent.width) tasks: [{ "key": 1, "title": qsTr("Design components"), "status": "todo" }, { "key": 2, "title": qsTr("Implement interactions"), "status": "doing" }, { "key": 3, "title": qsTr("Write tests"), "status": "todo" }, { "key": 4, "title": qsTr("Document API"), "status": "done" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Work-in-progress limit

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETaskBoard { height: 310 width: Math.min(860, parent.width) columns: [{ "key": "todo", "title": qsTr("To do") }, { "key": "doing", "title": qsTr("In progress"), "limit": 1 }, { "key": "done", "title": qsTr("Done") }] tasks: [{ "key": 1, "title": qsTr("Design components"), "status": "todo" }, { "key": 2, "title": qsTr("Implement interactions"), "status": "doing" }, { "key": 3, "title": qsTr("Write tests"), "status": "todo" }, { "key": 4, "title": qsTr("Document API"), "status": "done" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Custom card

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETaskBoard { height: 310 width: Math.min(860, parent.width) cardDelegate: EText { wrapMode: Text.Wrap text: "#" + parent.taskData.key + " " + parent.taskData.title } tasks: [{ "key": 1, "title": qsTr("Design components"), "status": "todo" }, { "key": 2, "title": qsTr("Implement interactions"), "status": "doing" }, { "key": 3, "title": qsTr("Write tests"), "status": "todo" }, { "key": 4, "title": qsTr("Document API"), "status": "done" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Read-only board

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETaskBoard { height: 310 readOnly: true width: Math.min(860, parent.width) tasks: [{ "key": 1, "title": qsTr("Design components"), "status": "todo" }, { "key": 2, "title": qsTr("Implement interactions"), "status": "doing" }, { "key": 3, "title": qsTr("Write tests"), "status": "todo" }, { "key": 4, "title": qsTr("Document API"), "status": "done" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

tasksvar

Tasks with unique key, title and status by default.

Default[]

beforeMovevar

Synchronous guard; returning false or throwing cancels the move.

Defaultnull

draggablebool

Allow entries to be moved by dragging.

Defaulttrue

readOnlybool

Keep content visible and prevent edits.

Defaultfalse

columnWidthreal

Width of each task column.

Default260

filterablebool

Allow keyword filtering.

Defaultfalse

keyFieldstring

Task identifier field; values must be unique within the board.

Default"key"

titleFieldstring

Task title field name.

Default"title"

cardDelegateComponent

Custom task card; read parent.taskData.

Defaultnull

statusFieldstring

Task status field matching a key in columns.

Default"status"

filterTextalias

Text used to filter visible entries.

Defaultsearch.text

columnsvar

Task columns with unique key, title, and optional limit and disabled.

Positive integer

Default

Show default value

[{key: "todo", title: ELocale.texts.TaskTodo}, {key: "doing", title: ELocale.texts.TaskDoing}, {key: "done", title: ELocale.texts.TaskDone}]

errorStringstringRead only

Model validation error code; empty for a valid model.

Defaultvalidate()

Signals

SignaturePurpose

changed(var tasks)

Emitted when task data changes; tasks is the updated task collection.

taskClicked(var task)

Emitted when a task card is clicked; task is its data.

taskMoved(var task, var from, var to, int index)

Emitted after moving a task; task is its data, from and to are the old and new columns, and index is its position in the new column.

Methods

SignaturePurpose

validate()

Validate the current data; components supporting callback pass the result to that callback.

moveTask(key, status, position)

Move the task identified by key to column status at position.