Kanban — Smart UI JavaScript API

Kanban — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Kanban - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-kanban id="demo-kanban"></smart-kanban>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.kanban.js';

    const el = document.getElementById('demo-kanban');
    if (el) {

      el.collapsible = true;
      el.columns = [
        { label: 'To do', dataField: 'toDo' },
        { label: 'In progress', dataField: 'inProgress' },
        { label: 'Done', dataField: 'done' }
      ];
      el.swimlanes = [{ label: 'Frontend', dataField: 'frontend' }, { label: 'Backend', dataField: 'backend' }];
      el.dataSource = [
        { id: 1, status: 'toDo', swimlane: 'frontend', text: 'Draft API docs', tags: 'docs', priority: 'normal', progress: 10 },
        { id: 2, status: 'inProgress', swimlane: 'backend', text: 'Review Grid samples', tags: 'grid', priority: 'high', progress: 55 },
        { id: 3, status: 'done', swimlane: 'frontend', text: 'Ship tooltip polish', tags: 'ui', priority: 'low', progress: 100 }
      ];
      el.taskProgress = true;

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Kanban   Framework: JavaScript   Selector: smart-kanban

API counts: 75 properties, 37 methods, 29 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: addFilter(), addSort(), addTask(), addColumn(), beginEdit(), cancelEdit()

Common events: change, close, closing, columnAdd, columnRemove, columnReorder

Module hint: smart-webcomponents/source/modules/smart.kanban.js

Kanban represents a kanban board that visually depicts work at various stages of a process using cards to represent tasks and columns to represent each stage of the process.

Class

Kanban

Kanban

Kanban represents a kanban board that visually depicts work at various stages of a process using cards to represent tasks and columns to represent each stage of the process.

Selector

smart-kanban

Quick picks

changecolumnsdataSource

Properties

AaddNewButtonControls whether the "Add Task" button is displayed at the top of each column. To hide the button for an individual column, set the addNewButton property to false within that column’s configuration object. If addNewButton is false, users will not see the "Add Task" button for that specific column.
AaddNewButtonDisplayModeSpecifies whether the add button appears in the column header, after the list of tasks within the column, or both. This controls the visibility and placement of the add button for creating new tasks in each column.
AaddNewColumnSpecifies whether a special column containing a button for adding new status columns to the Kanban board is shown. When enabled, this feature allows users to quickly create additional status columns directly within the Kanban interface. You can use this setting to display or hide the "Add Column" button column as needed.
AaddNewColumnWidthSpecifies the width of the dynamically added "Add New" column. This property is effective only when the 'columnWidth' property is also set. It allows you to control the exact width (in pixels or other valid CSS units) of the new column that appears when adding columns dynamically to the table or grid.
AallowColumnEditControls whether column editing is permitted. When this property is set to true, users can dynamically edit the column's header label by double-clicking on it. This allows for in-place renaming of the column header directly within the user interface. If set to false, the column header label will remain static and cannot be modified by users.
AallowColumnHideControls whether users can hide columns in the data table. When set to true, this property allows users to dynamically hide individual columns using the column actions menu. Note: To enable this feature, the 'columnActions' property must also be set to true.
AallowColumnRemoveControls whether users can remove columns from the table. When set to true, a "Remove Column" option will appear in the column actions menu, allowing users to dynamically delete columns. Note: The 'columnActions' property must also be enabled (set to true) for this feature to be available.
AallowColumnReorderControls whether users can reorder columns in a table or grid. When set to true and used in combination with allowDrag enabled, this property lets users rearrange columns by dragging and dropping their headers. For example, a user can click and hold the header of the first column, then drag it to a new position over another column header and drop it, changing the column order visually and functionally. This enhances the user experience by allowing customizable column layouts.
AallowDragEnables users to click and drag tasks within the interface, allowing them to easily reorder, move, or reorganize tasks by dragging and dropping them to the desired position.
AallowDropEnables users to remove or discard tasks from the list or workflow, either by dragging and dropping or through a designated action, facilitating task management and organization.
AallowDropPlaceholderEnables a visual placeholder to appear when dragging and dropping tasks. As you drag a task over another task, an empty space is dynamically created at the drop location, clearly indicating where the dragged task will be inserted. This improves usability by providing real-time visual feedback during task reordering.
AapplyColumnColorToTasksThis property controls the color styling of Kanban columns and their associated tasks. When set to true, and if a Kanban column has its color property defined, that color will not only visually highlight the column header but will also be applied to all tasks within that column, as well as to the background or accent color of the edit dialog for tasks in that column. This creates a consistent and visually cohesive color scheme throughout each column and its related UI elements.
AautoColumnHeightDynamically adjusts the height of each column based on the total height of its tasks, ensuring all content is fully visible. This property is effective only when 'columnColorEntireSurface' is set to true, allowing the background color to extend appropriately over the column’s entire surface.
AautoLoadStateControls whether the application automatically loads its state from the browser’s localStorage. This includes restoring information such as:- The list of tasks and their positions- The selected task and its state- Applied filters and sorting options- The state of collapsed columns- The values of the following task-related properties: - taskActions - taskComments - taskDue - taskPriority - taskProgress - taskTags - taskUserIconWhen enabled, all of these details will be reloaded from localStorage on page refresh or reopening the application, ensuring a consistent user experience. When disabled, this information will not be loaded automatically, and the state will not be restored.
AautoSaveStateControls whether the application's current state is automatically saved to the browser's localStorage. When enabled, the following information is persistently stored and restored across sessions: - Task data, including their current positions, selected status, and any applied filters or sorting.- The collapsed or expanded state of columns.- Values for the following properties: - taskActions (user actions related to tasks) - taskComments (comments attached to tasks) - taskDue (task due dates) - taskPriority (priority level of tasks) - taskProgress (progress tracking for tasks) - taskTags (tags associated with each task) - taskUserIcon (user avatars/icons linked to tasks)This ensures that user preferences and the state of the task interface are preserved, providing a seamless user experience even after closing or refreshing the browser. Disabling this feature will prevent any state information from being stored in localStorage, and all settings will be reset upon page reload.
CcollapsibleEnables the card content to be expanded or collapsed, providing users with the ability to show or hide additional information within the card. This enhances the user interface by reducing visual clutter and allowing for more compact content presentation.
CcolumnActionsControls whether the column actions icon is displayed, allowing users to access additional options or actions for each table column. When enabled, the icon becomes visible; when disabled, the icon is hidden from view.
CcolumnColorEntireSurfaceRenders a customizable background within the Kanban column, allowing for enhanced visual separation and improved column identification. Supports various background options such as color, image, or pattern to match your application's design requirements.
CcolumnColorsDisplays a color indicator in the column header whenever the column's color property is defined. The header visually reflects the assigned color, making it easier to identify and distinguish columns based on their color settings.
CcolumnEditModeSpecifies how column editing is initiated within the interface. - When set to ''header'', editing mode is activated by double-clicking directly on the column's header label. - When set to ''menu'', editing can only be started through the column's context or 'columnActions' menu. - When set to ''headerAndMenu'', both methods are available—users can begin editing either by double-clicking the header or by selecting the relevant option from the column menu.
CcolumnFooterRenders a column footer that displays a summary value, such as totals or averages, for the data in that column. This footer helps users quickly interpret aggregate information at the bottom of the column.
CcolumnHeaderTemplateSpecifies whether a custom template is applied to the column header. Accepts a value of type string (containing template markup), function (returning a template or markup), or an HTMLTemplateElement. Use this property to customize the appearance and content of the column header beyond the default rendering.
CcolumnsProvides detailed definitions and configuration options for each column’s properties, including attributes such as data type, default value, visibility, header label, and formatting options. Click for more details. Property object's options:
  • addNewButton:boolean - Sets or gets whether the column's button for adding tasks is visible. Works in conjunction with the Kanban property of the same name.
  • allowRemove:boolean - Sets or gets whether the column can be removed from the column menu.
  • collapsed:boolean - Sets or gets whether the column is collapsed.
  • collapsible:boolean - Sets or gets whether the column is collapsible. Works in conjunction with the Kanban property of the same name.
  • columns:{ addNewButton?: boolean, collapsed?: string, collapsible?: string, columns?: [], dataField?: string, label?: string, orientation?: string, selected?: string }[] - Sets or gets the column's sub-columns. Sub-columns has the same properties as top-level columns.
  • dataField:string - Sets or gets the column's data source bound field. Corresponds to the status field in the data source.
  • label:string - Sets or gets the text displayed in the column's header.
  • editable:boolean - Sets or gets whether a column is editable.
  • visible:boolean - Sets or gets whether a column is visible.
  • reorder:boolean - Sets or gets whether a column can be reordered.
  • orientation:string - Sets or gets whether the tasks in the column flow vertically or horizontally.
  • selected:boolean - Sets or gets whether the column is selected. Only applicable to sub-columns when hierarchy is 'tabs'.
  • headerTemplate:any - Determines whether a column header has a template. You can pass 'string', 'function' or HTMLTemplateElement as a value.
  • width:number | null - Sets the Kanban column width. When this property is set, the kanban column width is set and a horizontal scrollbar may appear.
CcolumnSummarySpecifies whether the number of tasks is shown in the headers of each column, allowing users to see the count of tasks directly within the column titles.
CcolumnWidthDefines the width for each Kanban column. When this property is specified, all Kanban columns are rendered at the given width. If the total width of all columns exceeds the available space, a horizontal scrollbar will appear, allowing users to scroll and view all columns.
CconfirmDialogControls whether a confirm dialog is displayed when a task is dragged and dropped to a new position
CcurrentUserSets or retrieves the ID of the currently active user. This value must match the 'id' of a user object within the 'users' property or array. The privileges and access rights available are determined based on the current user's identity. If no current user is specified, the element's permissions default to those defined by its own properties, rather than user-specific settings.
DdataSourceSpecifies the origin or source of the data to be displayed and managed on the Kanban board, such as an API endpoint, database, or local data array. This setting dictates which dataset will populate the Kanban columns and cards. Click for more details. Property object's options:
  • id:string | number - The task's unique ID.
  • checklist:{ completed?: boolean, text?: string }[] - A list of sub-tasks.
  • color:string - A color used to highlight the task's card visually.
  • comments:{ text?: string, time?: Date, userId: string | number }[] - Comments about a task.
  • dueDate:Date - The task's due date.
  • priority:string - The task's priority.
  • progress:number - The task's progress in percentages - a number from 0 to 100.
  • startDate:Date - The task's start date.
  • status:string - The task's status. Has to correspond to the dataField of a column or sub-column from the columns property/array.
  • swimlane:string - The swimlane of the task. Has to correspond to the dataField of a swimlane from the swimlanes property/array, if it is defined.
  • tags:string - A comma-separated list of tags.
  • text:string - The text of the task.
  • userId:string | number - The ID of the user assigned to the task. Has to correspond to the id of an item from the users property/array.
DdataSourceMapSpecifies how the Kanban board's default fields (e.g., title, status, assignee) correspond to the fields in your data source. Use this mapping only if your data source uses field names that differ from the Kanban's expected keywords. If the field names already match, this mapping is optional. Note that only certain default fields support custom mapping; not all default map can be overridden.
DdialogCustomizationFunctionSets or retrieves a customization function for the Kanban dialog component. This function allows you to modify the appearance and behavior of the dialog, or to replace it entirely with a custom implementation. When invoked, the Kanban component calls this function with five arguments:- 'dialog': The default dialog instance, typically a 'smart-window' object, which serves as the default modal dialog for tasks and comments.- 'taskOrComment': The data object representing either a Kanban task or a comment, depending on the context of the action.- 'editors': An object containing the input elements or editors used within the dialog for data entry or modification.- 'purpose': A string indicating the dialog’s intent, such as ''add'' for creating a new item or ''edit'' for modifying an existing one.- 'type': A string specifying the entity being processed, such as ''task'' for task-related dialogs or ''column'' for column-related dialogs.By providing a custom function, you can tailor the dialog’s UI, integrate additional logic, or substitute a completely different dialog component to meet your application's requirements.
DdialogRenderedSets or retrieves the callback function that is executed when the dialog is rendered. This function is invoked by the Kanban component and receives six arguments: dialog, editors, labels, tabs, layout, and taskOrComment.- 'dialog': The 'smart-window' instance representing the Kanban dialog.- 'taskOrComment': An object representing either the current Kanban task or a comment, depending on the context in which the dialog is opened.- 'editors, labels, tabs, layout': Each is a JSON object where keys specify the element type (e.g., 'description', 'priority', 'notes'), and the values are their corresponding HTML elements within the dialog.This function allows developers to customize the dialog content or behavior dynamically based on the element types and the associated data when the dialog is rendered.
DdisableDialogControls whether the default dialog for adding or removing tasks or comments is enabled or disabled. When set to true, the dialog will not appear, allowing for custom handling of these actions. When set to false, the standard dialog will be shown as usual. This property can be used to either retrieve the current setting (get) or define its behavior (set).
DdragOffsetSpecifies the offset, in pixels, between the drag feedback element and the mouse cursor during task dragging operations. The value should be provided as an array: the first element sets the horizontal (x-axis) offset, and the second element sets the vertical (y-axis) offset, both relative to the cursor position. Alternatively, if set to 'auto', the system automatically calculates the offset based on the cursor’s position at the moment the drag action began. This allows for precise control over the visual positioning of the feedback element during drag-and-drop interactions.
EeditableControls whether tasks can be modified, including editing task details and assigning users to tasks. When enabled, users can update task information and manage task assignments; when disabled, tasks and their assigned users are read-only and cannot be changed programmatically or through the user interface.
EeditModeSpecifies how users can activate the task editing feature. The 'editBehavior' property accepts either '"singleClick"' or '"doubleClick"' as values:- '"singleClick"': Opens the dialog edit window when the user clicks once on a Kanban task.- '"doubleClick"' (default): Opens the dialog edit window when the user double-clicks on a Kanban task.By default, editing is triggered by a double-click. Use this setting to customize the interaction based on your application's needs.
FformatStringDateSets or retrieves the format string used to display the "Due date" label, as well as the date format for both the "Start date" and "Due date" editor fields. This determines how dates are shown and entered in these UI components.
FformatStringTimeSpecifies or retrieves the format string used to display the timestamp on comments. This determines how the date and time of each comment are presented (e.g., "YYYY-MM-DD HH:mm:ss").
HheaderPositionSets or retrieves the position of the header section within the user interface. The header typically contains interactive controls such as Customize, Filter, Sort, and Search buttons, allowing users to adjust and manipulate the displayed data according to their preferences.
HhierarchyDefines or retrieves how the column hierarchy is structured and displayed, specifying the method or format used to represent the relationships between columns within the component or dataset.
LlocaleSets or retrieves the current locale (language and regional settings) used by the component. This property determines the language in which messages are displayed, and works together with the messages property, which provides localized message strings for each supported locale. Adjusting the locale will change the displayed text to correspond with the selected language from the messages definitions.
MmessagesDefines or retrieves an object containing the strings displayed in the widget, allowing for easy localization of text. This property works together with the locale property to support multiple languages and adapt the user interface based on the selected locale. Use this to provide translated labels, messages, and other widget text for internationalization.
OonColumnFooterRenderCallback function that allows you to customize how the column footer is rendered in the Kanban component. This function is invoked with three arguments:1. The HTML element representing the column header2. The data object for the current column3. The field name associated with the column dataUse this callback to modify the footer's appearance or content based on the specific column's properties and data.
OonColumnHeaderRenderCallback function that allows customization of the column header rendering in the Kanban component. This function is invoked with three arguments: the column header's HTML element, the complete column data object, and the column's data field (a string representing the key associated with the column). Use this callback to modify or enhance the appearance and behavior of column headers as needed.
OonFilterPrepareCallback function that enables customization of the filter items displayed in the dropdown. It receives a single argument: an array containing all the items available for filtering. Within the function, you can modify this array—such as by updating, removing, or reordering items—to control which options appear in the filter dropdown and how they are presented to the user. The modified array will determine the final set of filter options shown in the UI.
OonSortPrepareA callback function that allows you to customize the items displayed in the sort dropdown menu. This function receives a single argument: an array containing all available sort options. You can modify this array—by removing, reordering, or updating items—to control which sorting options appear in the dropdown and how they are presented. The modified array will then be used to render the sort options to the user.
OonTaskRenderCallback function that allows you to customize how tasks are rendered within the Kanban board. This function is invoked by the Kanban component and receives two arguments: 1. The HTML element representing the task (taskHtmlElement).2. The data object associated with the task (taskData).You can use this callback to modify the appearance, add event listeners, or inject additional content into the task's HTML element based on its data.
PprioritySpecifies the available priority levels that can be assigned to Kanban tasks. This array defines each priority as an object containing a label (for display purposes) and a corresponding value (for internal use). Example: [{label: 'Low', value: 'low'}, {label: 'High', value: 'high'}] Use this property to customize or extend the set of priority options in your Kanban board.
PpriorityListControls the visibility of the priority list (as specified by the priority property) when the user clicks the priority icon. This option is only effective when users have editable privileges enabled, allowing them to modify the priority value. If set to true, the list will appear on icon click; if false, the list will remain hidden.
RreadonlyControls the read-only state of the edit dialog. When enabled, the dialog displays task details but disables all editing capabilities for those fields. However, if the comments feature is active, users can still add comments within the dialog, even while other fields remain uneditable.
RrightToLeftSets or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) text direction, which is typically used in languages such as Arabic or Hebrew. When enabled, the element layout and text flow will support RTL locales, ensuring proper display for right-to-left scripts.
SselectionModeSpecifies how items can be selected within the component, such as allowing single selection, multiple selections, or disabling selection entirely.
SstoreHistorySpecifies whether the history of tasks is recorded and shown within the task dialog. When enabled, completed or previous tasks will be saved and displayed, allowing users to review their task activity directly in the dialog. When disabled, task history will not be retained or visible. This setting can be used to set or retrieve the current history display behavior.
SstoreHistoryItemsSpecifies the collection of task history items to be retrieved or updated when the storeHistory option is enabled. When storeHistory is true, this property determines which task history records are saved and accessed.
SswimlanesProvides a detailed configuration of swimlanes on the Kanban board, specifying how tasks are grouped horizontally by categories such as assignee, priority, or project. When swimlanes are enabled, sub-columns within each column are disabled to maintain a clear visual separation of items across swimlanes. Click for more details. Property object's options:
  • color:string - The swimlane's color.
  • dataField:string - Sets or gets the swimlane's data source bound field. Corresponds to the swimlane field in the data source.
  • label:string - Sets or gets the text displayed in the swimlane.
SswimlanesFromSpecifies or retrieves the zero-based index of the column where the swimlanes should begin. This determines the starting position for rendering swimlanes within a grid or table layout.
SswimlanesToSpecifies or retrieves the zero-based index of the column where the swimlanes should terminate. By default, swimlanes extend to the final column in the layout. Setting this property allows you to control at which column the swimlanes will stop, providing flexibility in customizing the swimlane display.
TtagsSpecifies the permitted tags that can be used. When this property is set, only the listed tags will be allowed; if no tags are specified, all tags provided by the data source are accepted by default. This property can be used to restrict or expand the selection of allowed tags as needed.
TtaskActionsControls whether the task actions icon is displayed or hidden, allowing users to show or conceal the icon based on their preferences or application state.
TtaskActionsRenderedDefines a callback function that is invoked whenever the task actions menu is generated in the UI. This function receives the actions menu element as its parameter, enabling you to modify or extend the menu's content and behavior. For example, you can insert custom menu items, attach event listeners, or alter existing elements within the menu.'Example usage:''''js(list) => { // Add a custom menu item list.innerHTML = '
Custom Item
'; // Attach a click handler to the menu list.onclick = () => { alert('Custom item clicked'); };}'''This callback provides full access to the task actions menu element, empowering you to tailor the menu to fit your specific requirements.
TtaskColorEntireSurfaceThe background color of a task is determined by its individual color property. By default, this color is visually represented as an accent along the left border of the task element, rather than filling the entire background. This design helps differentiate tasks based on their assigned colors while maintaining a consistent overall appearance.
TtaskCommentsControls whether the task comments icon is displayed or hidden, allowing you to show or conceal the icon associated with task comments.
TtaskCustomFieldsDefines which custom fields are shown on a task card and how they appear. This property accepts an array of objects, where each object represents a custom field configuration with the following properties:- 'dataField' (string, required): Specifies the unique key or identifier for the custom field. This determines which value will be displayed on the card.- 'label' (string, required): The display name or title of the field as it appears on the card.- 'dataType' (string, required): Indicates the field's data type (e.g., 'string', 'number', 'date'). Used to determine how the field value should be formatted or displayed.- 'visible' (boolean, optional): If set to 'true', the field is displayed on the card; if 'false', it is hidden. Defaults to 'true' if omitted.- 'image' (boolean, optional): Set to 'true' if the field value is an image URL or Base64 string. This tells the UI to render the value as an image instead of text.- 'cover' (boolean, optional): When 'image' is 'true', setting 'cover' to 'true' will display the image as the card’s cover image (typically at the top of the card).'Example usage:''''json[ { "dataField": "title", "label": "Task Title", "dataType": "string", "visible": true }, { "dataField": "dueDate", "label": "Due Date", "dataType": "date" }, { "dataField": "avatar", "label": "Assignee Photo", "dataType": "string", "image": true, "visible": true }, { "dataField": "coverImage", "label": "Project Cover", "dataType": "string", "image": true, "cover": true }]'''This configuration determines which fields are shown, how they're labeled, their format, and whether any field displays an image or acts as a cover image on the task card.
TtaskDueControls whether the task due date icon is shown or hidden in the interface. When enabled, the icon indicating a task's due date will be visible; when disabled, the icon will be hidden from view.
TtaskPositionDetermines whether tasks are displayed across all levels of the column hierarchy or are restricted to only the leaf (lowest-level) columns. When enabled, tasks can be shown in any column within the hierarchy; when disabled, tasks are displayed exclusively in the leaf columns. This setting allows you to control the visibility of tasks based on the column hierarchy structure.
TtaskPriorityControls whether the task priority icon is displayed. The icon appears when a task is marked as either low or high priority. Disabling this option will hide the icon regardless of the task’s priority status.
TtaskProgressControls whether the task progress bar and the label displaying the number of completed sub-tasks are shown or hidden. When enabled, both visual elements will be visible; when disabled, they will be hidden from view.
TtaskSubTasksSpecifies how sub-tasks are rendered within a task card. - '"none"' *(default)*: Sub-tasks are hidden on the task card and are only visible within the edit dialog. - '"onePerRow"': All sub-tasks associated with the task are displayed directly on the task card, with each sub-task shown on its own row. - '"onlyUnfinished"': Only sub-tasks that are not marked as completed are displayed on the task card; completed sub-tasks remain hidden.
TtaskSubTasksInputDisplays an input field within the task card, allowing users to dynamically add sub-tasks to the main task. To enable this feature, ensure that the 'taskSubTasks' property is set to a value other than 'none'. When 'taskSubTasks' is appropriately configured, users will see and be able to use the sub-task input interface.
TtaskTagsControls whether task tags are shown or hidden in the user interface, allowing users to display or conceal tag information associated with each task.
TtaskUserIconControls whether the task user icon is displayed or hidden, allowing you to show or hide the icon representing the user associated with a task.
TtextTemplateSpecifies the template to use for rendering task text. This property accepts multiple value types:- A string starting with #, which references the id of a template element on the page. The contents of this element will be used as the template.- A string containing HTML or template markup, which will be parsed and applied directly to the task text.- A function, which receives the task text (or a template) as input and returns the modified text or template to be used.This property can be both set to define the template for future tasks, or retrieved to access the currently applied template.
TthemeSpecifies the theme applied to the element. The theme controls the visual appearance, including colors, fonts, and overall style, ensuring a consistent look and feel across the component.
UunlockKeyGets or sets the unlockKey property, a unique key used to unlock or activate the product. This key is required to enable full access to product features.
UuserListControls the visibility of the user list—defined by the users property—when the user icon is clicked. This setting is only effective if editable privileges are enabled; otherwise, the user list will not be displayed regardless of this option.
UusersSpecifies the users eligible to be assigned Kanban tasks, along with their associated attributes (such as name, role, and status) and permissions (such as create, edit, or delete task capabilities). Click for more details. Property object's options:
  • allowAdd:boolean - Sets whether the user has a privilege to add or copy tasks.
  • allowComment:boolean - Sets whether the user has a privilege to add comments to tasks.
  • allowDrag:boolean - Sets whether the user has a privilege to drag tasks. Works along with the property allowDrag.
  • allowEdit:boolean - Sets whether the user has a privilege to edit tasks. Works along with the property editable.
  • allowRemove:boolean - Sets whether the user has a privilege to remove tasks.
  • id:string | number - The user's unique ID. Corresponds to the userId field in the data source and the property currentUser.
  • image:string - A url to an image representing the user.
  • name:string - The user's name as it will appear in the Users list and "Assigned to" editor.
columns.addNewButton
columns.allowRemove
columns.collapsed
columns.collapsible
columns.columns
columns.dataField
columns.editable
columns.headerTemplate
columns.label
columns.orientation
columns.reorder
columns.selected
columns.visible
columns.width
dataSource.checklist
dataSource.color
dataSource.comments
dataSource.dueDate
dataSource.id
dataSource.priority
dataSource.progress
dataSource.startDate
dataSource.status
dataSource.swimlane
dataSource.tags
dataSource.text
dataSource.userId
priority.label
priority.value
swimlanes.color
swimlanes.dataField
swimlanes.label
users.allowAdd
users.allowComment
users.allowDrag
users.allowEdit
users.allowRemove
users.id
users.image
users.name

Events

CchangeThis event is triggered whenever any changes are made to the details, status, or properties of an existing task. It allows you to respond programmatically whenever a task is modified, ensuring your application can stay synchronized with the latest task information.
CcloseThis event is triggered when the user closes the edit or prompt dialog, either by submitting changes or canceling the operation. It signals that the dialog has been dismissed and any associated actions, such as saving or discarding input, should be handled.
CclosingThis event fires just before the edit or prompt dialog is about to close, giving you an opportunity to intercept the closing action. By calling event.preventDefault() within the event handler, you can cancel the closing operation, allowing you to perform validation or prompt the user before the dialog is dismissed.
CcolumnAddThis event is triggered whenever a new column is successfully added to the data structure or interface. It allows you to respond to the addition of a column, such as updating the user interface, modifying related data, or performing custom logic. The event provides details about the added column, including its name, index, and relevant metadata.
CcolumnClickThis event is triggered whenever a user clicks on a column header within the data table. It can be used to initiate actions such as sorting the column, displaying a menu, or highlighting the selected column. The event typically provides information about which column was clicked, enabling you to implement custom logic based on the user's interaction.
CcolumnCollapseThis event is triggered whenever a column is collapsed, either by selecting the "Collapse" option from the column's action menu or by programmatically invoking the Kanban board's `collapse` method.
CcolumnDoubleClickThis event is triggered when a user double-clicks on a column header, typically in a data grid or table. It can be used to initiate actions such as resizing the column, sorting data, or displaying additional options related to the selected column.
CcolumnExpandThis event is triggered whenever a column in the Kanban board is expanded, either by a user selecting the "expand" option from the column's action menu or programmatically through the Kanban component's `expand` method.
CcolumnHideThis event is triggered whenever a column is hidden, either through the column's action menu or programmatically via the Kanban board’s `hide` method. Use this event to execute custom logic or UI updates whenever a column becomes invisible to the user.
CcolumnRemoveThis event is triggered whenever a column is deleted or removed from the data structure, table, or grid. It provides an opportunity to handle any necessary updates or clean-up tasks related to the removal of a column, such as updating the user interface, adjusting data bindings, or modifying underlying data sources. The event typically includes information about the column that was removed, allowing developers to respond dynamically to changes in the structure.
CcolumnReorderThis event is triggered whenever a user changes the position of a column, such as by dragging and dropping a column header to rearrange the column order in the table.
CcolumnShowThis event is triggered whenever a column becomes visible—either when a user selects the "Show" option from the column's action menu, or when the Kanban component's `show` method is programmatically called to reveal the column.
CcolumnUpdateThis event is triggered whenever the data in a column is updated. It occurs after any changes are made to the value(s) of a column, providing an opportunity to respond to or process the updated data. Listeners can use this event to execute custom logic, such as validating input, persisting changes, or updating related UI components.
CcommentAddThis event is triggered whenever a user adds a comment to a task within the Kanban board. It activates immediately after the comment is successfully posted, allowing you to respond to or process new task comments in real-time.
CcommentRemoveThis event is triggered whenever a comment is deleted from a task card within the Kanban board. It allows you to perform actions or updates in response to the removal of a comment from any Kanban task.
CcommentUpdateThis event is triggered whenever an existing comment on a Kanban Task is modified. It occurs after any changes are made to the comment’s content, such as edits or updates, allowing you to respond to or track comment modifications within the Kanban board.
DdragEndThis event is triggered when a task is dropped onto a target element within the DOM during a drag-and-drop operation. It allows developers to handle the completion of a drag action by responding to where the task is released. To prevent the default drop behavior—such as moving the element or initiating a browser action—you can call event.preventDefault() within the event handler. This enables you to implement custom logic for handling dropped tasks, such as updating data models, modifying the UI, or triggering other application-specific actions."
DdraggingThis event is triggered while the user is actively dragging a task, such as during a drag-and-drop operation. It fires continuously as the task is being moved, enabling real-time updates or visual feedback in response to the task's position.
DdragStartThis event is fired when the user initiates a drag action on one or more tasks. During the event, you can access information about the tasks being dragged. If you want to prevent the drag-and-drop operation from starting, you can call event.preventDefault() inside your event handler. This will cancel the dragging process and prevent any associated drag logic or UI changes from occurring.
FfilterThis event is triggered immediately after a user applies a filter to refine the displayed data. It indicates that the filter criteria have been set and the view has been updated accordingly. Developers can use this event to perform actions such as fetching new data, updating UI elements, or logging user interactions related to filtering.
OopenThis event is triggered whenever the edit or prompt dialog window is displayed to the user. It signals that the user interface has opened a dialog for editing content or requesting input, allowing developers to execute custom logic in response to the dialog becoming visible.
OopeningThis event is fired immediately before the edit or prompt dialog is displayed. You can intercept and prevent the dialog from opening by calling event.preventDefault() within your event handler. This allows you to provide your own custom dialog or take other actions instead of showing the default Kanban dialog. To stop the default Kanban dialog from appearing, simply call event.preventDefault() in the appropriate event handler function.
SsortThis event is triggered immediately after a sorting operation has been applied to the data set. It signifies that the data has been reordered based on the selected sorting criteria, and any relevant updates or UI refreshes can be performed in response to this change. The event may provide details about the sort field(s), direction (ascending or descending), and the affected data.
TtaskAddThis event fires whenever a new task is added to the Kanban board. The associated event object contains detailed information about the new task, accessible via the event's detail property. **Example usage:**```javascriptkanban.onTaskAdd = (event) => { const taskData = event.detail.value; // Contains the properties of the newly added task const taskId = event.detail.id; // Unique identifier of the new task}```**Description:** Use this event to execute custom logic or update your application whenever a user creates a new task. The `event.detail.value` provides the complete task data object, while `event.detail.id` gives you the unique ID assigned to that task.
TtaskBeforeAddThis event is fired immediately before a new task is added to the Kanban board. Within the event handler, you can access and modify the task's initial data using event.detail.value (which contains the task details) and event.detail.id (which represents the task's unique identifier). This allows you to customize attributes—such as assigning a specific ID or updating field values—before the task is officially added. **Example usage:**```jskanban.onTaskBeforeAdd = (event) => { const taskData = event.detail.value; // the task data before it is added const currentId = event.detail.id; // the proposed task ID event.detail.id = 'BG12'; // assign a custom ID before adding // Additional custom logic can be added here};```**Note:** Make any necessary changes to `event.detail.value` or `event.detail.id` within this handler to control how tasks are created and represented on your Kanban board.
TtaskClickThis event is fired when a user clicks on a task item, allowing you to execute custom logic in response to the interaction. It provides details about the clicked task, enabling you to access its data or update its state as needed.
TtaskDoubleClickThis event is triggered when a user double-clicks on a task element in the interface. It allows you to detect and respond to double-click actions performed specifically on individual tasks, enabling functionalities such as editing, viewing task details, or initiating other custom behaviors associated with a double-click interaction.
TtaskRemoveThis event is triggered whenever a task is deleted or removed from the system. It occurs immediately after a task is successfully deleted, allowing you to perform any necessary cleanup, updates, or notifications in response to the removal action.
TtaskUpdateThis event is triggered whenever a task undergoes an update, such as changes to its status, description, assigned users, due date, or any other task-related property. It allows listeners to respond in real time to modifications made to existing tasks.

Methods

AaddColumnAdds a new column to the Kanban board. If no column data is provided, a blank column with default settings will be created and added. If column data is specified, the column will be initialized with the provided properties.
AaddFilterEnables advanced filtering functionality for the data. For example, you can create a `Smart.FilterGroup` object to build complex filters. You might define a filter that checks if a 'Country' field contains the string 'Italy':```javascriptconst filterGroup = new Smart.FilterGroup();const filterObject = filterGroup.createFilter('string', 'Italy', 'contains');filterGroup.addFilter('and', filterObject);kanban.addFilter([['Country', filterGroup]]);```In this example, a filter group is created. A filter is then defined to match records where the 'Country' column contains the text 'Italy'. This filter is combined into the group with a logical 'and' operator and finally applied to the Kanban board using the `addFilter` method. This approach supports combining multiple filters with logical operators for dynamic and flexible data querying.
AaddSortEnables customizable sorting functionality for your kanban board data. You can specify one or more fields to sort by, along with the desired sort order (e.g., 'ascending' or 'descending'). Example usage: kanban.addSort(['Country'], 'ascending'); This will sort the kanban items in ascending order based on the 'Country' field. You can also pass multiple fields (e.g., kanban.addSort(['Country', 'Name'], 'descending')) to create multi-level sorting.
AaddTaskAdds a new task to a specified Kanban column. If no column or task data is provided, an empty task with default values will be created and placed in the first column of the Kanban board.
BbeginEditInitiates an edit operation, allowing modifications to be made to the current data or document. This operation typically marks the start of a transaction, enabling changes to be tracked and either saved (committed) or discarded (rolled back) upon completion.
CcancelEditTerminates the ongoing edit operation and reverts all unsaved changes, restoring the data to its previous state before the edit began.
CclearSelectionRemoves any currently selected items or cards within the Kanban board, ensuring that no items remain selected. This action resets the selection state of the Kanban component.
CclosePanelCloses any currently open header panel dropdown, ensuring that all active dropdown menus within the header section are hidden from view.
CcollapseCollapses a Kanban column, minimizing its contents and reducing its width to provide a more compact view of the board. This action hides the tasks within the column while keeping the column header visible, allowing users to focus on other sections of the Kanban board.
CcopyTaskCreates a duplicate of an existing task within the same column, preserving all task details such as title, description, assignees, and deadlines. The copied task will appear alongside the original in the same column, allowing for easy modification without affecting the original task.
EendEditCompletes the current editing session by finalizing any modifications made and persisting all changes to the underlying data source.
EensureVisibleEnsures that the specified task is brought into view within the scrollable container by automatically scrolling to its position. If the operation is successful, the method returns the corresponding HTML element representing the task.
EexpandExpands a Kanban board column to display all its contents, allowing users to view every card within the column in detail. This functionality makes it easier to manage, organize, and interact with all items in the selected column.
EexpandAllExpands every Kanban column to display all hidden or collapsed tasks, ensuring that all items within each column are fully visible.
EexportDataExports all current data from the Kanban board, including task details, statuses, columns, and any associated metadata, into a structured format (such as JSON or CSV) for backup, sharing, or integration purposes.
GgetColumnRetrieves detailed information about a specific column. The returned value is a JSON object containing the following fields:- label: The display name of the column.- dataField: The key or property name associated with the column's data.- collapsed: A boolean indicating whether the column is currently collapsed.- collapsible: A boolean specifying if the column can be collapsed or expanded by the user.- allowRemove: A boolean that determines whether the column can be removed from the view.- editable: A boolean indicating if the column's cells are editable.- reorder: A boolean specifying whether the column can be reordered by the user.- orientation: Describes the orientation of the column, such as "horizontal" or "vertical".Use this object to access or modify the configuration and behavior of the column in your application interface.
GgetConfirmDialogCreate an instance of the Window component which is used as a confirm dialog. It gets 3 arguments, label, content and confirm function.
GgetSelectedTasksRetrieves the IDs of all selected tasks. The returned value is an array, where each element represents the unique 'id' associated with a selected task. If no tasks are selected, the array will be empty.
GgetStateRetrieves the current state of the Kanban board as a comprehensive object. The returned object contains detailed information about the board's configuration and user interactions, structured as follows:```typescript{ collapsed: { // Tracks which Kanban columns or swimlanes are currently collapsed. // Keys represent the column or swimlane identifiers, and values indicate their collapsed state. [key: string]: boolean; }, dataSource: [ // An array of data objects representing all Kanban tasks/cards currently on the board. // Each item typically includes task details such as id, status, title, description, etc. ], filtering: { filters: [ // Array of filter objects currently applied. // Each filter describes criteria such as field, comparison operator, and value. ], operator: string; // Logical operator ("AND"/"OR") used to combine multiple filters. }, selection: { selected: [ // Array of IDs or references of currently selected tasks/cards. ], selectionStart?: number | string; // Optional: Identifies the first item in a selection range (useful for range selection with shift-click). selectionInColumn: string; // ID or name of the column where selection started or is active. swimlane: string; // ID or name of the currently active swimlane (if swimlanes are in use). }, sorting: { dataFields: [ // Array of fields currently used to sort the Kanban data (e.g., ["priority", "dueDate"]). ], dataTypes: [ // Corresponding data types for each sorting field (e.g., ["number", "date"]). ], orderBy: [ // Sort directions corresponding to each field ("asc" or "desc"). ] }, tabs: [ // List of tab states or identifiers, reflecting open and active views within the Kanban UI. ], visibility: { taskActions: boolean; // Whether task action buttons are visible. taskComments: boolean; // Whether task comments are shown. taskDue: boolean; // Whether due date indicators are visible. taskPriority: boolean; // Whether task priority display is enabled. taskProgress: boolean; // Whether task progress bars or indicators are shown. taskTags: boolean; // Whether tags associated with tasks are visible. taskUserIcon: boolean; // Whether user or assignee icons are visible on tasks. }}```This state object enables you to persist, inspect, or restore the Kanban board’s full interactive state, including data, UI settings, filters, sortings, selections, and visibility toggles. It is suitable for use cases such as saving the user’s workspace, synchronizing state across sessions, or debugging Kanban board behavior.
GgetTaskRetrieves detailed information about a specific task. The returned value is a JSON object containing the following fields:- checklist: An array of checklist items associated with the task - id: The unique identifier for the task - color: A string representing the task label or color code - comments: An array of comment objects related to the task - history: An array that records the chronological history of changes and activity for the task - dueDate: The date and time when the task is due - startDate: The date and time when the task is scheduled to start - priority: The task's priority level (e.g., low, medium, high) - progress: The percentage of task completion - status: The current status of the task (e.g., open, in progress, completed) - swimlane: The swimlane or category the task is assigned to - tags: An array of tags or keywords associated with the task - text: The task title or main summary - description: Detailed information about the task - userId: The identifier of the user currently assigned to the task - createdUserId: The identifier of the user who created the task - createdDate: The date and time when the task was created - updatedUserId: The identifier of the user who last updated the task - updatedDate: The date and time when the task was last updated This structured JSON object enables developers to access all relevant attributes for rendering and managing tasks within an application.
HhideConceals a specific column within a Kanban board, making its contents and tasks temporarily invisible to users without deleting any data. This action helps declutter the board or focus attention on other columns. The hidden column can typically be shown again through board settings or controls.
LloadStateRetrieves and initializes the current state of the Kanban board, including all columns, tasks, and their respective statuses, to ensure the user sees the latest project information.
MmoveTaskMoves a specified task from its current column to a target column within the workflow or board, updating its status and position accordingly.
OopenCustomizePanelDisplays the "Customize Tasks" header panel as a dropdown menu, allowing users to access and modify task customization options.
OopenFilterPanelDisplays the "Filter" panel by opening its dropdown menu in the header section, allowing users to access and apply filtering options.
OopenSortPanelDisplays the "Sort" header panel as a dropdown menu, allowing users to select sorting options for the displayed data.
RremoveColumnRemoves a specified column from the data set or table, effectively deleting all data contained within that column and updating the structure to reflect its absence. This operation is irreversible and affects any processes or queries that rely on the removed column.
RremoveFilterRemoves all applied filters, displaying the complete, unfiltered dataset.
RremoveSortDisables any previously applied sorting, returning the data to its original, unsorted order.
RremoveTaskDeletes a specified task from the task list, permanently removing it from the data store.
SsaveStatePersists the current state of the Kanban board—including all columns, cards, and their order—to the browser's localStorage. This ensures that the user's board layout and content are retained and automatically restored when the page is reloaded or the browser is reopened.
SselectTaskSelects a specific task from a list or collection, allowing the application to retrieve or highlight the chosen task's details for further actions such as viewing, editing, or managing it.
SshowDisplays a single Kanban column, including the column title and a list of tasks or cards assigned to that column. Ideal for use in Kanban boards to visually organize tasks by status or category within a workflow.
SshowAllColumnsDisplays a comprehensive list of all Kanban columns, including their names, order, and relevant metadata. This allows users or applications to view the complete structure of the Kanban board and manage workflow stages effectively.
UunselectTaskDeselects a previously selected task, removing its active or highlighted status within the user interface.
UupdateColumnUpdates the value of a specified column in a database table. This operation allows you to modify existing data by providing the column name and the new value to be set. Optionally, you can specify conditions to ensure that only rows matching certain criteria are updated.
UupdateTaskUpdates the details of an existing task, such as its title, description, status, due date, or assigned user.

Properties

addNewButtonControls whether the "Add Task" button is displayed at the top of each column. To hide the button for an individual column, set the addNewButton property to false within that column’s configuration object. If addNewButton is false, users will not see the "Add Task" button for that specific column.boolean

Controls whether the "Add Task" button is displayed at the top of each column. To hide the button for an individual column, set the addNewButton property to false within that column’s configuration object. If addNewButton is false, users will not see the "Add Task" button for that specific column.

Default value

false
Try a demo showcasing the addNewButton property.

Examples

Markup and runtime examples for addNewButton:

HTML attribute:

<smart-kanban add-new-button></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.addNewButton = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const addNewButton = el.addNewButton;

addNewButtonDisplayModeSpecifies whether the add button appears in the column header, after the list of tasks within the column, or both. This controls the visibility and placement of the add button for creating new tasks in each column."top" | "bottom" | "both"

Specifies whether the add button appears in the column header, after the list of tasks within the column, or both. This controls the visibility and placement of the add button for creating new tasks in each column.

Default value

"both"
Try a demo showcasing the addNewButtonDisplayMode property.

Examples

Markup and runtime examples for addNewButtonDisplayMode:

HTML:

<smart-kanban add-new-button-display-mode="both"></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.addNewButtonDisplayMode = "top";

Read the current value:

const el = document.querySelector('smart-kanban');
const addNewButtonDisplayMode = el.addNewButtonDisplayMode;

addNewColumnSpecifies whether a special column containing a button for adding new status columns to the Kanban board is shown. When enabled, this feature allows users to quickly create additional status columns directly within the Kanban interface. You can use this setting to display or hide the "Add Column" button column as needed.boolean

Specifies whether a special column containing a button for adding new status columns to the Kanban board is shown. When enabled, this feature allows users to quickly create additional status columns directly within the Kanban interface. You can use this setting to display or hide the "Add Column" button column as needed.

Default value

false
Try a demo showcasing the addNewColumn property.

Examples

Markup and runtime examples for addNewColumn:

HTML attribute:

<smart-kanban add-new-column></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.addNewColumn = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const addNewColumn = el.addNewColumn;

addNewColumnWidthSpecifies the width of the dynamically added "Add New" column. This property is effective only when the 'columnWidth' property is also set. It allows you to control the exact width (in pixels or other valid CSS units) of the new column that appears when adding columns dynamically to the table or grid.number | null

Specifies the width of the dynamically added "Add New" column. This property is effective only when the 'columnWidth' property is also set. It allows you to control the exact width (in pixels or other valid CSS units) of the new column that appears when adding columns dynamically to the table or grid.

Try a demo showcasing the addNewColumnWidth property.

Examples

Markup and runtime examples for addNewColumnWidth:

HTML:

<smart-kanban add-new-column-width="null"></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.addNewColumnWidth = 300;

Read the current value:

const el = document.querySelector('smart-kanban');
const addNewColumnWidth = el.addNewColumnWidth;

allowColumnEditControls whether column editing is permitted. When this property is set to true, users can dynamically edit the column's header label by double-clicking on it. This allows for in-place renaming of the column header directly within the user interface. If set to false, the column header label will remain static and cannot be modified by users.boolean

Controls whether column editing is permitted. When this property is set to true, users can dynamically edit the column's header label by double-clicking on it. This allows for in-place renaming of the column header directly within the user interface. If set to false, the column header label will remain static and cannot be modified by users.

Default value

false
Try a demo showcasing the allowColumnEdit property.

Examples

Markup and runtime examples for allowColumnEdit:

HTML attribute:

<smart-kanban allow-column-edit></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.allowColumnEdit = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const allowColumnEdit = el.allowColumnEdit;

allowColumnHideControls whether users can hide columns in the data table. When set to true, this property allows users to dynamically hide individual columns using the column actions menu. Note: To enable this feature, the 'columnActions' property must also be set to true.boolean

Controls whether users can hide columns in the data table. When set to true, this property allows users to dynamically hide individual columns using the column actions menu. Note: To enable this feature, the 'columnActions' property must also be set to true.

Default value

false
Try a demo showcasing the allowColumnHide property.

Examples

Markup and runtime examples for allowColumnHide:

HTML attribute:

<smart-kanban allow-column-hide></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.allowColumnHide = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const allowColumnHide = el.allowColumnHide;

allowColumnRemoveControls whether users can remove columns from the table. When set to true, a "Remove Column" option will appear in the column actions menu, allowing users to dynamically delete columns. Note: The 'columnActions' property must also be enabled (set to true) for this feature to be available.boolean

Controls whether users can remove columns from the table. When set to true, a "Remove Column" option will appear in the column actions menu, allowing users to dynamically delete columns. Note: The 'columnActions' property must also be enabled (set to true) for this feature to be available.

Default value

false
Try a demo showcasing the allowColumnRemove property.

Examples

Markup and runtime examples for allowColumnRemove:

HTML attribute:

<smart-kanban allow-column-remove></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.allowColumnRemove = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const allowColumnRemove = el.allowColumnRemove;

allowColumnReorderControls whether users can reorder columns in a table or grid. When set to true and used in combination with allowDrag enabled, this property lets users rearrange columns by dragging and dropping their headers. For example, a user can click and hold the header of the first column, then drag it to a new position over another column header and drop it, changing the column order visually and functionally. This enhances the user experience by allowing customizable column layouts.boolean

Controls whether users can reorder columns in a table or grid. When set to true and used in combination with allowDrag enabled, this property lets users rearrange columns by dragging and dropping their headers. For example, a user can click and hold the header of the first column, then drag it to a new position over another column header and drop it, changing the column order visually and functionally. This enhances the user experience by allowing customizable column layouts.

Default value

false
Try a demo showcasing the allowColumnReorder property.

Examples

Markup and runtime examples for allowColumnReorder:

HTML attribute:

<smart-kanban allow-column-reorder></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.allowColumnReorder = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const allowColumnReorder = el.allowColumnReorder;

allowDragEnables users to click and drag tasks within the interface, allowing them to easily reorder, move, or reorganize tasks by dragging and dropping them to the desired position.boolean

Enables users to click and drag tasks within the interface, allowing them to easily reorder, move, or reorganize tasks by dragging and dropping them to the desired position.

Default value

true
Try a demo showcasing the allowDrag property.

Examples

Markup and runtime examples for allowDrag:

HTML attribute:

<smart-kanban allow-drag></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.allowDrag = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const allowDrag = el.allowDrag;

allowDropEnables users to remove or discard tasks from the list or workflow, either by dragging and dropping or through a designated action, facilitating task management and organization.boolean

Enables users to remove or discard tasks from the list or workflow, either by dragging and dropping or through a designated action, facilitating task management and organization.

Default value

true
Try a demo showcasing the allowDrop property.

Examples

Markup and runtime examples for allowDrop:

HTML attribute:

<smart-kanban allow-drop></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.allowDrop = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const allowDrop = el.allowDrop;

allowDropPlaceholderEnables a visual placeholder to appear when dragging and dropping tasks. As you drag a task over another task, an empty space is dynamically created at the drop location, clearly indicating where the dragged task will be inserted. This improves usability by providing real-time visual feedback during task reordering.boolean

Enables a visual placeholder to appear when dragging and dropping tasks. As you drag a task over another task, an empty space is dynamically created at the drop location, clearly indicating where the dragged task will be inserted. This improves usability by providing real-time visual feedback during task reordering.

Default value

false
Try a demo showcasing the allowDropPlaceholder property.

Examples

Markup and runtime examples for allowDropPlaceholder:

HTML attribute:

<smart-kanban allow-drop-placeholder></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.allowDropPlaceholder = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const allowDropPlaceholder = el.allowDropPlaceholder;

applyColumnColorToTasksThis property controls the color styling of Kanban columns and their associated tasks. When set to true, and if a Kanban column has its color property defined, that color will not only visually highlight the column header but will also be applied to all tasks within that column, as well as to the background or accent color of the edit dialog for tasks in that column. This creates a consistent and visually cohesive color scheme throughout each column and its related UI elements.boolean

This property controls the color styling of Kanban columns and their associated tasks. When set to true, and if a Kanban column has its color property defined, that color will not only visually highlight the column header but will also be applied to all tasks within that column, as well as to the background or accent color of the edit dialog for tasks in that column. This creates a consistent and visually cohesive color scheme throughout each column and its related UI elements.

Default value

false
Try a demo showcasing the applyColumnColorToTasks property.

Examples

Markup and runtime examples for applyColumnColorToTasks:

HTML attribute:

<smart-kanban apply-column-color-to-tasks></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.applyColumnColorToTasks = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const applyColumnColorToTasks = el.applyColumnColorToTasks;

autoColumnHeightDynamically adjusts the height of each column based on the total height of its tasks, ensuring all content is fully visible. This property is effective only when 'columnColorEntireSurface' is set to true, allowing the background color to extend appropriately over the column’s entire surface.boolean

Dynamically adjusts the height of each column based on the total height of its tasks, ensuring all content is fully visible. This property is effective only when 'columnColorEntireSurface' is set to true, allowing the background color to extend appropriately over the column’s entire surface.

Default value

false
Try a demo showcasing the autoColumnHeight property.

Examples

Markup and runtime examples for autoColumnHeight:

HTML attribute:

<smart-kanban auto-column-height></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.autoColumnHeight = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const autoColumnHeight = el.autoColumnHeight;

autoLoadStateControls whether the application automatically loads its state from the browser’s localStorage. This includes restoring information such as:- The list of tasks and their positions- The selected task and its state- Applied filters and sorting options- The state of collapsed columns- The values of the following task-related properties: - taskActions - taskComments - taskDue - taskPriority - taskProgress - taskTags - taskUserIconWhen enabled, all of these details will be reloaded from localStorage on page refresh or reopening the application, ensuring a consistent user experience. When disabled, this information will not be loaded automatically, and the state will not be restored.boolean

Controls whether the application automatically loads its state from the browser’s localStorage. This includes restoring information such as:

- The list of tasks and their positions
- The selected task and its state
- Applied filters and sorting options
- The state of collapsed columns
- The values of the following task-related properties:
- taskActions
- taskComments
- taskDue
- taskPriority
- taskProgress
- taskTags
- taskUserIcon

When enabled, all of these details will be reloaded from localStorage on page refresh or reopening the application, ensuring a consistent user experience. When disabled, this information will not be loaded automatically, and the state will not be restored.

Default value

true
Try a demo showcasing the autoLoadState property.

Examples

Markup and runtime examples for autoLoadState:

HTML attribute:

<smart-kanban auto-load-state></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.autoLoadState = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const autoLoadState = el.autoLoadState;

autoSaveStateControls whether the application's current state is automatically saved to the browser's localStorage. When enabled, the following information is persistently stored and restored across sessions: - Task data, including their current positions, selected status, and any applied filters or sorting.- The collapsed or expanded state of columns.- Values for the following properties: - taskActions (user actions related to tasks) - taskComments (comments attached to tasks) - taskDue (task due dates) - taskPriority (priority level of tasks) - taskProgress (progress tracking for tasks) - taskTags (tags associated with each task) - taskUserIcon (user avatars/icons linked to tasks)This ensures that user preferences and the state of the task interface are preserved, providing a seamless user experience even after closing or refreshing the browser. Disabling this feature will prevent any state information from being stored in localStorage, and all settings will be reset upon page reload.boolean

Controls whether the application's current state is automatically saved to the browser's localStorage. When enabled, the following information is persistently stored and restored across sessions:

- Task data, including their current positions, selected status, and any applied filters or sorting.
- The collapsed or expanded state of columns.
- Values for the following properties:
- taskActions (user actions related to tasks)
- taskComments (comments attached to tasks)
- taskDue (task due dates)
- taskPriority (priority level of tasks)
- taskProgress (progress tracking for tasks)
- taskTags (tags associated with each task)
- taskUserIcon (user avatars/icons linked to tasks)

This ensures that user preferences and the state of the task interface are preserved, providing a seamless user experience even after closing or refreshing the browser. Disabling this feature will prevent any state information from being stored in localStorage, and all settings will be reset upon page reload.

Default value

false
Try a demo showcasing the autoSaveState property.

Examples

Markup and runtime examples for autoSaveState:

HTML attribute:

<smart-kanban auto-save-state></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.autoSaveState = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const autoSaveState = el.autoSaveState;

collapsibleEnables the card content to be expanded or collapsed, providing users with the ability to show or hide additional information within the card. This enhances the user interface by reducing visual clutter and allowing for more compact content presentation.boolean

Enables the card content to be expanded or collapsed, providing users with the ability to show or hide additional information within the card. This enhances the user interface by reducing visual clutter and allowing for more compact content presentation.

Default value

false
Try a demo showcasing the collapsible property.

Full working example

Minimal setup for collapsible with the data and bindings you usually use together on this component.

JavaScript — Kanban with collapsible:

const columns = [
	{ label: 'To do', dataField: 'todo' },
	{ label: 'Doing', dataField: 'inprogress' },
	{ label: 'Done', dataField: 'done' }
];

const dataSource = [
	{ id: '1', text: 'Draft docs', status: 'todo' },
	{ id: '2', text: 'Wire API', status: 'inprogress' }
];

const board = new Smart.Kanban('#myKanban', {
	columns,
	dataSource
});

columnActionsControls whether the column actions icon is displayed, allowing users to access additional options or actions for each table column. When enabled, the icon becomes visible; when disabled, the icon is hidden from view.boolean

Controls whether the column actions icon is displayed, allowing users to access additional options or actions for each table column. When enabled, the icon becomes visible; when disabled, the icon is hidden from view.

Default value

false
Try a demo showcasing the columnActions property.

Examples

Markup and runtime examples for columnActions:

HTML attribute:

<smart-kanban column-actions></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.columnActions = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const columnActions = el.columnActions;

columnColorEntireSurfaceRenders a customizable background within the Kanban column, allowing for enhanced visual separation and improved column identification. Supports various background options such as color, image, or pattern to match your application's design requirements.boolean

Renders a customizable background within the Kanban column, allowing for enhanced visual separation and improved column identification. Supports various background options such as color, image, or pattern to match your application's design requirements.

Default value

false
Try a demo showcasing the columnColorEntireSurface property.

Examples

Markup and runtime examples for columnColorEntireSurface:

HTML attribute:

<smart-kanban column-color-entire-surface></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.columnColorEntireSurface = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const columnColorEntireSurface = el.columnColorEntireSurface;

columnColorsDisplays a color indicator in the column header whenever the column's color property is defined. The header visually reflects the assigned color, making it easier to identify and distinguish columns based on their color settings.boolean

Displays a color indicator in the column header whenever the column's color property is defined. The header visually reflects the assigned color, making it easier to identify and distinguish columns based on their color settings.

Default value

false
Try a demo showcasing the columnColors property.

Examples

Markup and runtime examples for columnColors:

HTML attribute:

<smart-kanban column-colors></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.columnColors = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const columnColors = el.columnColors;

columnEditModeSpecifies how column editing is initiated within the interface. - When set to ''header'', editing mode is activated by double-clicking directly on the column's header label. - When set to ''menu'', editing can only be started through the column's context or 'columnActions' menu. - When set to ''headerAndMenu'', both methods are available—users can begin editing either by double-clicking the header or by selecting the relevant option from the column menu."header" | "menu" | "headerAndMenu"

Specifies how column editing is initiated within the interface.
- When set to ''header'', editing mode is activated by double-clicking directly on the column's header label.
- When set to ''menu'', editing can only be started through the column's context or 'columnActions' menu.
- When set to ''headerAndMenu'', both methods are available—users can begin editing either by double-clicking the header or by selecting the relevant option from the column menu.

Default value

"headerAndMenu"
Try a demo showcasing the columnEditMode property.

Examples

Markup and runtime examples for columnEditMode:

HTML:

<smart-kanban column-edit-mode="true"></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.columnEditMode = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const columnEditMode = el.columnEditMode;

columnFooterRenders a column footer that displays a summary value, such as totals or averages, for the data in that column. This footer helps users quickly interpret aggregate information at the bottom of the column.boolean

Renders a column footer that displays a summary value, such as totals or averages, for the data in that column. This footer helps users quickly interpret aggregate information at the bottom of the column.

Default value

false
Try a demo showcasing the columnFooter property.

Examples

Markup and runtime examples for columnFooter:

HTML attribute:

<smart-kanban column-footer></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.columnFooter = false;

Read the current value:

const el = document.querySelector('smart-kanban');
const columnFooter = el.columnFooter;

columnHeaderTemplateSpecifies whether a custom template is applied to the column header. Accepts a value of type string (containing template markup), function (returning a template or markup), or an HTMLTemplateElement. Use this property to customize the appearance and content of the column header beyond the default rendering.any

Specifies whether a custom template is applied to the column header. Accepts a value of type string (containing template markup), function (returning a template or markup), or an HTMLTemplateElement. Use this property to customize the appearance and content of the column header beyond the default rendering.

Try a demo showcasing the columnHeaderTemplate property.

Examples

Markup and runtime examples for columnHeaderTemplate:

HTML:

<smart-kanban column-header-template="#headerTemplate"></smart-kanban>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-kanban');
el.columnHeaderTemplate = "#headerCustomTemplate";

Read the current value:

const el = document.querySelector('smart-kanban');
const columnHeaderTemplate = el.columnHeaderTemplate;

columnsProvides detailed definitions and configuration options for each column’s properties, including attributes such as data type, default value, visibility, header label, and formatting options. Click for more details. Property object's options:
    { addNewButton?: boolean, collapsed?: boolean, collapsible?: boolean, columns?: [], dataField?: string, label?: string, orientation?: string, selected?: boolean }[]

    Provides detailed definitions and configuration options for each column’s properties, including attributes such as data type, default value, visibility, header label, and formatting options.

    Properties

    addNewButtonSets or gets whether the column's button for adding tasks is visible. Works in conjunction with the Kanban property of the same name.
    allowRemoveSets or gets whether the column can be removed from the column menu.
    collapsedSets or gets whether the column is collapsed.
    collapsibleSets or gets whether the column is collapsible. Works in conjunction with the Kanban property of the same name.
    columnsSets or gets the column's sub-columns. Sub-columns has the same properties as top-level columns.
    dataFieldSets or gets the column's data source bound field. Corresponds to the status field in the data source.
    labelSets or gets the text displayed in the column's header.
    editableSets or gets whether a column is editable.
    visibleSets or gets whether a column is visible.
    reorderSets or gets whether a column can be reordered.
    orientationSets or gets whether the tasks in the column flow vertically or horizontally.
    selectedSets or gets whether the column is selected. Only applicable to sub-columns when hierarchy is 'tabs'.
    headerTemplateDetermines whether a column header has a template. You can pass 'string', 'function' or HTMLTemplateElement as a value.
    widthSets the Kanban column width. When this property is set, the kanban column width is set and a horizontal scrollbar may appear.
    Try a demo showcasing the columns property.

    Full working example

    Minimal setup for columns with the data and bindings you usually use together on this component.

    JavaScript — Kanban with columns:

    const columns = [
	{ label: 'To do', dataField: 'todo' },
	{ label: 'Doing', dataField: 'inprogress' },
	{ label: 'Done', dataField: 'done' }
];

const dataSource = [
	{ id: '1', text: 'Draft docs', status: 'todo' },
	{ id: '2', text: 'Wire API', status: 'inprogress' }
];

const board = new Smart.Kanban('#myKanban', {
	columns,
	dataSource
});

    addNewButtonSets or gets whether the column's button for adding tasks is visible. Works in conjunction with the Kanban property of the same name.boolean

    Sets or gets whether the column's button for adding tasks is visible. Works in conjunction with the Kanban property of the same name.

    Default value

    true

    Back to root property: columns

    Try a demo showcasing the addNewButton property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const addNewButton = el.columns[0].addNewButton;

    allowRemoveSets or gets whether the column can be removed from the column menu.boolean

    Sets or gets whether the column can be removed from the column menu.

    Default value

    true

    Back to root property: columns

    Try a demo showcasing the allowRemove property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const allowRemove = el.columns[0].allowRemove;

    collapsedSets or gets whether the column is collapsed.boolean

    Sets or gets whether the column is collapsed.

    Default value

    false

    Back to root property: columns

    Try a demo showcasing the collapsed property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const collapsed = el.columns[0].collapsed;

    collapsibleSets or gets whether the column is collapsible. Works in conjunction with the Kanban property of the same name.boolean

    Sets or gets whether the column is collapsible. Works in conjunction with the Kanban property of the same name.

    Default value

    true

    Back to root property: columns

    Try a demo showcasing the collapsible property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const collapsible = el.columns[0].collapsible;

    columnsSets or gets the column's sub-columns. Sub-columns has the same properties as top-level columns.{ addNewButton?: boolean, collapsed?: string, collapsible?: string, columns?: [], dataField?: string, label?: string, orientation?: string, selected?: string }[]

    Sets or gets the column's sub-columns. Sub-columns has the same properties as top-level columns.

    Back to root property: columns

    Try a demo showcasing the columns property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const columns = el.columns[0].columns;

    dataFieldSets or gets the column's data source bound field. Corresponds to the status field in the data source.string

    Sets or gets the column's data source bound field. Corresponds to the status field in the data source.

    Default value

    ""

    Back to root property: columns

    Try a demo showcasing the dataField property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const dataField = el.columns[0].dataField;

    editableSets or gets whether a column is editable.boolean

    Sets or gets whether a column is editable.

    Default value

    true

    Back to root property: columns

    Try a demo showcasing the editable property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const editable = el.columns[0].editable;

    headerTemplateDetermines whether a column header has a template. You can pass 'string', 'function' or HTMLTemplateElement as a value.any

    Determines whether a column header has a template. You can pass 'string', 'function' or HTMLTemplateElement as a value.

    Back to root property: columns

    Try a demo showcasing the headerTemplate property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const headerTemplate = el.columns[0].headerTemplate;

    labelSets or gets the text displayed in the column's header.string

    Sets or gets the text displayed in the column's header.

    Default value

    ""

    Back to root property: columns

    Try a demo showcasing the label property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const label = el.columns[0].label;

    orientationSets or gets whether the tasks in the column flow vertically or horizontally."vertical" | "horizontal"

    Sets or gets whether the tasks in the column flow vertically or horizontally.

    Default value

    "vertical"

    Back to root property: columns

    Try a demo showcasing the orientation property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const orientation = el.columns[0].orientation;

    reorderSets or gets whether a column can be reordered.boolean

    Sets or gets whether a column can be reordered.

    Default value

    true

    Back to root property: columns

    Try a demo showcasing the reorder property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const reorder = el.columns[0].reorder;

    selectedSets or gets whether the column is selected. Only applicable to sub-columns when hierarchy is 'tabs'.boolean

    Sets or gets whether the column is selected. Only applicable to sub-columns when hierarchy is 'tabs'.

    Default value

    false

    Back to root property: columns

    Try a demo showcasing the selected property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const selected = el.columns[0].selected;

    visibleSets or gets whether a column is visible.boolean

    Sets or gets whether a column is visible.

    Default value

    true

    Back to root property: columns

    Try a demo showcasing the visible property.

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const visible = el.columns[0].visible;

    widthSets the Kanban column width. When this property is set, the kanban column width is set and a horizontal scrollbar may appear.number | null

    Sets the Kanban column width. When this property is set, the kanban column width is set and a horizontal scrollbar may appear.

    Back to root property: columns

    Try a demo showcasing the width property.

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-kanban');
el.columns[0].width = 300;

    Read the nested value:

    const el = document.querySelector('smart-kanban');
const width = el.columns[0].width;

    columnSummarySpecifies whether the number of tasks is shown in the headers of each column, allowing users to see the count of tasks directly within the column titles.boolean

    Specifies whether the number of tasks is shown in the headers of each column, allowing users to see the count of tasks directly within the column titles.

    Default value

    false
    Try a demo showcasing the columnSummary property.

    Examples

    Markup and runtime examples for columnSummary:

    HTML attribute:

    <smart-kanban column-summary></smart-kanban>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-kanban');
el.columnSummary = false;

    Read the current value:

    const el = document.querySelector('smart-kanban');
const columnSummary = el.columnSummary;

    columnWidthDefines the width for each Kanban column. When this property is specified, all Kanban columns are rendered at the given width. If the total width of all columns exceeds the available space, a horizontal scrollbar will appear, allowing users to scroll and view all columns.number | null

    Defines the width for each Kanban column. When this property is specified, all Kanban columns are rendered at the given width. If the total width of all columns exceeds the available space, a horizontal scrollbar will appear, allowing users to scroll and view all columns.

    Try a demo showcasing the columnWidth property.

    Examples

    Markup and runtime examples for columnWidth:

    HTML:

    <smart-kanban column-width="null"></smart-kanban>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-kanban');
el.columnWidth = 300;

    Read the current value:

    const el = document.querySelector('smart-kanban');
const columnWidth = el.columnWidth;

    confirmDialogControls whether a confirm dialog is displayed when a task is dragged and dropped to a new positionboolean

    Controls whether a confirm dialog is displayed when a task is dragged and dropped to a new position

    Default value

    false
    Try a demo showcasing the confirmDialog property.

    Examples

    Markup and runtime examples for confirmDialog:

    HTML attribute:

    <smart-kanban confirm-dialog></smart-kanban>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-kanban');
el.confirmDialog = false;

    Read the current value:

    const el = document.querySelector('smart-kanban');
const confirmDialog = el.confirmDialog;

    currentUserSets or retrieves the ID of the currently active user. This value must match the 'id' of a user object within the 'users' property or array. The privileges and access rights available are determined based on the current user's identity. If no current user is specified, the element's permissions default to those defined by its own properties, rather than user-specific settings.string | number

    Sets or retrieves the ID of the currently active user. This value must match the 'id' of a user object within the 'users' property or array. The privileges and access rights available are determined based on the current user's identity. If no current user is specified, the element's permissions default to those defined by its own properties, rather than user-specific settings.

    Default value

    ""
    Try a demo showcasing the currentUser property.

    Examples

    Markup and runtime examples for currentUser:

    HTML:

    <smart-kanban current-user="1"></smart-kanban>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-kanban');
el.currentUser = 2;

    Read the current value:

    const el = document.querySelector('smart-kanban');
const currentUser = el.currentUser;

    dataSourceSpecifies the origin or source of the data to be displayed and managed on the Kanban board, such as an API endpoint, database, or local data array. This setting dictates which dataset will populate the Kanban columns and cards. Click for more details. Property object's options:
      { id: string | number, checklist?: { completed?: boolean, text?: string }[], color?: string, comments?: { text?: string, time?: Date, userId: string | number }[], dueDate?: Date, priority?: string, progress?: number, startDate?: Date, status?: string, swimlane?: string, tags?: string, text?: string, userId?: string | number }[]

      Specifies the origin or source of the data to be displayed and managed on the Kanban board, such as an API endpoint, database, or local data array. This setting dictates which dataset will populate the Kanban columns and cards.

      Properties

      idThe task's unique ID.
      checklistA list of sub-tasks.
      colorA color used to highlight the task's card visually.
      commentsComments about a task.
      dueDateThe task's due date.
      priorityThe task's priority.
      progressThe task's progress in percentages - a number from 0 to 100.
      startDateThe task's start date.
      statusThe task's status. Has to correspond to the dataField of a column or sub-column from the columns property/array.
      swimlaneThe swimlane of the task. Has to correspond to the dataField of a swimlane from the swimlanes property/array, if it is defined.
      tagsA comma-separated list of tags.
      textThe text of the task.
      userIdThe ID of the user assigned to the task. Has to correspond to the id of an item from the users property/array.
      Try a demo showcasing the dataSource property.

      Full working example

      Minimal setup for dataSource with the data and bindings you usually use together on this component.

      JavaScript — Kanban with dataSource:

      const columns = [
	{ label: 'To do', dataField: 'todo' },
	{ label: 'Doing', dataField: 'inprogress' },
	{ label: 'Done', dataField: 'done' }
];

const dataSource = [
	{ id: '1', text: 'Draft docs', status: 'todo' },
	{ id: '2', text: 'Wire API', status: 'inprogress' }
];

const board = new Smart.Kanban('#myKanban', {
	columns,
	dataSource
});

      checklistA list of sub-tasks.{ completed?: boolean, text?: string }[]

      A list of sub-tasks.

      Back to root property: dataSource

      Try a demo showcasing the checklist property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const checklist = el.dataSource.checklist;

      colorA color used to highlight the task's card visually.string

      A color used to highlight the task's card visually.

      Default value

      "null"

      Back to root property: dataSource

      Try a demo showcasing the color property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const color = el.dataSource.color;

      commentsComments about a task.{ text?: string, time?: Date, userId: string | number }[]

      Comments about a task.

      Back to root property: dataSource

      Try a demo showcasing the comments property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const comments = el.dataSource.comments;

      dueDateThe task's due date.Date

      The task's due date.

      Back to root property: dataSource

      Try a demo showcasing the dueDate property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const dueDate = el.dataSource.dueDate;

      idThe task's unique ID.string | number

      The task's unique ID.

      Default value

      ""

      Back to root property: dataSource

      Try a demo showcasing the id property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const id = el.dataSource.id;

      priorityThe task's priority.string

      The task's priority.

      Default value

      "normal"

      Back to root property: dataSource

      Try a demo showcasing the priority property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const priority = el.dataSource.priority;

      progressThe task's progress in percentages - a number from 0 to 100.number

      The task's progress in percentages - a number from 0 to 100.

      Back to root property: dataSource

      Try a demo showcasing the progress property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const progress = el.dataSource.progress;

      startDateThe task's start date.Date

      The task's start date.

      Back to root property: dataSource

      Try a demo showcasing the startDate property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const startDate = el.dataSource.startDate;

      statusThe task's status. Has to correspond to the dataField of a column or sub-column from the columns property/array.string

      The task's status. Has to correspond to the dataField of a column or sub-column from the columns property/array.

      Default value

      ""

      Back to root property: dataSource

      Try a demo showcasing the status property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const status = el.dataSource.status;

      swimlaneThe swimlane of the task. Has to correspond to the dataField of a swimlane from the swimlanes property/array, if it is defined.string

      The swimlane of the task. Has to correspond to the dataField of a swimlane from the swimlanes property/array, if it is defined.

      Default value

      "null"

      Back to root property: dataSource

      Try a demo showcasing the swimlane property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const swimlane = el.dataSource.swimlane;

      tagsA comma-separated list of tags.string

      A comma-separated list of tags.

      Default value

      ""

      Back to root property: dataSource

      Try a demo showcasing the tags property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const tags = el.dataSource.tags;

      textThe text of the task.string

      The text of the task.

      Default value

      ""

      Back to root property: dataSource

      Try a demo showcasing the text property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const text = el.dataSource.text;

      userIdThe ID of the user assigned to the task. Has to correspond to the id of an item from the users property/array.string | number

      The ID of the user assigned to the task. Has to correspond to the id of an item from the users property/array.

      Back to root property: dataSource

      Try a demo showcasing the userId property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const userId = el.dataSource.userId;

      dataSourceMapSpecifies how the Kanban board's default fields (e.g., title, status, assignee) correspond to the fields in your data source. Use this mapping only if your data source uses field names that differ from the Kanban's expected keywords. If the field names already match, this mapping is optional. Note that only certain default fields support custom mapping; not all default map can be overridden.{ checklist?: string; color?: string; comments?: string; dueDate?: string; id?: string; priority?: string; progress?: string; startDate?: string; status?: string; swimlane?: string; tags?: string; text?: string; userId?: string; createdUserId?: string; updatedUserId?: string; createdDate?: Date; updatedDate?: Date;}

      Specifies how the Kanban board's default fields (e.g., title, status, assignee) correspond to the fields in your data source. Use this mapping only if your data source uses field names that differ from the Kanban's expected keywords. If the field names already match, this mapping is optional. Note that only certain default fields support custom mapping; not all default map can be overridden.

      Default value

      { checklist: 'checklist', color: 'color', comments: 'comments', dueDate: 'dueDate', id: 'id', priority: 'priority', progress: 'progress', startDate: 'startDate', status: 'status', swimlane: 'swimlane', tags: 'tags', text: 'text', userId: 'userId'. createdUserId: 'createdUserId', createdDate: 'createdDate', updatedUserId: 'updatedUserId', updatedDate: 'updatedDate' }
      Try a demo showcasing the dataSourceMap property.

      Full working example

      Minimal setup for dataSourceMap with the data and bindings you usually use together on this component.

      JavaScript — Kanban with dataSourceMap:

      const columns = [
	{ label: 'To do', dataField: 'todo' },
	{ label: 'Doing', dataField: 'inprogress' },
	{ label: 'Done', dataField: 'done' }
];

const dataSource = [
	{ id: '1', text: 'Draft docs', status: 'todo' },
	{ id: '2', text: 'Wire API', status: 'inprogress' }
];

const board = new Smart.Kanban('#myKanban', {
	columns,
	dataSource
});

      dialogCustomizationFunctionSets or retrieves a customization function for the Kanban dialog component. This function allows you to modify the appearance and behavior of the dialog, or to replace it entirely with a custom implementation. When invoked, the Kanban component calls this function with five arguments:- 'dialog': The default dialog instance, typically a 'smart-window' object, which serves as the default modal dialog for tasks and comments.- 'taskOrComment': The data object representing either a Kanban task or a comment, depending on the context of the action.- 'editors': An object containing the input elements or editors used within the dialog for data entry or modification.- 'purpose': A string indicating the dialog’s intent, such as ''add'' for creating a new item or ''edit'' for modifying an existing one.- 'type': A string specifying the entity being processed, such as ''task'' for task-related dialogs or ''column'' for column-related dialogs.By providing a custom function, you can tailor the dialog’s UI, integrate additional logic, or substitute a completely different dialog component to meet your application's requirements.any

      Sets or retrieves a customization function for the Kanban dialog component. This function allows you to modify the appearance and behavior of the dialog, or to replace it entirely with a custom implementation. When invoked, the Kanban component calls this function with five arguments:

      - 'dialog': The default dialog instance, typically a 'smart-window' object, which serves as the default modal dialog for tasks and comments.
      - 'taskOrComment': The data object representing either a Kanban task or a comment, depending on the context of the action.
      - 'editors': An object containing the input elements or editors used within the dialog for data entry or modification.
      - 'purpose': A string indicating the dialog’s intent, such as ''add'' for creating a new item or ''edit'' for modifying an existing one.
      - 'type': A string specifying the entity being processed, such as ''task'' for task-related dialogs or ''column'' for column-related dialogs.

      By providing a custom function, you can tailor the dialog’s UI, integrate additional logic, or substitute a completely different dialog component to meet your application's requirements.

      Try a demo showcasing the dialogCustomizationFunction property.

      dialogRenderedSets or retrieves the callback function that is executed when the dialog is rendered. This function is invoked by the Kanban component and receives six arguments: dialog, editors, labels, tabs, layout, and taskOrComment.- 'dialog': The 'smart-window' instance representing the Kanban dialog.- 'taskOrComment': An object representing either the current Kanban task or a comment, depending on the context in which the dialog is opened.- 'editors, labels, tabs, layout': Each is a JSON object where keys specify the element type (e.g., 'description', 'priority', 'notes'), and the values are their corresponding HTML elements within the dialog.This function allows developers to customize the dialog content or behavior dynamically based on the element types and the associated data when the dialog is rendered.any

      Sets or retrieves the callback function that is executed when the dialog is rendered. This function is invoked by the Kanban component and receives six arguments: dialog, editors, labels, tabs, layout, and taskOrComment.

      - 'dialog': The 'smart-window' instance representing the Kanban dialog.
      - 'taskOrComment': An object representing either the current Kanban task or a comment, depending on the context in which the dialog is opened.
      - 'editors, labels, tabs, layout': Each is a JSON object where keys specify the element type (e.g., 'description', 'priority', 'notes'), and the values are their corresponding HTML elements within the dialog.

      This function allows developers to customize the dialog content or behavior dynamically based on the element types and the associated data when the dialog is rendered.

      Try a demo showcasing the dialogRendered property.

      disableDialogControls whether the default dialog for adding or removing tasks or comments is enabled or disabled. When set to true, the dialog will not appear, allowing for custom handling of these actions. When set to false, the standard dialog will be shown as usual. This property can be used to either retrieve the current setting (get) or define its behavior (set).boolean

      Controls whether the default dialog for adding or removing tasks or comments is enabled or disabled. When set to true, the dialog will not appear, allowing for custom handling of these actions. When set to false, the standard dialog will be shown as usual. This property can be used to either retrieve the current setting (get) or define its behavior (set).

      Default value

      false
      Try a demo showcasing the disableDialog property.

      Examples

      Markup and runtime examples for disableDialog:

      HTML attribute:

      <smart-kanban disable-dialog></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.disableDialog = false;

      Read the current value:

      const el = document.querySelector('smart-kanban');
const disableDialog = el.disableDialog;

      dragOffsetSpecifies the offset, in pixels, between the drag feedback element and the mouse cursor during task dragging operations. The value should be provided as an array: the first element sets the horizontal (x-axis) offset, and the second element sets the vertical (y-axis) offset, both relative to the cursor position. Alternatively, if set to 'auto', the system automatically calculates the offset based on the cursor’s position at the moment the drag action began. This allows for precise control over the visual positioning of the feedback element during drag-and-drop interactions.boolean

      Specifies the offset, in pixels, between the drag feedback element and the mouse cursor during task dragging operations. The value should be provided as an array: the first element sets the horizontal (x-axis) offset, and the second element sets the vertical (y-axis) offset, both relative to the cursor position. Alternatively, if set to 'auto', the system automatically calculates the offset based on the cursor’s position at the moment the drag action began. This allows for precise control over the visual positioning of the feedback element during drag-and-drop interactions.

      Default value

      auto

      Examples

      Markup and runtime examples for dragOffset:

      HTML attribute:

      <smart-kanban drag-offset></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.dragOffset = auto;

      Read the current value:

      const el = document.querySelector('smart-kanban');
const dragOffset = el.dragOffset;

      editableControls whether tasks can be modified, including editing task details and assigning users to tasks. When enabled, users can update task information and manage task assignments; when disabled, tasks and their assigned users are read-only and cannot be changed programmatically or through the user interface.boolean

      Controls whether tasks can be modified, including editing task details and assigning users to tasks. When enabled, users can update task information and manage task assignments; when disabled, tasks and their assigned users are read-only and cannot be changed programmatically or through the user interface.

      Default value

      false
      Try a demo showcasing the editable property.

      Full working example

      Minimal setup for editable with the data and bindings you usually use together on this component.

      JavaScript — Kanban with editable:

      const columns = [
	{ label: 'To do', dataField: 'todo' },
	{ label: 'Doing', dataField: 'inprogress' },
	{ label: 'Done', dataField: 'done' }
];

const dataSource = [
	{ id: '1', text: 'Draft docs', status: 'todo' },
	{ id: '2', text: 'Wire API', status: 'inprogress' }
];

const board = new Smart.Kanban('#myKanban', {
	columns,
	dataSource
});

      editModeSpecifies how users can activate the task editing feature. The 'editBehavior' property accepts either '"singleClick"' or '"doubleClick"' as values:- '"singleClick"': Opens the dialog edit window when the user clicks once on a Kanban task.- '"doubleClick"' (default): Opens the dialog edit window when the user double-clicks on a Kanban task.By default, editing is triggered by a double-click. Use this setting to customize the interaction based on your application's needs."doubleClick" | "singleClick"

      Specifies how users can activate the task editing feature. The 'editBehavior' property accepts either '"singleClick"' or '"doubleClick"' as values:

      - '"singleClick"': Opens the dialog edit window when the user clicks once on a Kanban task.
      - '"doubleClick"' (default): Opens the dialog edit window when the user double-clicks on a Kanban task.

      By default, editing is triggered by a double-click. Use this setting to customize the interaction based on your application's needs.

      Default value

      "doubleClick"
      Try a demo showcasing the editMode property.

      Examples

      Markup and runtime examples for editMode:

      HTML:

      <smart-kanban edit-mode="doubleClick"></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.editMode = "singleClick";

      Read the current value:

      const el = document.querySelector('smart-kanban');
const editMode = el.editMode;

      formatStringDateSets or retrieves the format string used to display the "Due date" label, as well as the date format for both the "Start date" and "Due date" editor fields. This determines how dates are shown and entered in these UI components.string

      Sets or retrieves the format string used to display the "Due date" label, as well as the date format for both the "Start date" and "Due date" editor fields. This determines how dates are shown and entered in these UI components.

      Default value

      "d"
      Try a demo showcasing the formatStringDate property.

      Examples

      Markup and runtime examples for formatStringDate:

      HTML:

      <smart-kanban format-string-date="dddd-MMMM-yyyy"></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.formatStringDate = "M/d/yyyy";

      Read the current value:

      const el = document.querySelector('smart-kanban');
const formatStringDate = el.formatStringDate;

      formatStringTimeSpecifies or retrieves the format string used to display the timestamp on comments. This determines how the date and time of each comment are presented (e.g., "YYYY-MM-DD HH:mm:ss").string

      Specifies or retrieves the format string used to display the timestamp on comments. This determines how the date and time of each comment are presented (e.g., "YYYY-MM-DD HH:mm:ss").

      Default value

      "MMM d, HH:mm"

      Examples

      Markup and runtime examples for formatStringTime:

      HTML:

      <smart-kanban format-string-time="HH:mm"></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.formatStringTime = "MMM d, h:mm tt";

      Read the current value:

      const el = document.querySelector('smart-kanban');
const formatStringTime = el.formatStringTime;

      headerPositionSets or retrieves the position of the header section within the user interface. The header typically contains interactive controls such as Customize, Filter, Sort, and Search buttons, allowing users to adjust and manipulate the displayed data according to their preferences."none" | "top" | "bottom"

      Sets or retrieves the position of the header section within the user interface. The header typically contains interactive controls such as Customize, Filter, Sort, and Search buttons, allowing users to adjust and manipulate the displayed data according to their preferences.

      Default value

      "none"
      Try a demo showcasing the headerPosition property.

      Examples

      Markup and runtime examples for headerPosition:

      HTML:

      <smart-kanban header-position="top"></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.headerPosition = "bottom";

      Read the current value:

      const el = document.querySelector('smart-kanban');
const headerPosition = el.headerPosition;

      hierarchyDefines or retrieves how the column hierarchy is structured and displayed, specifying the method or format used to represent the relationships between columns within the component or dataset."columns" | "tabs"

      Defines or retrieves how the column hierarchy is structured and displayed, specifying the method or format used to represent the relationships between columns within the component or dataset.

      Allowed Values

      • "columns" - Sub-columns are represented as nested columns.
      • "tabs" - Sub-columns are represented as nested tabs. In this case, each sub-column has the property selected that denotes if its contents is visible.

      Default value

      "columns"
      Try a demo showcasing the hierarchy property.

      Examples

      Markup and runtime examples for hierarchy:

      HTML:

      <smart-kanban hierarchy="tabs"></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.hierarchy = "columns";

      Read the current value:

      const el = document.querySelector('smart-kanban');
const hierarchy = el.hierarchy;

      localeSets or retrieves the current locale (language and regional settings) used by the component. This property determines the language in which messages are displayed, and works together with the messages property, which provides localized message strings for each supported locale. Adjusting the locale will change the displayed text to correspond with the selected language from the messages definitions.string

      Sets or retrieves the current locale (language and regional settings) used by the component. This property determines the language in which messages are displayed, and works together with the messages property, which provides localized message strings for each supported locale. Adjusting the locale will change the displayed text to correspond with the selected language from the messages definitions.

      Default value

      "en"
      Try a demo showcasing the locale property.

      Examples

      Markup and runtime examples for locale:

      HTML:

      <smart-kanban locale="de"></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.locale = "fr";

      Read the current value:

      const el = document.querySelector('smart-kanban');
const locale = el.locale;

      messagesDefines or retrieves an object containing the strings displayed in the widget, allowing for easy localization of text. This property works together with the locale property to support multiple languages and adapt the user interface based on the selected locale. Use this to provide translated labels, messages, and other widget text for internationalization.object

      Defines or retrieves an object containing the strings displayed in the widget, allowing for easy localization of text. This property works together with the locale property to support multiple languages and adapt the user interface based on the selected locale. Use this to provide translated labels, messages, and other widget text for internationalization.

      Default value




      Try a demo showcasing the messages property.

      Examples

      Markup and runtime examples for messages:

      HTML:

      <smart-kanban messages="{ 'he': { 'addFilter': 'הוסף פילטר', 'and': 'ו', 'apply': 'להגיש מועמדות', 'booleanFirst': '☐', 'booleanLast': '☑', 'cancel': 'בטל', 'CONTAINS': 'מכיל', 'CONTAINS_CASE_SENSITIVE': 'מכיל (רגיש רישיות)', 'dateFirst': '1', 'dateLast': '9', 'DOES_NOT_CONTAIN': 'לא מכיל', 'DOES_NOT_CONTAIN_CASE_SENSITIVE': 'אינו מכיל (רגיש רישיות)', 'EMPTY': 'ריק', 'ENDS_WITH': 'נגמר עם', 'ENDS_WITH_CASE_SENSITIVE': 'מסתיים ב (רגיש רישיות)', 'EQUAL': 'שווה', 'EQUAL_CASE_SENSITIVE': 'שווה (רגיש אותיות רישיות)', 'filter': 'סנן', 'filteredByMultiple': '{{n}} פילטרים', 'filteredByOne': '1 פילטר', 'filterValuePlaceholder': 'ערך', 'find': 'מצא שדה', 'findInView': 'מצא בתצוגה', 'firstBy': 'מיין לפי', 'found': '{{nth}} מתוך {{n}}', 'from': 'מ', 'GREATER_THAN': 'גדול מ', 'GREATER_THAN_OR_EQUAL': 'גדול או שווה', 'LESS_THAN': 'פחות מ', 'LESS_THAN_OR_EQUAL': 'פחות מ או שווה', 'noFilters': 'לא הוחל מסננים', 'noResults': 'אין תוצאות', 'noSorting': 'לא מיושם מיון', 'NOT_EMPTY': 'לא ריק', 'NOT_EQUAL': 'לא שווה', 'NOT_NULL': 'לא ריק', 'NULL': 'ריק', 'numberFirst': '1', 'numberLast': '9', 'ok': 'בסדר', 'or': 'או', 'pickAnother': 'בחר שדה אחר למיין לפי', 'sort': 'סוג', 'sortedByMultiple': 'ממוין לפי שדות {{n}}', 'sortedByOne': 'מסודר לפי שדה 1', 'STARTS_WITH': 'starts with', 'STARTS_WITH_CASE_SENSITIVE': 'מתחיל עם', 'stringFirst': 'א', 'stringLast': 'ז', 'thenBy': 'ואז על ידי', 'where': 'איפה', 'actionsIcon': 'סמל פעולות', 'addNewStatus': 'סטטוס חדש', 'addNewTask': 'הוסף משימה חדשה', 'addSubtask': 'הוסף משימת משנה', 'assignedTo': 'שהוקצה ל', 'checklist': 'רשימת מטלות', 'color': 'צבע', 'commentsIcon': 'סמל הערות', 'copy': 'עותק', 'customize': 'התאם אישית משימות', 'dueDate': 'תאריך להגשה', 'edit': 'ערוך', 'editTask': 'ערוך את המשימה "{{taskId}}"', 'high': 'גבוה', 'low': 'נמוך', 'newComment': 'תגובה חדשה', 'newSubtask': 'תת-משימה חדשה', 'normal': 'רגיל', 'priority': 'עדיפות', 'priorityIcon': 'סמל עדיפות', 'progress': 'התקדמות', 'promptComment': 'האם אתה בטוח שברצונך להסיר תגובה זו?', 'promptTask': 'האם אתה בטוח שברצונך להסיר את המשימה "{{taskText}}"?', 'remove': 'הסר', 'removeSubtask': 'הסר את תת המשנה', 'send': 'שלח', 'startDate': 'תאריך התחלה', 'status': 'סטטוס', 'swimlane': 'נתיב שחייה', 'tags': 'תגיות', 'text': 'טקסט', 'userId': 'תעודת זהות של המשתמש', 'userIcon': 'סמל משתמש' } }"></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.messages = { 'en': { 'addFilter': '+ Add filter', 'and': 'And', 'apply': 'Apply', 'booleanFirst': '☐', 'booleanLast': '☑', 'cancel': 'Cancel', 'CONTAINS': 'contains', 'CONTAINS_CASE_SENSITIVE': 'contains (case sensitive)', 'dateFirst': '1', 'dateLast': '9', 'DOES_NOT_CONTAIN': 'does not contain', 'DOES_NOT_CONTAIN_CASE_SENSITIVE': 'does not contain (case sensitive)', 'EMPTY': 'empty', 'ENDS_WITH': 'ends with', 'ENDS_WITH_CASE_SENSITIVE': 'ends with (case sensitive)', 'EQUAL': 'equal', 'EQUAL_CASE_SENSITIVE': 'equal (case sensitive)', 'filter': 'Filter', 'filteredByMultiple': '{{n}} filters', 'filteredByOne': '1 filter', 'filterValuePlaceholder': 'Value', 'find': 'Find a field', 'findInView': 'Find in view', 'firstBy': 'Sort by', 'found': '{{nth}} of {{n}}', 'from': 'from', 'GREATER_THAN': 'greater than', 'GREATER_THAN_OR_EQUAL': 'greater than or equal', 'LESS_THAN': 'less than', 'LESS_THAN_OR_EQUAL': 'less than or equal', 'noFilters': 'No filters applied', 'noResults': 'No results', 'noSorting': 'No sorting applied', 'NOT_EMPTY': 'not empty', 'NOT_EQUAL': 'not equal', 'NOT_NULL': 'not null', 'NULL': 'null', 'numberFirst': '1', 'numberLast': '9', 'ok': 'OK', 'or': 'Or', 'pickAnother': 'Pick another field to sort by', 'sort': 'Sort', 'sortedByMultiple': 'Sorted by {{n}} fields', 'sortedByOne': 'Sorted by 1 field', 'STARTS_WITH': 'starts with', 'STARTS_WITH_CASE_SENSITIVE': 'starts with (case sensitive)', 'stringFirst': 'A', 'stringLast': 'Z', 'thenBy': 'then by', 'where': 'Where', 'actionsIcon': 'Actions icon', 'addNewStatus': 'New status', 'addNewTask': 'Add new task', 'addSubtask': 'Add subtask', 'assignedTo': 'Assigned to', 'checklist': 'Checklist', 'color': 'Color', 'commentsIcon': 'Comments icon', 'copy': 'Copy', 'customize': 'Customize tasks', 'dueDate': 'Due date', 'edit': 'Edit', 'editTask': 'Edit task "{{taskId}}"', 'high': 'High', 'low': 'Low', 'newComment': 'New comment', 'newSubtask': 'New subtask', 'normal': 'Normal', 'priority': 'Priority', 'priorityIcon': 'Priority icon', 'progress': 'Progress', 'promptComment': 'Are you sure you want to remove this comment?', 'promptTask': 'Are you sure you want to remove the task "{{taskText}}"?', 'remove': 'Remove', 'removeSubtask': 'Remove subtask', 'send': 'Send', 'startDate': 'Start date', 'status': 'Status', 'swimlane': 'Swimlane', 'tags': 'Tags', 'text': 'Text', 'userId': 'User ID', 'userIcon': 'User icon' } };

      Read the current value:

      const el = document.querySelector('smart-kanban');
const messages = el.messages;

      onColumnFooterRenderCallback function that allows you to customize how the column footer is rendered in the Kanban component. This function is invoked with three arguments:1. The HTML element representing the column header2. The data object for the current column3. The field name associated with the column dataUse this callback to modify the footer's appearance or content based on the specific column's properties and data.any

      Callback function that allows you to customize how the column footer is rendered in the Kanban component. This function is invoked with three arguments:

      1. The HTML element representing the column header
      2. The data object for the current column
      3. The field name associated with the column data

      Use this callback to modify the footer's appearance or content based on the specific column's properties and data.

      Try a demo showcasing the onColumnFooterRender property.

      onColumnHeaderRenderCallback function that allows customization of the column header rendering in the Kanban component. This function is invoked with three arguments: the column header's HTML element, the complete column data object, and the column's data field (a string representing the key associated with the column). Use this callback to modify or enhance the appearance and behavior of column headers as needed.any

      Callback function that allows customization of the column header rendering in the Kanban component. This function is invoked with three arguments: the column header's HTML element, the complete column data object, and the column's data field (a string representing the key associated with the column). Use this callback to modify or enhance the appearance and behavior of column headers as needed.

      Try a demo showcasing the onColumnHeaderRender property.

      onFilterPrepareCallback function that enables customization of the filter items displayed in the dropdown. It receives a single argument: an array containing all the items available for filtering. Within the function, you can modify this array—such as by updating, removing, or reordering items—to control which options appear in the filter dropdown and how they are presented to the user. The modified array will determine the final set of filter options shown in the UI.any

      Callback function that enables customization of the filter items displayed in the dropdown. It receives a single argument: an array containing all the items available for filtering. Within the function, you can modify this array—such as by updating, removing, or reordering items—to control which options appear in the filter dropdown and how they are presented to the user. The modified array will determine the final set of filter options shown in the UI.

      Try a demo showcasing the onFilterPrepare property.

      onSortPrepareA callback function that allows you to customize the items displayed in the sort dropdown menu. This function receives a single argument: an array containing all available sort options. You can modify this array—by removing, reordering, or updating items—to control which sorting options appear in the dropdown and how they are presented. The modified array will then be used to render the sort options to the user.any

      A callback function that allows you to customize the items displayed in the sort dropdown menu. This function receives a single argument: an array containing all available sort options. You can modify this array—by removing, reordering, or updating items—to control which sorting options appear in the dropdown and how they are presented. The modified array will then be used to render the sort options to the user.

      Try a demo showcasing the onSortPrepare property.

      onTaskRenderCallback function that allows you to customize how tasks are rendered within the Kanban board. This function is invoked by the Kanban component and receives two arguments: 1. The HTML element representing the task (taskHtmlElement).2. The data object associated with the task (taskData).You can use this callback to modify the appearance, add event listeners, or inject additional content into the task's HTML element based on its data.any

      Callback function that allows you to customize how tasks are rendered within the Kanban board. This function is invoked by the Kanban component and receives two arguments:

      1. The HTML element representing the task (taskHtmlElement).
      2. The data object associated with the task (taskData).

      You can use this callback to modify the appearance, add event listeners, or inject additional content into the task's HTML element based on its data.

      Try a demo showcasing the onTaskRender property.

      prioritySpecifies the available priority levels that can be assigned to Kanban tasks. This array defines each priority as an object containing a label (for display purposes) and a corresponding value (for internal use). Example: [{label: 'Low', value: 'low'}, {label: 'High', value: 'high'}] Use this property to customize or extend the set of priority options in your Kanban board. { label: string, value: string }[]

      Specifies the available priority levels that can be assigned to Kanban tasks. This array defines each priority as an object containing a label (for display purposes) and a corresponding value (for internal use).
      Example: [{label: 'Low', value: 'low'}, {label: 'High', value: 'high'}]
      Use this property to customize or extend the set of priority options in your Kanban board.

      Properties

      labelThe priority label displayed.
      valueThe priority value.
      Try a demo showcasing the priority property.

      Examples

      Markup and runtime examples for priority:

      HTML:

      <smart-kanban priority="true"></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.priority = false;

      Read the current value:

      const el = document.querySelector('smart-kanban');
const priority = el.priority;

      labelThe priority label displayed.string

      The priority label displayed.

      Default value

      ""

      Back to root property: priority

      Try a demo showcasing the label property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const label = el.priority.label;

      valueThe priority value.string

      The priority value.

      Default value

      ""

      Back to root property: priority

      Try a demo showcasing the value property.

      Read the nested value:

      const el = document.querySelector('smart-kanban');
const value = el.priority.value;

      priorityListControls the visibility of the priority list (as specified by the priority property) when the user clicks the priority icon. This option is only effective when users have editable privileges enabled, allowing them to modify the priority value. If set to true, the list will appear on icon click; if false, the list will remain hidden.boolean

      Controls the visibility of the priority list (as specified by the priority property) when the user clicks the priority icon. This option is only effective when users have editable privileges enabled, allowing them to modify the priority value. If set to true, the list will appear on icon click; if false, the list will remain hidden.

      Default value

      false
      Try a demo showcasing the priorityList property.

      Examples

      Markup and runtime examples for priorityList:

      HTML attribute:

      <smart-kanban priority-list></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.priorityList = false;

      Read the current value:

      const el = document.querySelector('smart-kanban');
const priorityList = el.priorityList;

      readonlyControls the read-only state of the edit dialog. When enabled, the dialog displays task details but disables all editing capabilities for those fields. However, if the comments feature is active, users can still add comments within the dialog, even while other fields remain uneditable.boolean

      Controls the read-only state of the edit dialog. When enabled, the dialog displays task details but disables all editing capabilities for those fields. However, if the comments feature is active, users can still add comments within the dialog, even while other fields remain uneditable.

      Default value

      false
      Try a demo showcasing the readonly property.

      Examples

      Markup and runtime examples for readonly:

      HTML attribute:

      <smart-kanban readonly></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.readonly = true;

      Read the current value:

      const el = document.querySelector('smart-kanban');
const readonly = el.readonly;

      rightToLeftSets or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) text direction, which is typically used in languages such as Arabic or Hebrew. When enabled, the element layout and text flow will support RTL locales, ensuring proper display for right-to-left scripts.boolean

      Sets or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) text direction, which is typically used in languages such as Arabic or Hebrew. When enabled, the element layout and text flow will support RTL locales, ensuring proper display for right-to-left scripts.

      Default value

      false
      Try a demo showcasing the rightToLeft property.

      Examples

      Markup and runtime examples for rightToLeft:

      HTML attribute:

      <smart-kanban right-to-left></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.rightToLeft = true;

      Read the current value:

      const el = document.querySelector('smart-kanban');
const rightToLeft = el.rightToLeft;

      selectionModeSpecifies how items can be selected within the component, such as allowing single selection, multiple selections, or disabling selection entirely."zeroOrOne" | "zeroOrManyExtended"

      Specifies how items can be selected within the component, such as allowing single selection, multiple selections, or disabling selection entirely.

      Allowed Values

      • "zeroOrOne" - Only one task can optionally be selected.
      • "zeroOrManyExtended" - One or more items can optionally be selected; selection with Ctrl and Shift is allowed.

      Default value

      "zeroOrOne"
      Try a demo showcasing the selectionMode property.

      Examples

      Markup and runtime examples for selectionMode:

      HTML:

      <smart-kanban selection-mode="zeroOrManyExtended"></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.selectionMode = "zeroOrOne";

      Read the current value:

      const el = document.querySelector('smart-kanban');
const selectionMode = el.selectionMode;

      storeHistorySpecifies whether the history of tasks is recorded and shown within the task dialog. When enabled, completed or previous tasks will be saved and displayed, allowing users to review their task activity directly in the dialog. When disabled, task history will not be retained or visible. This setting can be used to set or retrieve the current history display behavior.boolean

      Specifies whether the history of tasks is recorded and shown within the task dialog. When enabled, completed or previous tasks will be saved and displayed, allowing users to review their task activity directly in the dialog. When disabled, task history will not be retained or visible. This setting can be used to set or retrieve the current history display behavior.

      Default value

      false

      Examples

      Markup and runtime examples for storeHistory:

      HTML attribute:

      <smart-kanban store-history></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.storeHistory = true;

      Read the current value:

      const el = document.querySelector('smart-kanban');
const storeHistory = el.storeHistory;

      storeHistoryItemsSpecifies the collection of task history items to be retrieved or updated when the storeHistory option is enabled. When storeHistory is true, this property determines which task history records are saved and accessed.number

      Specifies the collection of task history items to be retrieved or updated when the storeHistory option is enabled. When storeHistory is true, this property determines which task history records are saved and accessed.

      Default value

      20

      Examples

      Markup and runtime examples for storeHistoryItems:

      HTML:

      <smart-kanban store-history-items="10"></smart-kanban>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-kanban');
el.storeHistoryItems = 30;

      Read the current value:

      const el = document.querySelector('smart-kanban');
const storeHistoryItems = el.storeHistoryItems;

      swimlanesProvides a detailed configuration of swimlanes on the Kanban board, specifying how tasks are grouped horizontally by categories such as assignee, priority, or project. When swimlanes are enabled, sub-columns within each column are disabled to maintain a clear visual separation of items across swimlanes. Click for more details. Property object's options:
        string | { color?: string, dataField?: string, label?: string }[]

        Provides a detailed configuration of swimlanes on the Kanban board, specifying how tasks are grouped horizontally by categories such as assignee, priority, or project. When swimlanes are enabled, sub-columns within each column are disabled to maintain a clear visual separation of items across swimlanes.

        Properties

        colorThe swimlane's color.
        dataFieldSets or gets the swimlane's data source bound field. Corresponds to the swimlane field in the data source.
        labelSets or gets the text displayed in the swimlane.
        Try a demo showcasing the swimlanes property.

        Examples

        Markup and runtime examples for swimlanes:

        HTML:

        <smart-kanban swimlanes="{ label: 'Client Energo', dataField: 'client1' }, { label: 'Client Sim-Prod Ltd.', dataField: 'client2', color: '#C90086' }"></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.swimlanes = { label: 'Client Sim-Prod Ltd.', dataField: 'client2', color: '#C90086' }, { label: 'Other clients', dataField: 'other', color: '#03C7C0' };

        Read the current value:

        const el = document.querySelector('smart-kanban');
const swimlanes = el.swimlanes;

        colorThe swimlane's color.string

        The swimlane's color.

        Default value

        "null"

        Back to root property: swimlanes

        Try a demo showcasing the color property.

        Read the nested value:

        const el = document.querySelector('smart-kanban');
const color = el.swimlanes[0].color;

        dataFieldSets or gets the swimlane's data source bound field. Corresponds to the swimlane field in the data source.string

        Sets or gets the swimlane's data source bound field. Corresponds to the swimlane field in the data source.

        Default value

        ""

        Back to root property: swimlanes

        Try a demo showcasing the dataField property.

        Read the nested value:

        const el = document.querySelector('smart-kanban');
const dataField = el.swimlanes[0].dataField;

        labelSets or gets the text displayed in the swimlane.string

        Sets or gets the text displayed in the swimlane.

        Default value

        ""

        Back to root property: swimlanes

        Try a demo showcasing the label property.

        Read the nested value:

        const el = document.querySelector('smart-kanban');
const label = el.swimlanes[0].label;

        swimlanesFromSpecifies or retrieves the zero-based index of the column where the swimlanes should begin. This determines the starting position for rendering swimlanes within a grid or table layout.number

        Specifies or retrieves the zero-based index of the column where the swimlanes should begin. This determines the starting position for rendering swimlanes within a grid or table layout.

        Default value

        0
        Try a demo showcasing the swimlanesFrom property.

        Examples

        Markup and runtime examples for swimlanesFrom:

        HTML:

        <smart-kanban swimlanes-from="1"></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.swimlanesFrom = 3;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const swimlanesFrom = el.swimlanesFrom;

        swimlanesToSpecifies or retrieves the zero-based index of the column where the swimlanes should terminate. By default, swimlanes extend to the final column in the layout. Setting this property allows you to control at which column the swimlanes will stop, providing flexibility in customizing the swimlane display.number

        Specifies or retrieves the zero-based index of the column where the swimlanes should terminate. By default, swimlanes extend to the final column in the layout. Setting this property allows you to control at which column the swimlanes will stop, providing flexibility in customizing the swimlane display.

        Try a demo showcasing the swimlanesTo property.

        Examples

        Markup and runtime examples for swimlanesTo:

        HTML:

        <smart-kanban swimlanes-to="4"></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.swimlanesTo = 3;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const swimlanesTo = el.swimlanesTo;

        tagsSpecifies the permitted tags that can be used. When this property is set, only the listed tags will be allowed; if no tags are specified, all tags provided by the data source are accepted by default. This property can be used to restrict or expand the selection of allowed tags as needed. []

        Specifies the permitted tags that can be used. When this property is set, only the listed tags will be allowed; if no tags are specified, all tags provided by the data source are accepted by default. This property can be used to restrict or expand the selection of allowed tags as needed.

        Try a demo showcasing the tags property.

        Examples

        Markup and runtime examples for tags:

        HTML:

        <smart-kanban tags="['method', 'data']"></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.tags = ['research', 'property', 'localization'];

        Read the current value:

        const el = document.querySelector('smart-kanban');
const tags = el.tags;

        taskActionsControls whether the task actions icon is displayed or hidden, allowing users to show or conceal the icon based on their preferences or application state.boolean

        Controls whether the task actions icon is displayed or hidden, allowing users to show or conceal the icon based on their preferences or application state.

        Default value

        false
        Try a demo showcasing the taskActions property.

        Examples

        Markup and runtime examples for taskActions:

        HTML attribute:

        <smart-kanban task-actions></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.taskActions = false;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const taskActions = el.taskActions;

        taskActionsRenderedDefines a callback function that is invoked whenever the task actions menu is generated in the UI. This function receives the actions menu element as its parameter, enabling you to modify or extend the menu's content and behavior. For example, you can insert custom menu items, attach event listeners, or alter existing elements within the menu.'Example usage:''''js(list) => { // Add a custom menu item list.innerHTML = '
        Custom Item
        '; // Attach a click handler to the menu list.onclick = () => { alert('Custom item clicked'); };}'''This callback provides full access to the task actions menu element, empowering you to tailor the menu to fit your specific requirements.        any



        Defines a callback function that is invoked whenever the task actions menu is generated in the UI. This function receives the actions menu element as its parameter, enabling you to modify or extend the menu's content and behavior. For example, you can insert custom menu items, attach event listeners, or alter existing elements within the menu.

        'Example usage:'
        '''js
        (list) => {
        // Add a custom menu item
        list.innerHTML = '

        Custom Item
        ';
        // Attach a click handler to the menu
        list.onclick = () => {
        alert('Custom item clicked');
        };
        }
        '''

        This callback provides full access to the task actions menu element, empowering you to tailor the menu to fit your specific requirements.

        Try a demo showcasing the taskActionsRendered property.

        taskColorEntireSurfaceThe background color of a task is determined by its individual color property. By default, this color is visually represented as an accent along the left border of the task element, rather than filling the entire background. This design helps differentiate tasks based on their assigned colors while maintaining a consistent overall appearance.boolean

        The background color of a task is determined by its individual color property. By default, this color is visually represented as an accent along the left border of the task element, rather than filling the entire background. This design helps differentiate tasks based on their assigned colors while maintaining a consistent overall appearance.

        Default value

        false
        Try a demo showcasing the taskColorEntireSurface property.

        Examples

        Markup and runtime examples for taskColorEntireSurface:

        HTML attribute:

        <smart-kanban task-color-entire-surface></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.taskColorEntireSurface = false;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const taskColorEntireSurface = el.taskColorEntireSurface;

        taskCommentsControls whether the task comments icon is displayed or hidden, allowing you to show or conceal the icon associated with task comments.boolean

        Controls whether the task comments icon is displayed or hidden, allowing you to show or conceal the icon associated with task comments.

        Default value

        false
        Try a demo showcasing the taskComments property.

        Examples

        Markup and runtime examples for taskComments:

        HTML attribute:

        <smart-kanban task-comments></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.taskComments = false;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const taskComments = el.taskComments;

        taskCustomFieldsDefines which custom fields are shown on a task card and how they appear. This property accepts an array of objects, where each object represents a custom field configuration with the following properties:- 'dataField' (string, required): Specifies the unique key or identifier for the custom field. This determines which value will be displayed on the card.- 'label' (string, required): The display name or title of the field as it appears on the card.- 'dataType' (string, required): Indicates the field's data type (e.g., 'string', 'number', 'date'). Used to determine how the field value should be formatted or displayed.- 'visible' (boolean, optional): If set to 'true', the field is displayed on the card; if 'false', it is hidden. Defaults to 'true' if omitted.- 'image' (boolean, optional): Set to 'true' if the field value is an image URL or Base64 string. This tells the UI to render the value as an image instead of text.- 'cover' (boolean, optional): When 'image' is 'true', setting 'cover' to 'true' will display the image as the card’s cover image (typically at the top of the card).'Example usage:''''json[ { "dataField": "title", "label": "Task Title", "dataType": "string", "visible": true }, { "dataField": "dueDate", "label": "Due Date", "dataType": "date" }, { "dataField": "avatar", "label": "Assignee Photo", "dataType": "string", "image": true, "visible": true }, { "dataField": "coverImage", "label": "Project Cover", "dataType": "string", "image": true, "cover": true }]'''This configuration determines which fields are shown, how they're labeled, their format, and whether any field displays an image or acts as a cover image on the task card. array



        Defines which custom fields are shown on a task card and how they appear. This property accepts an array of objects, where each object represents a custom field configuration with the following properties:

        - 'dataField' (string, required): Specifies the unique key or identifier for the custom field. This determines which value will be displayed on the card.
        - 'label' (string, required): The display name or title of the field as it appears on the card.
        - 'dataType' (string, required): Indicates the field's data type (e.g., 'string', 'number', 'date'). Used to determine how the field value should be formatted or displayed.
        - 'visible' (boolean, optional): If set to 'true', the field is displayed on the card; if 'false', it is hidden. Defaults to 'true' if omitted.
        - 'image' (boolean, optional): Set to 'true' if the field value is an image URL or Base64 string. This tells the UI to render the value as an image instead of text.
        - 'cover' (boolean, optional): When 'image' is 'true', setting 'cover' to 'true' will display the image as the card’s cover image (typically at the top of the card).

        'Example usage:'
        '''json
        [
        {
        "dataField": "title",
        "label": "Task Title",
        "dataType": "string",
        "visible": true
        },
        {
        "dataField": "dueDate",
        "label": "Due Date",
        "dataType": "date"
        },
        {
        "dataField": "avatar",
        "label": "Assignee Photo",
        "dataType": "string",
        "image": true,
        "visible": true
        },
        {
        "dataField": "coverImage",
        "label": "Project Cover",
        "dataType": "string",
        "image": true,
        "cover": true
        }
        ]
        '''
        This configuration determines which fields are shown, how they're labeled, their format, and whether any field displays an image or acts as a cover image on the task card.

        Try a demo showcasing the taskCustomFields property.

        taskDueControls whether the task due date icon is shown or hidden in the interface. When enabled, the icon indicating a task's due date will be visible; when disabled, the icon will be hidden from view.boolean

        Controls whether the task due date icon is shown or hidden in the interface. When enabled, the icon indicating a task's due date will be visible; when disabled, the icon will be hidden from view.

        Default value

        false
        Try a demo showcasing the taskDue property.

        Examples

        Markup and runtime examples for taskDue:

        HTML attribute:

        <smart-kanban task-due></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.taskDue = false;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const taskDue = el.taskDue;

        taskPositionDetermines whether tasks are displayed across all levels of the column hierarchy or are restricted to only the leaf (lowest-level) columns. When enabled, tasks can be shown in any column within the hierarchy; when disabled, tasks are displayed exclusively in the leaf columns. This setting allows you to control the visibility of tasks based on the column hierarchy structure."all" | "leaf"

        Determines whether tasks are displayed across all levels of the column hierarchy or are restricted to only the leaf (lowest-level) columns. When enabled, tasks can be shown in any column within the hierarchy; when disabled, tasks are displayed exclusively in the leaf columns. This setting allows you to control the visibility of tasks based on the column hierarchy structure.

        Allowed Values

        • "all" - Tasks can be shown in all levels of column hierarchy.
        • "leaf" - Tasks can be shown only on leaf columns.

        Default value

        "false"
        Try a demo showcasing the taskPosition property.

        Examples

        Markup and runtime examples for taskPosition:

        HTML:

        <smart-kanban task-position="leaf"></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.taskPosition = "all";

        Read the current value:

        const el = document.querySelector('smart-kanban');
const taskPosition = el.taskPosition;

        taskPriorityControls whether the task priority icon is displayed. The icon appears when a task is marked as either low or high priority. Disabling this option will hide the icon regardless of the task’s priority status.boolean

        Controls whether the task priority icon is displayed. The icon appears when a task is marked as either low or high priority. Disabling this option will hide the icon regardless of the task’s priority status.

        Default value

        true
        Try a demo showcasing the taskPriority property.

        Examples

        Markup and runtime examples for taskPriority:

        HTML attribute:

        <smart-kanban task-priority></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.taskPriority = false;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const taskPriority = el.taskPriority;

        taskProgressControls whether the task progress bar and the label displaying the number of completed sub-tasks are shown or hidden. When enabled, both visual elements will be visible; when disabled, they will be hidden from view.boolean

        Controls whether the task progress bar and the label displaying the number of completed sub-tasks are shown or hidden. When enabled, both visual elements will be visible; when disabled, they will be hidden from view.

        Default value

        false
        Try a demo showcasing the taskProgress property.

        Examples

        Markup and runtime examples for taskProgress:

        HTML attribute:

        <smart-kanban task-progress></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.taskProgress = false;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const taskProgress = el.taskProgress;

        taskSubTasksSpecifies how sub-tasks are rendered within a task card. - '"none"' *(default)*: Sub-tasks are hidden on the task card and are only visible within the edit dialog. - '"onePerRow"': All sub-tasks associated with the task are displayed directly on the task card, with each sub-task shown on its own row. - '"onlyUnfinished"': Only sub-tasks that are not marked as completed are displayed on the task card; completed sub-tasks remain hidden."none" | "onePerRow" | "onlyUnfinished"

        Specifies how sub-tasks are rendered within a task card.
        - '"none"' *(default)*: Sub-tasks are hidden on the task card and are only visible within the edit dialog.
        - '"onePerRow"': All sub-tasks associated with the task are displayed directly on the task card, with each sub-task shown on its own row.
        - '"onlyUnfinished"': Only sub-tasks that are not marked as completed are displayed on the task card; completed sub-tasks remain hidden.

        Default value

        "none"
        Try a demo showcasing the taskSubTasks property.

        Examples

        Markup and runtime examples for taskSubTasks:

        HTML:

        <smart-kanban task-sub-tasks="onePerRow"></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.taskSubTasks = "onlyUnfinished";

        Read the current value:

        const el = document.querySelector('smart-kanban');
const taskSubTasks = el.taskSubTasks;

        taskSubTasksInputDisplays an input field within the task card, allowing users to dynamically add sub-tasks to the main task. To enable this feature, ensure that the 'taskSubTasks' property is set to a value other than 'none'. When 'taskSubTasks' is appropriately configured, users will see and be able to use the sub-task input interface.boolean

        Displays an input field within the task card, allowing users to dynamically add sub-tasks to the main task. To enable this feature, ensure that the 'taskSubTasks' property is set to a value other than 'none'. When 'taskSubTasks' is appropriately configured, users will see and be able to use the sub-task input interface.

        Default value

        true
        Try a demo showcasing the taskSubTasksInput property.

        Examples

        Markup and runtime examples for taskSubTasksInput:

        HTML attribute:

        <smart-kanban task-sub-tasks-input></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.taskSubTasksInput = false;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const taskSubTasksInput = el.taskSubTasksInput;

        taskTagsControls whether task tags are shown or hidden in the user interface, allowing users to display or conceal tag information associated with each task.boolean

        Controls whether task tags are shown or hidden in the user interface, allowing users to display or conceal tag information associated with each task.

        Default value

        true
        Try a demo showcasing the taskTags property.

        Examples

        Markup and runtime examples for taskTags:

        HTML attribute:

        <smart-kanban task-tags></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.taskTags = false;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const taskTags = el.taskTags;

        taskUserIconControls whether the task user icon is displayed or hidden, allowing you to show or hide the icon representing the user associated with a task.boolean

        Controls whether the task user icon is displayed or hidden, allowing you to show or hide the icon representing the user associated with a task.

        Default value

        true
        Try a demo showcasing the taskUserIcon property.

        Examples

        Markup and runtime examples for taskUserIcon:

        HTML attribute:

        <smart-kanban task-user-icon></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.taskUserIcon = false;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const taskUserIcon = el.taskUserIcon;

        textTemplateSpecifies the template to use for rendering task text. This property accepts multiple value types:- A string starting with #, which references the id of a template element on the page. The contents of this element will be used as the template.- A string containing HTML or template markup, which will be parsed and applied directly to the task text.- A function, which receives the task text (or a template) as input and returns the modified text or template to be used.This property can be both set to define the template for future tasks, or retrieved to access the currently applied template.string | (settings: { data: any, task: HTMLDivElement, text: string, template?: string }) => void

        Specifies the template to use for rendering task text. This property accepts multiple value types:

        - A string starting with #, which references the id of a template element on the page. The contents of this element will be used as the template.
        - A string containing HTML or template markup, which will be parsed and applied directly to the task text.
        - A function, which receives the task text (or a template) as input and returns the modified text or template to be used.

        This property can be both set to define the template for future tasks, or retrieved to access the currently applied template.

        Try a demo showcasing the textTemplate property.

        Examples

        Markup and runtime examples for textTemplate:

        HTML:

        <smart-kanban text-template="true"></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.textTemplate = false;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const textTemplate = el.textTemplate;

        themeSpecifies the theme applied to the element. The theme controls the visual appearance, including colors, fonts, and overall style, ensuring a consistent look and feel across the component.string

        Specifies the theme applied to the element. The theme controls the visual appearance, including colors, fonts, and overall style, ensuring a consistent look and feel across the component.

        Default value

        ""

        Examples

        Markup and runtime examples for theme:

        HTML:

        <smart-kanban theme="blue"></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.theme = "red";

        Read the current value:

        const el = document.querySelector('smart-kanban');
const theme = el.theme;

        unlockKeyGets or sets the unlockKey property, a unique key used to unlock or activate the product. This key is required to enable full access to product features.string

        Gets or sets the unlockKey property, a unique key used to unlock or activate the product. This key is required to enable full access to product features.

        Default value

        ""

        Examples

        Markup and runtime examples for unlockKey:

        HTML:

        <smart-kanban unlock-key=""></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.unlockKey = "1111-2222-3333-4444-5555";

        Read the current value:

        const el = document.querySelector('smart-kanban');
const unlockKey = el.unlockKey;

        userListControls the visibility of the user list—defined by the users property—when the user icon is clicked. This setting is only effective if editable privileges are enabled; otherwise, the user list will not be displayed regardless of this option.boolean

        Controls the visibility of the user list—defined by the users property—when the user icon is clicked. This setting is only effective if editable privileges are enabled; otherwise, the user list will not be displayed regardless of this option.

        Default value

        false
        Try a demo showcasing the userList property.

        Examples

        Markup and runtime examples for userList:

        HTML attribute:

        <smart-kanban user-list></smart-kanban>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-kanban');
el.userList = false;

        Read the current value:

        const el = document.querySelector('smart-kanban');
const userList = el.userList;

        usersSpecifies the users eligible to be assigned Kanban tasks, along with their associated attributes (such as name, role, and status) and permissions (such as create, edit, or delete task capabilities). Click for more details. Property object's options:
          { allowAdd?: boolean, allowComment?: boolean, allowDrag?: boolean, allowEdit?: boolean, allowRemove?: boolean, id: string | number, image?: string, name?: string }[]

          Specifies the users eligible to be assigned Kanban tasks, along with their associated attributes (such as name, role, and status) and permissions (such as create, edit, or delete task capabilities).

          Properties

          allowAddSets whether the user has a privilege to add or copy tasks.
          allowCommentSets whether the user has a privilege to add comments to tasks.
          allowDragSets whether the user has a privilege to drag tasks. Works along with the property allowDrag.
          allowEditSets whether the user has a privilege to edit tasks. Works along with the property editable.
          allowRemoveSets whether the user has a privilege to remove tasks.
          idThe user's unique ID. Corresponds to the userId field in the data source and the property currentUser.
          imageA url to an image representing the user.
          nameThe user's name as it will appear in the Users list and "Assigned to" editor.
          Try a demo showcasing the users property.

          Full working example

          Minimal setup for users with the data and bindings you usually use together on this component.

          JavaScript — Kanban with users:

          const columns = [
	{ label: 'To do', dataField: 'todo' },
	{ label: 'Doing', dataField: 'inprogress' },
	{ label: 'Done', dataField: 'done' }
];

const dataSource = [
	{ id: '1', text: 'Draft docs', status: 'todo' },
	{ id: '2', text: 'Wire API', status: 'inprogress' }
];

const users = [
	{ id: 'u1', name: 'Alex' },
	{ id: 'u2', name: 'Jamie' }
];

const board = new Smart.Kanban('#myKanban', {
	columns,
	dataSource,
	users
});

          allowAddSets whether the user has a privilege to add or copy tasks.boolean

          Sets whether the user has a privilege to add or copy tasks.

          Default value

          true

          Back to root property: users

          Try a demo showcasing the allowAdd property.

          Read the nested value:

          const el = document.querySelector('smart-kanban');
const allowAdd = el.users[0].allowAdd;

          allowCommentSets whether the user has a privilege to add comments to tasks.boolean

          Sets whether the user has a privilege to add comments to tasks.

          Default value

          true

          Back to root property: users

          Try a demo showcasing the allowComment property.

          Read the nested value:

          const el = document.querySelector('smart-kanban');
const allowComment = el.users[0].allowComment;

          allowDragSets whether the user has a privilege to drag tasks. Works along with the property allowDrag.boolean

          Sets whether the user has a privilege to drag tasks. Works along with the property allowDrag.

          Default value

          true

          Back to root property: users

          Try a demo showcasing the allowDrag property.

          Read the nested value:

          const el = document.querySelector('smart-kanban');
const allowDrag = el.users[0].allowDrag;

          allowEditSets whether the user has a privilege to edit tasks. Works along with the property editable.boolean

          Sets whether the user has a privilege to edit tasks. Works along with the property editable.

          Default value

          true

          Back to root property: users

          Try a demo showcasing the allowEdit property.

          Read the nested value:

          const el = document.querySelector('smart-kanban');
const allowEdit = el.users[0].allowEdit;

          allowRemoveSets whether the user has a privilege to remove tasks.boolean

          Sets whether the user has a privilege to remove tasks.

          Default value

          true

          Back to root property: users

          Try a demo showcasing the allowRemove property.

          Read the nested value:

          const el = document.querySelector('smart-kanban');
const allowRemove = el.users[0].allowRemove;

          idThe user's unique ID. Corresponds to the userId field in the data source and the property currentUser.string | number

          The user's unique ID. Corresponds to the userId field in the data source and the property currentUser.

          Back to root property: users

          Try a demo showcasing the id property.

          Read the nested value:

          const el = document.querySelector('smart-kanban');
const id = el.users[0].id;

          imageA url to an image representing the user.string

          A url to an image representing the user.

          Default value

          ""

          Back to root property: users

          Try a demo showcasing the image property.

          Read the nested value:

          const el = document.querySelector('smart-kanban');
const image = el.users[0].image;

          nameThe user's name as it will appear in the Users list and "Assigned to" editor.string

          The user's name as it will appear in the Users list and "Assigned to" editor.

          Default value

          ""

          Back to root property: users

          Try a demo showcasing the name property.

          Read the nested value:

          const el = document.querySelector('smart-kanban');
const name = el.users[0].name;

          Events

          changeThis event is triggered whenever any changes are made to the details, status, or properties of an existing task. It allows you to respond programmatically whenever a task is modified, ensuring your application can stay synchronized with the latest task information.CustomEvent

          This event is triggered whenever any changes are made to the details, status, or properties of an existing task. It allows you to respond programmatically whenever a task is modified, ensuring your application can stay synchronized with the latest task information.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onChange

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.oldValue - The old data of the task
          ev.detail.task - The HTML element of the task whose data has been changed
          ev.detail.value - The new data of the task

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Examples

          Listen for change using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('change', (event) => {
    const detail = event.detail,
        oldValue = detail.oldValue,
        task = detail.task,
        value = detail.value;

	// event handling code goes here.
})

          closeThis event is triggered when the user closes the edit or prompt dialog, either by submitting changes or canceling the operation. It signals that the dialog has been dismissed and any associated actions, such as saving or discarding input, should be handled.CustomEvent

          This event is triggered when the user closes the edit or prompt dialog, either by submitting changes or canceling the operation. It signals that the dialog has been dismissed and any associated actions, such as saving or discarding input, should be handled.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onClose

          Arguments

          evCustomEvent

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the close event.

          Examples

          Listen for close using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('close', (event) => {
	// event handling code goes here.
})

          closingThis event fires just before the edit or prompt dialog is about to close, giving you an opportunity to intercept the closing action. By calling event.preventDefault() within the event handler, you can cancel the closing operation, allowing you to perform validation or prompt the user before the dialog is dismissed.CustomEvent

          This event fires just before the edit or prompt dialog is about to close, giving you an opportunity to intercept the closing action. By calling event.preventDefault() within the event handler, you can cancel the closing operation, allowing you to perform validation or prompt the user before the dialog is dismissed.

          • Bubbles Yes
          • Cancelable Yes
          • Interface CustomEvent
          • Event handler property onClosing

          Arguments

          evCustomEvent

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the closing event.

          Examples

          Listen for closing using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('closing', (event) => {
	// event handling code goes here.
})

          columnAddThis event is triggered whenever a new column is successfully added to the data structure or interface. It allows you to respond to the addition of a column, such as updating the user interface, modifying related data, or performing custom logic. The event provides details about the added column, including its name, index, and relevant metadata.CustomEvent

          This event is triggered whenever a new column is successfully added to the data structure or interface. It allows you to respond to the addition of a column, such as updating the user interface, modifying related data, or performing custom logic. The event provides details about the added column, including its name, index, and relevant metadata.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onColumnAdd

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.label - The column label.
          ev.detail.dataField - The column data field.
          ev.detail.collapsed - The column's collapsed state.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the columnAdd event.

          Examples

          Listen for columnAdd using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('columnAdd', (event) => {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField,
        collapsed = detail.collapsed;

	// event handling code goes here.
})

          columnClickThis event is triggered whenever a user clicks on a column header within the data table. It can be used to initiate actions such as sorting the column, displaying a menu, or highlighting the selected column. The event typically provides information about which column was clicked, enabling you to implement custom logic based on the user's interaction.CustomEvent

          This event is triggered whenever a user clicks on a column header within the data table. It can be used to initiate actions such as sorting the column, displaying a menu, or highlighting the selected column. The event typically provides information about which column was clicked, enabling you to implement custom logic based on the user's interaction.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onColumnClick

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.label - The column label.
          ev.detail.dataField - The column data field.
          ev.detail.collapsed - The column's collapsed state.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the columnClick event.

          Examples

          Listen for columnClick using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('columnClick', (event) => {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField,
        collapsed = detail.collapsed;

	// event handling code goes here.
})

          columnCollapseThis event is triggered whenever a column is collapsed, either by selecting the "Collapse" option from the column's action menu or by programmatically invoking the Kanban board's `collapse` method.CustomEvent

          This event is triggered whenever a column is collapsed, either by selecting the "Collapse" option from the column's action menu or by programmatically invoking the Kanban board's `collapse` method.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onColumnCollapse

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.label - The column label.
          ev.detail.dataField - The column data field.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the columnCollapse event.

          Examples

          Listen for columnCollapse using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('columnCollapse', (event) => {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField;

	// event handling code goes here.
})

          columnDoubleClickThis event is triggered when a user double-clicks on a column header, typically in a data grid or table. It can be used to initiate actions such as resizing the column, sorting data, or displaying additional options related to the selected column.CustomEvent

          This event is triggered when a user double-clicks on a column header, typically in a data grid or table. It can be used to initiate actions such as resizing the column, sorting data, or displaying additional options related to the selected column.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onColumnDoubleClick

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.label - The column label.
          ev.detail.dataField - The column data field.
          ev.detail.collapsed - The column's collapsed state.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the columnDoubleClick event.

          Examples

          Listen for columnDoubleClick using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('columnDoubleClick', (event) => {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField,
        collapsed = detail.collapsed;

	// event handling code goes here.
})

          columnExpandThis event is triggered whenever a column in the Kanban board is expanded, either by a user selecting the "expand" option from the column's action menu or programmatically through the Kanban component's `expand` method.CustomEvent

          This event is triggered whenever a column in the Kanban board is expanded, either by a user selecting the "expand" option from the column's action menu or programmatically through the Kanban component's `expand` method.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onColumnExpand

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.label - The column label.
          ev.detail.dataField - The column data field.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the columnExpand event.

          Examples

          Listen for columnExpand using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('columnExpand', (event) => {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField;

	// event handling code goes here.
})

          columnHideThis event is triggered whenever a column is hidden, either through the column's action menu or programmatically via the Kanban board’s `hide` method. Use this event to execute custom logic or UI updates whenever a column becomes invisible to the user.CustomEvent

          This event is triggered whenever a column is hidden, either through the column's action menu or programmatically via the Kanban board’s `hide` method. Use this event to execute custom logic or UI updates whenever a column becomes invisible to the user.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onColumnHide

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.label - The column label.
          ev.detail.dataField - The column data field.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the columnHide event.

          Examples

          Listen for columnHide using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('columnHide', (event) => {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField;

	// event handling code goes here.
})

          columnRemoveThis event is triggered whenever a column is deleted or removed from the data structure, table, or grid. It provides an opportunity to handle any necessary updates or clean-up tasks related to the removal of a column, such as updating the user interface, adjusting data bindings, or modifying underlying data sources. The event typically includes information about the column that was removed, allowing developers to respond dynamically to changes in the structure.CustomEvent

          This event is triggered whenever a column is deleted or removed from the data structure, table, or grid. It provides an opportunity to handle any necessary updates or clean-up tasks related to the removal of a column, such as updating the user interface, adjusting data bindings, or modifying underlying data sources. The event typically includes information about the column that was removed, allowing developers to respond dynamically to changes in the structure.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onColumnRemove

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.label - The column label.
          ev.detail.dataField - The column data field.
          ev.detail.collapsed - The column's collapsed state.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the columnRemove event.

          Examples

          Listen for columnRemove using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('columnRemove', (event) => {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField,
        collapsed = detail.collapsed;

	// event handling code goes here.
})

          columnReorderThis event is triggered whenever a user changes the position of a column, such as by dragging and dropping a column header to rearrange the column order in the table.CustomEvent

          This event is triggered whenever a user changes the position of a column, such as by dragging and dropping a column header to rearrange the column order in the table.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onColumnReorder

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.oldIndex - The column's old index.
          ev.detail.index - The column's new index.
          ev.detail.column - The column's data object with 'label', 'dataField' and 'collapsed' fields.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the columnReorder event.

          Examples

          Listen for columnReorder using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('columnReorder', (event) => {
    const detail = event.detail,
        oldIndex = detail.oldIndex,
        index = detail.index,
        column = detail.column;

	// event handling code goes here.
})

          columnShowThis event is triggered whenever a column becomes visible—either when a user selects the "Show" option from the column's action menu, or when the Kanban component's `show` method is programmatically called to reveal the column.CustomEvent

          This event is triggered whenever a column becomes visible—either when a user selects the "Show" option from the column's action menu, or when the Kanban component's `show` method is programmatically called to reveal the column.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onColumnShow

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.label - The column label.
          ev.detail.dataField - The column data field.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the columnShow event.

          Examples

          Listen for columnShow using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('columnShow', (event) => {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField;

	// event handling code goes here.
})

          columnUpdateThis event is triggered whenever the data in a column is updated. It occurs after any changes are made to the value(s) of a column, providing an opportunity to respond to or process the updated data. Listeners can use this event to execute custom logic, such as validating input, persisting changes, or updating related UI components.CustomEvent

          This event is triggered whenever the data in a column is updated. It occurs after any changes are made to the value(s) of a column, providing an opportunity to respond to or process the updated data. Listeners can use this event to execute custom logic, such as validating input, persisting changes, or updating related UI components.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onColumnUpdate

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.oldValue - The column's old label.
          ev.detail.value - The column's new label.
          ev.detail.column - The column's data object with 'label', 'dataField' and 'collapsed' fields.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the columnUpdate event.

          Examples

          Listen for columnUpdate using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('columnUpdate', (event) => {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value,
        column = detail.column;

	// event handling code goes here.
})

          commentAddThis event is triggered whenever a user adds a comment to a task within the Kanban board. It activates immediately after the comment is successfully posted, allowing you to respond to or process new task comments in real-time.CustomEvent

          This event is triggered whenever a user adds a comment to a task within the Kanban board. It activates immediately after the comment is successfully posted, allowing you to respond to or process new task comments in real-time.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onCommentAdd

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.id - The task's id.
          ev.detail.value - The comment object. It has 'text: string, time: Date and userId:number' properties.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Examples

          Listen for commentAdd using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('commentAdd', (event) => {
    const detail = event.detail,
        id = detail.id,
        value = detail.value;

	// event handling code goes here.
})

          commentRemoveThis event is triggered whenever a comment is deleted from a task card within the Kanban board. It allows you to perform actions or updates in response to the removal of a comment from any Kanban task.CustomEvent

          This event is triggered whenever a comment is deleted from a task card within the Kanban board. It allows you to perform actions or updates in response to the removal of a comment from any Kanban task.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onCommentRemove

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.id - The task's id.
          ev.detail.value - The comment object. It has 'text: string, time: Date and userId:number' properties.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Examples

          Listen for commentRemove using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('commentRemove', (event) => {
    const detail = event.detail,
        id = detail.id,
        value = detail.value;

	// event handling code goes here.
})

          commentUpdateThis event is triggered whenever an existing comment on a Kanban Task is modified. It occurs after any changes are made to the comment’s content, such as edits or updates, allowing you to respond to or track comment modifications within the Kanban board.CustomEvent

          This event is triggered whenever an existing comment on a Kanban Task is modified. It occurs after any changes are made to the comment’s content, such as edits or updates, allowing you to respond to or track comment modifications within the Kanban board.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onCommentUpdate

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.id - The task's id.
          ev.detail.value - The comment object. It has 'text: string, time: Date and userId:number' properties.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the commentUpdate event.

          Examples

          Listen for commentUpdate using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('commentUpdate', (event) => {
    const detail = event.detail,
        id = detail.id,
        value = detail.value;

	// event handling code goes here.
})

          dragEndThis event is triggered when a task is dropped onto a target element within the DOM during a drag-and-drop operation. It allows developers to handle the completion of a drag action by responding to where the task is released. To prevent the default drop behavior—such as moving the element or initiating a browser action—you can call event.preventDefault() within the event handler. This enables you to implement custom logic for handling dropped tasks, such as updating data models, modifying the UI, or triggering other application-specific actions."CustomEvent

          This event is triggered when a task is dropped onto a target element within the DOM during a drag-and-drop operation. It allows developers to handle the completion of a drag action by responding to where the task is released. To prevent the default drop behavior—such as moving the element or initiating a browser action—you can call event.preventDefault() within the event handler. This enables you to implement custom logic for handling dropped tasks, such as updating data models, modifying the UI, or triggering other application-specific actions."

          • Bubbles Yes
          • Cancelable Yes
          • Interface CustomEvent
          • Event handler property onDragEnd

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.container - the Kanban the dragged task(s) is dropped to
          ev.detail.data - an object with additional drag details
          ev.detail.item - the task that is dragged; if multiple tasks are dragged, this is the task that has been clicked when initiating the drag operation
          ev.detail.items - an array with all dragged tasks
          ev.detail.confirmDrop - parameter which you can set to a function. When this is defined, the DROP operation is confirmed once this function is called. Otherwise, the drop is canceled. This feature can be combined with the Kanban's getConfirmDialog(label, content, callbackFn) method or with a custom confirm dialog.
          ev.detail.originalEvent - the original, browser, event that initiates the drag operation
          ev.detail.previousContainer - the Kanban the dragged item(s) is dragged from
          ev.detail.target - the element the dragged tasks are dropped to

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the dragEnd event.

          Examples

          Listen for dragEnd using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('dragEnd', (event) => {
    const detail = event.detail,
        container = detail.container,
        data = detail.data,
        item = detail.item,
        items = detail.items,
        confirmDrop = detail.confirmDrop,
        originalEvent = detail.originalEvent,
        previousContainer = detail.previousContainer,
        target = detail.target;

	// event handling code goes here.
})

          draggingThis event is triggered while the user is actively dragging a task, such as during a drag-and-drop operation. It fires continuously as the task is being moved, enabling real-time updates or visual feedback in response to the task's position.CustomEvent

          This event is triggered while the user is actively dragging a task, such as during a drag-and-drop operation. It fires continuously as the task is being moved, enabling real-time updates or visual feedback in response to the task's position.

          • Bubbles Yes
          • Cancelable Yes
          • Interface CustomEvent
          • Event handler property onDragging

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.data - an object with additional drag details
          ev.detail.item - the task that is dragged; if multiple tasks are dragged, this is the task that has been clicked when initiating the drag operation
          ev.detail.items - an array with all dragged tasks
          ev.detail.originalEvent - the original, browser, event that initiates the drag operation

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Examples

          Listen for dragging using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('dragging', (event) => {
    const detail = event.detail,
        data = detail.data,
        item = detail.item,
        items = detail.items,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

          dragStartThis event is fired when the user initiates a drag action on one or more tasks. During the event, you can access information about the tasks being dragged. If you want to prevent the drag-and-drop operation from starting, you can call event.preventDefault() inside your event handler. This will cancel the dragging process and prevent any associated drag logic or UI changes from occurring.CustomEvent

          This event is fired when the user initiates a drag action on one or more tasks. During the event, you can access information about the tasks being dragged. If you want to prevent the drag-and-drop operation from starting, you can call event.preventDefault() inside your event handler. This will cancel the dragging process and prevent any associated drag logic or UI changes from occurring.

          • Bubbles Yes
          • Cancelable Yes
          • Interface CustomEvent
          • Event handler property onDragStart

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.container - the Kanban the dragged task(s) is dragged from
          ev.detail.data - an object with additional drag details
          ev.detail.item - the task that is dragged; if multiple tasks are dragged, this is the task that has been clicked when initiating the drag operation
          ev.detail.items - an array with all dragged tasks
          ev.detail.originalEvent - the original, browser, event that initiates the drag operation
          ev.detail.previousContainer - the Kanban the dragged item(s) is dragged from

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Examples

          Listen for dragStart using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('dragStart', (event) => {
    const detail = event.detail,
        container = detail.container,
        data = detail.data,
        item = detail.item,
        items = detail.items,
        originalEvent = detail.originalEvent,
        previousContainer = detail.previousContainer;

	// event handling code goes here.
})

          filterThis event is triggered immediately after a user applies a filter to refine the displayed data. It indicates that the filter criteria have been set and the view has been updated accordingly. Developers can use this event to perform actions such as fetching new data, updating UI elements, or logging user interactions related to filtering.CustomEvent

          This event is triggered immediately after a user applies a filter to refine the displayed data. It indicates that the filter criteria have been set and the view has been updated accordingly. Developers can use this event to perform actions such as fetching new data, updating UI elements, or logging user interactions related to filtering.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onFilter

          Arguments

          evCustomEvent

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the filter event.

          Examples

          Listen for filter using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('filter', (event) => {
	// event handling code goes here.
})

          openThis event is triggered whenever the edit or prompt dialog window is displayed to the user. It signals that the user interface has opened a dialog for editing content or requesting input, allowing developers to execute custom logic in response to the dialog becoming visible.CustomEvent

          This event is triggered whenever the edit or prompt dialog window is displayed to the user. It signals that the user interface has opened a dialog for editing content or requesting input, allowing developers to execute custom logic in response to the dialog becoming visible.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onOpen

          Arguments

          evCustomEvent

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the open event.

          Examples

          Listen for open using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('open', (event) => {
	// event handling code goes here.
})

          openingThis event is fired immediately before the edit or prompt dialog is displayed. You can intercept and prevent the dialog from opening by calling event.preventDefault() within your event handler. This allows you to provide your own custom dialog or take other actions instead of showing the default Kanban dialog. To stop the default Kanban dialog from appearing, simply call event.preventDefault() in the appropriate event handler function.CustomEvent

          This event is fired immediately before the edit or prompt dialog is displayed. You can intercept and prevent the dialog from opening by calling event.preventDefault() within your event handler. This allows you to provide your own custom dialog or take other actions instead of showing the default Kanban dialog. To stop the default Kanban dialog from appearing, simply call event.preventDefault() in the appropriate event handler function.

          • Bubbles Yes
          • Cancelable Yes
          • Interface CustomEvent
          • Event handler property onOpening

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.comment - The comment that is about to be removed (if applicable).
          ev.detail.purpose - The purpose of the dialog to be opened - 'edit' or 'prompt'.
          ev.detail.task - The task that is about to be edited or removed (if applicable).

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the opening event.

          Examples

          Listen for opening using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('opening', (event) => {
    const detail = event.detail,
        comment = detail.comment,
        purpose = detail.purpose,
        task = detail.task;

	// event handling code goes here.
})

          sortThis event is triggered immediately after a sorting operation has been applied to the data set. It signifies that the data has been reordered based on the selected sorting criteria, and any relevant updates or UI refreshes can be performed in response to this change. The event may provide details about the sort field(s), direction (ascending or descending), and the affected data.CustomEvent

          This event is triggered immediately after a sorting operation has been applied to the data set. It signifies that the data has been reordered based on the selected sorting criteria, and any relevant updates or UI refreshes can be performed in response to this change. The event may provide details about the sort field(s), direction (ascending or descending), and the affected data.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onSort

          Arguments

          evCustomEvent

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the sort event.

          Examples

          Listen for sort using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('sort', (event) => {
	// event handling code goes here.
})

          taskAddThis event fires whenever a new task is added to the Kanban board. The associated event object contains detailed information about the new task, accessible via the event's detail property. **Example usage:**```javascriptkanban.onTaskAdd = (event) => { const taskData = event.detail.value; // Contains the properties of the newly added task const taskId = event.detail.id; // Unique identifier of the new task}```**Description:** Use this event to execute custom logic or update your application whenever a user creates a new task. The `event.detail.value` provides the complete task data object, while `event.detail.id` gives you the unique ID assigned to that task.CustomEvent

          This event fires whenever a new task is added to the Kanban board. The associated event object contains detailed information about the new task, accessible via the event's detail property.

          **Example usage:**

          ```javascript
          kanban.onTaskAdd = (event) => {
          const taskData = event.detail.value; // Contains the properties of the newly added task
          const taskId = event.detail.id; // Unique identifier of the new task
          }
          ```

          **Description:**
          Use this event to execute custom logic or update your application whenever a user creates a new task. The `event.detail.value` provides the complete task data object, while `event.detail.id` gives you the unique ID assigned to that task.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onTaskAdd

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.value - The task data that is added to the Kanban.
          ev.detail.id - The task data id.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Examples

          Listen for taskAdd using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('taskAdd', (event) => {
    const detail = event.detail,
        value = detail.value,
        id = detail.id;

	// event handling code goes here.
})

          taskBeforeAddThis event is fired immediately before a new task is added to the Kanban board. Within the event handler, you can access and modify the task's initial data using event.detail.value (which contains the task details) and event.detail.id (which represents the task's unique identifier). This allows you to customize attributes—such as assigning a specific ID or updating field values—before the task is officially added. **Example usage:**```jskanban.onTaskBeforeAdd = (event) => { const taskData = event.detail.value; // the task data before it is added const currentId = event.detail.id; // the proposed task ID event.detail.id = 'BG12'; // assign a custom ID before adding // Additional custom logic can be added here};```**Note:** Make any necessary changes to `event.detail.value` or `event.detail.id` within this handler to control how tasks are created and represented on your Kanban board.CustomEvent

          This event is fired immediately before a new task is added to the Kanban board. Within the event handler, you can access and modify the task's initial data using event.detail.value (which contains the task details) and event.detail.id (which represents the task's unique identifier). This allows you to customize attributes—such as assigning a specific ID or updating field values—before the task is officially added.

          **Example usage:**

          ```js
          kanban.onTaskBeforeAdd = (event) => {
          const taskData = event.detail.value; // the task data before it is added
          const currentId = event.detail.id; // the proposed task ID
          event.detail.id = 'BG12'; // assign a custom ID before adding
          // Additional custom logic can be added here
          };
          ```

          **Note:** Make any necessary changes to `event.detail.value` or `event.detail.id` within this handler to control how tasks are created and represented on your Kanban board.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onTaskBeforeAdd

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.value - The task data that is added to the Kanban.
          ev.detail.id - The task data id.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Examples

          Listen for taskBeforeAdd using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('taskBeforeAdd', (event) => {
    const detail = event.detail,
        value = detail.value,
        id = detail.id;

	// event handling code goes here.
})

          taskClickThis event is fired when a user clicks on a task item, allowing you to execute custom logic in response to the interaction. It provides details about the clicked task, enabling you to access its data or update its state as needed.CustomEvent

          This event is fired when a user clicks on a task item, allowing you to execute custom logic in response to the interaction. It provides details about the clicked task, enabling you to access its data or update its state as needed.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onTaskClick

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.value - The task data.
          ev.detail.id - The task data id.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the taskClick event.

          Examples

          Listen for taskClick using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('taskClick', (event) => {
    const detail = event.detail,
        value = detail.value,
        id = detail.id;

	// event handling code goes here.
})

          taskDoubleClickThis event is triggered when a user double-clicks on a task element in the interface. It allows you to detect and respond to double-click actions performed specifically on individual tasks, enabling functionalities such as editing, viewing task details, or initiating other custom behaviors associated with a double-click interaction.CustomEvent

          This event is triggered when a user double-clicks on a task element in the interface. It allows you to detect and respond to double-click actions performed specifically on individual tasks, enabling functionalities such as editing, viewing task details, or initiating other custom behaviors associated with a double-click interaction.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onTaskDoubleClick

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.value - The task data.
          ev.detail.id - The task data id.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Try a demo showcasing the taskDoubleClick event.

          Examples

          Listen for taskDoubleClick using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('taskDoubleClick', (event) => {
    const detail = event.detail,
        value = detail.value,
        id = detail.id;

	// event handling code goes here.
})

          taskRemoveThis event is triggered whenever a task is deleted or removed from the system. It occurs immediately after a task is successfully deleted, allowing you to perform any necessary cleanup, updates, or notifications in response to the removal action.CustomEvent

          This event is triggered whenever a task is deleted or removed from the system. It occurs immediately after a task is successfully deleted, allowing you to perform any necessary cleanup, updates, or notifications in response to the removal action.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onTaskRemove

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.value - The task data that is removed from the Kanban.
          ev.detail.id - The task data id.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Examples

          Listen for taskRemove using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('taskRemove', (event) => {
    const detail = event.detail,
        value = detail.value,
        id = detail.id;

	// event handling code goes here.
})

          taskUpdateThis event is triggered whenever a task undergoes an update, such as changes to its status, description, assigned users, due date, or any other task-related property. It allows listeners to respond in real time to modifications made to existing tasks.CustomEvent

          This event is triggered whenever a task undergoes an update, such as changes to its status, description, assigned users, due date, or any other task-related property. It allows listeners to respond in real time to modifications made to existing tasks.

          • Bubbles Yes
          • Cancelable No
          • Interface CustomEvent
          • Event handler property onTaskUpdate

          Arguments

          evCustomEvent
          ev.detailObject
          ev.detail.value - The task data that is updated.
          ev.detail.oldValue - The update task's old data.
          ev.detail.id - The task data id.

          Methods

          isDefaultPrevented

          Returns true if the event was prevented by any of its subscribers.

          Returns

          boolean true if the default action was prevented. Otherwise, returns false.

          preventDefault

          The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

          stopPropagation

          The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

          Examples

          Listen for taskUpdate using the pattern that matches your stack.

          DOM — listen on the custom element (use a specific selector if the page has more than one):

          document.querySelector('smart-kanban')?.addEventListener('taskUpdate', (event) => {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue,
        id = detail.id;

	// event handling code goes here.
})

          Methods

          addColumn( data?: any): voidAdds a new column to the Kanban board. If no column data is provided, a blank column with default settings will be created and added. If column data is specified, the column will be initialized with the provided properties.

          Adds a new column to the Kanban board. If no column data is provided, a blank column with default settings will be created and added. If column data is specified, the column will be initialized with the provided properties.

          Arguments

          data?any

          An object containing the new column's data

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.addColumn({"dataField":"toDoNew","label":"New column"});

          Try a demo showcasing the addColumn method.

          addFilter( filters: any, operator?: string): voidEnables advanced filtering functionality for the data. For example, you can create a `Smart.FilterGroup` object to build complex filters. You might define a filter that checks if a 'Country' field contains the string 'Italy':```javascriptconst filterGroup = new Smart.FilterGroup();const filterObject = filterGroup.createFilter('string', 'Italy', 'contains');filterGroup.addFilter('and', filterObject);kanban.addFilter([['Country', filterGroup]]);```In this example, a filter group is created. A filter is then defined to match records where the 'Country' column contains the text 'Italy'. This filter is combined into the group with a logical 'and' operator and finally applied to the Kanban board using the `addFilter` method. This approach supports combining multiple filters with logical operators for dynamic and flexible data querying.

          Enables advanced filtering functionality for the data. For example, you can create a `Smart.FilterGroup` object to build complex filters. You might define a filter that checks if a 'Country' field contains the string 'Italy':

          ```javascript
          const filterGroup = new Smart.FilterGroup();
          const filterObject = filterGroup.createFilter('string', 'Italy', 'contains');
          filterGroup.addFilter('and', filterObject);
          kanban.addFilter([['Country', filterGroup]]);
          ```

          In this example, a filter group is created. A filter is then defined to match records where the 'Country' column contains the text 'Italy'. This filter is combined into the group with a logical 'and' operator and finally applied to the Kanban board using the `addFilter` method. This approach supports combining multiple filters with logical operators for dynamic and flexible data querying.

          Arguments

          filtersany

          Filter information. Example: kanban.addFilter([['Country', filterGroup]]);. Each array item is a sub array with two items - 'dataField' and 'filterGroup' object. The 'dataField' is any valid data field from the data source bound to the Kanban like 'dueDate', 'startDate' or custom fields like 'Country'. Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'

          operator?string

          Logical operator between the filters of different fields. Possible values are: 'and', 'or'.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.addFilter("[['firstName', filterGroup]], 'and'");

          Try a demo showcasing the addFilter method.

          addSort( dataFields: [] | string, orderBy: [] | string): voidEnables customizable sorting functionality for your kanban board data. You can specify one or more fields to sort by, along with the desired sort order (e.g., 'ascending' or 'descending'). Example usage: kanban.addSort(['Country'], 'ascending'); This will sort the kanban items in ascending order based on the 'Country' field. You can also pass multiple fields (e.g., kanban.addSort(['Country', 'Name'], 'descending')) to create multi-level sorting.

          Enables customizable sorting functionality for your kanban board data.
          You can specify one or more fields to sort by, along with the desired sort order (e.g., 'ascending' or 'descending').
          Example usage: kanban.addSort(['Country'], 'ascending');
          This will sort the kanban items in ascending order based on the 'Country' field.
          You can also pass multiple fields (e.g., kanban.addSort(['Country', 'Name'], 'descending')) to create multi-level sorting.

          Arguments

          dataFields[] | string

          The data field(s) to sort by

          orderBy[] | string

          The sort direction(s) to sort the data field(s) by. Possible values are: 'ascending' and 'descending'.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.addSort(["firstName","country"],"ascending");

          Try a demo showcasing the addSort method.

          addTask( data?: any): voidAdds a new task to a specified Kanban column. If no column or task data is provided, an empty task with default values will be created and placed in the first column of the Kanban board.

          Adds a new task to a specified Kanban column. If no column or task data is provided, an empty task with default values will be created and placed in the first column of the Kanban board.

          Arguments

          data?any

          An object containing the new task's data

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.addTask({"id":18,"text":"New task","status":"toDo","tags":"new, delayed"});

          Try a demo showcasing the addTask method.

          beginEdit( task: number | string | HTMLElement): voidInitiates an edit operation, allowing modifications to be made to the current data or document. This operation typically marks the start of a transaction, enabling changes to be tracked and either saved (committed) or discarded (rolled back) upon completion.

          Initiates an edit operation, allowing modifications to be made to the current data or document. This operation typically marks the start of a transaction, enabling changes to be tracked and either saved (committed) or discarded (rolled back) upon completion.

          Arguments

          tasknumber | string | HTMLElement

          The task's id or corresponding HTMLElement

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.beginEdit(8);

          Try a demo showcasing the beginEdit method.

          cancelEdit(): voidTerminates the ongoing edit operation and reverts all unsaved changes, restoring the data to its previous state before the edit began.

          Terminates the ongoing edit operation and reverts all unsaved changes, restoring the data to its previous state before the edit began.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.cancelEdit();

          Try a demo showcasing the cancelEdit method.

          clearSelection(): voidRemoves any currently selected items or cards within the Kanban board, ensuring that no items remain selected. This action resets the selection state of the Kanban component.

          Removes any currently selected items or cards within the Kanban board, ensuring that no items remain selected. This action resets the selection state of the Kanban component.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.clearSelection();

          Try a demo showcasing the clearSelection method.

          closePanel(): voidCloses any currently open header panel dropdown, ensuring that all active dropdown menus within the header section are hidden from view.

          Closes any currently open header panel dropdown, ensuring that all active dropdown menus within the header section are hidden from view.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.closePanel();

          Try a demo showcasing the closePanel method.

          collapse( column: number | string): voidCollapses a Kanban column, minimizing its contents and reducing its width to provide a more compact view of the board. This action hides the tasks within the column while keeping the column header visible, allowing users to focus on other sections of the Kanban board.

          Collapses a Kanban column, minimizing its contents and reducing its width to provide a more compact view of the board. This action hides the tasks within the column while keeping the column header visible, allowing users to focus on other sections of the Kanban board.

          Arguments

          columnnumber | string

          The index or dataField of the column to collapse

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.collapse("done");

          Try a demo showcasing the collapse method.

          copyTask( task: number | string | HTMLElement): voidCreates a duplicate of an existing task within the same column, preserving all task details such as title, description, assignees, and deadlines. The copied task will appear alongside the original in the same column, allowing for easy modification without affecting the original task.

          Creates a duplicate of an existing task within the same column, preserving all task details such as title, description, assignees, and deadlines. The copied task will appear alongside the original in the same column, allowing for easy modification without affecting the original task.

          Arguments

          tasknumber | string | HTMLElement

          The task's id or corresponding HTMLElement

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.copyTask(1);

          Try a demo showcasing the copyTask method.

          endEdit(): voidCompletes the current editing session by finalizing any modifications made and persisting all changes to the underlying data source.

          Completes the current editing session by finalizing any modifications made and persisting all changes to the underlying data source.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.endEdit();

          Try a demo showcasing the endEdit method.

          ensureVisible( task: number | string | HTMLElement): HTMLElementEnsures that the specified task is brought into view within the scrollable container by automatically scrolling to its position. If the operation is successful, the method returns the corresponding HTML element representing the task.

          Ensures that the specified task is brought into view within the scrollable container by automatically scrolling to its position. If the operation is successful, the method returns the corresponding HTML element representing the task.

          Arguments

          tasknumber | string | HTMLElement

          The task's id or corresponding HTMLElement

          ReturnsHTMLElement

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          const result = document.querySelector('smart-kanban')?.ensureVisible(5);

          Try a demo showcasing the ensureVisible method.

          expand( column: number | string): voidExpands a Kanban board column to display all its contents, allowing users to view every card within the column in detail. This functionality makes it easier to manage, organize, and interact with all items in the selected column.

          Expands a Kanban board column to display all its contents, allowing users to view every card within the column in detail. This functionality makes it easier to manage, organize, and interact with all items in the selected column.

          Arguments

          columnnumber | string

          The index or dataField of the column to expand

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.expand("done");

          Try a demo showcasing the expand method.

          expandAll(): voidExpands every Kanban column to display all hidden or collapsed tasks, ensuring that all items within each column are fully visible.

          Expands every Kanban column to display all hidden or collapsed tasks, ensuring that all items within each column are fully visible.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.expandAll("done");

          Try a demo showcasing the expandAll method.

          exportData( dataFormat: string, fileName: string, callback?: Function): anyExports all current data from the Kanban board, including task details, statuses, columns, and any associated metadata, into a structured format (such as JSON or CSV) for backup, sharing, or integration purposes.

          Exports all current data from the Kanban board, including task details, statuses, columns, and any associated metadata, into a structured format (such as JSON or CSV) for backup, sharing, or integration purposes.

          Arguments

          dataFormatstring

          The file format to export to. Supported formats: 'csv', 'html', 'json', 'pdf', 'tsv', 'xlsx', 'xml'.

          fileNamestring

          The name of the file to export to

          callback?Function

          A callback function to pass the exported data to (if fileName is not provided)

          Returnsany

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          const result = document.querySelector('smart-kanban')?.exportData("html","my-kanban");

          Try a demo showcasing the exportData method.

          getColumn( dataField: string): anyRetrieves detailed information about a specific column. The returned value is a JSON object containing the following fields:- label: The display name of the column.- dataField: The key or property name associated with the column's data.- collapsed: A boolean indicating whether the column is currently collapsed.- collapsible: A boolean specifying if the column can be collapsed or expanded by the user.- allowRemove: A boolean that determines whether the column can be removed from the view.- editable: A boolean indicating if the column's cells are editable.- reorder: A boolean specifying whether the column can be reordered by the user.- orientation: Describes the orientation of the column, such as "horizontal" or "vertical".Use this object to access or modify the configuration and behavior of the column in your application interface.

          Retrieves detailed information about a specific column. The returned value is a JSON object containing the following fields:

          - label: The display name of the column.
          - dataField: The key or property name associated with the column's data.
          - collapsed: A boolean indicating whether the column is currently collapsed.
          - collapsible: A boolean specifying if the column can be collapsed or expanded by the user.
          - allowRemove: A boolean that determines whether the column can be removed from the view.
          - editable: A boolean indicating if the column's cells are editable.
          - reorder: A boolean specifying whether the column can be reordered by the user.
          - orientation: Describes the orientation of the column, such as "horizontal" or "vertical".

          Use this object to access or modify the configuration and behavior of the column in your application interface.

          Arguments

          dataFieldstring

          The column's data field

          Returnsany

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          const result = document.querySelector('smart-kanban')?.getColumn("toDo");

          Try a demo showcasing the getColumn method.

          getConfirmDialog( label: string, content: string, confirmFn: any): anyCreate an instance of the Window component which is used as a confirm dialog. It gets 3 arguments, label, content and confirm function.

          Create an instance of the Window component which is used as a confirm dialog. It gets 3 arguments, label, content and confirm function.

          Arguments

          labelstring

          The label shown in the header of the window. For example: Confirm move.

          contentstring

          The label shown in the content of the window. For example: Are you sure you want to move this task?

          confirmFnany

          The function called when the OK button is clicked.

          Returnsany

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          const result = document.querySelector('smart-kanban')?.getConfirmDialog("done");

          getSelectedTasks( id: number): anyRetrieves the IDs of all selected tasks. The returned value is an array, where each element represents the unique 'id' associated with a selected task. If no tasks are selected, the array will be empty.

          Retrieves the IDs of all selected tasks.
          The returned value is an array, where each element represents the unique 'id' associated with a selected task. If no tasks are selected, the array will be empty.

          Arguments

          idnumber

          The task's id

          Returnsany

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          const result = document.querySelector('smart-kanban')?.getSelectedTasks();

          getState(): anyRetrieves the current state of the Kanban board as a comprehensive object. The returned object contains detailed information about the board's configuration and user interactions, structured as follows:```typescript{ collapsed: { // Tracks which Kanban columns or swimlanes are currently collapsed. // Keys represent the column or swimlane identifiers, and values indicate their collapsed state. [key: string]: boolean; }, dataSource: [ // An array of data objects representing all Kanban tasks/cards currently on the board. // Each item typically includes task details such as id, status, title, description, etc. ], filtering: { filters: [ // Array of filter objects currently applied. // Each filter describes criteria such as field, comparison operator, and value. ], operator: string; // Logical operator ("AND"/"OR") used to combine multiple filters. }, selection: { selected: [ // Array of IDs or references of currently selected tasks/cards. ], selectionStart?: number | string; // Optional: Identifies the first item in a selection range (useful for range selection with shift-click). selectionInColumn: string; // ID or name of the column where selection started or is active. swimlane: string; // ID or name of the currently active swimlane (if swimlanes are in use). }, sorting: { dataFields: [ // Array of fields currently used to sort the Kanban data (e.g., ["priority", "dueDate"]). ], dataTypes: [ // Corresponding data types for each sorting field (e.g., ["number", "date"]). ], orderBy: [ // Sort directions corresponding to each field ("asc" or "desc"). ] }, tabs: [ // List of tab states or identifiers, reflecting open and active views within the Kanban UI. ], visibility: { taskActions: boolean; // Whether task action buttons are visible. taskComments: boolean; // Whether task comments are shown. taskDue: boolean; // Whether due date indicators are visible. taskPriority: boolean; // Whether task priority display is enabled. taskProgress: boolean; // Whether task progress bars or indicators are shown. taskTags: boolean; // Whether tags associated with tasks are visible. taskUserIcon: boolean; // Whether user or assignee icons are visible on tasks. }}```This state object enables you to persist, inspect, or restore the Kanban board’s full interactive state, including data, UI settings, filters, sortings, selections, and visibility toggles. It is suitable for use cases such as saving the user’s workspace, synchronizing state across sessions, or debugging Kanban board behavior.

          Retrieves the current state of the Kanban board as a comprehensive object. The returned object contains detailed information about the board's configuration and user interactions, structured as follows:

          ```typescript
          {
          collapsed: {
          // Tracks which Kanban columns or swimlanes are currently collapsed.
          // Keys represent the column or swimlane identifiers, and values indicate their collapsed state.
          [key: string]: boolean;
          },
          dataSource: [
          // An array of data objects representing all Kanban tasks/cards currently on the board.
          // Each item typically includes task details such as id, status, title, description, etc.
          ],
          filtering: {
          filters: [
          // Array of filter objects currently applied.
          // Each filter describes criteria such as field, comparison operator, and value.
          ],
          operator: string;
          // Logical operator ("AND"/"OR") used to combine multiple filters.
          },
          selection: {
          selected: [
          // Array of IDs or references of currently selected tasks/cards.
          ],
          selectionStart?: number | string;
          // Optional: Identifies the first item in a selection range (useful for range selection with shift-click).
          selectionInColumn: string;
          // ID or name of the column where selection started or is active.
          swimlane: string;
          // ID or name of the currently active swimlane (if swimlanes are in use).
          },
          sorting: {
          dataFields: [
          // Array of fields currently used to sort the Kanban data (e.g., ["priority", "dueDate"]).
          ],
          dataTypes: [
          // Corresponding data types for each sorting field (e.g., ["number", "date"]).
          ],
          orderBy: [
          // Sort directions corresponding to each field ("asc" or "desc").
          ]
          },
          tabs: [
          // List of tab states or identifiers, reflecting open and active views within the Kanban UI.
          ],
          visibility: {
          taskActions: boolean; // Whether task action buttons are visible.
          taskComments: boolean; // Whether task comments are shown.
          taskDue: boolean; // Whether due date indicators are visible.
          taskPriority: boolean; // Whether task priority display is enabled.
          taskProgress: boolean; // Whether task progress bars or indicators are shown.
          taskTags: boolean; // Whether tags associated with tasks are visible.
          taskUserIcon: boolean; // Whether user or assignee icons are visible on tasks.
          }
          }
          ```

          This state object enables you to persist, inspect, or restore the Kanban board’s full interactive state, including data, UI settings, filters, sortings, selections, and visibility toggles. It is suitable for use cases such as saving the user’s workspace, synchronizing state across sessions, or debugging Kanban board behavior.

          Returnsany

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          const result = document.querySelector('smart-kanban')?.getState();

          Try a demo showcasing the getState method.

          getTask( id: number): anyRetrieves detailed information about a specific task. The returned value is a JSON object containing the following fields:- checklist: An array of checklist items associated with the task - id: The unique identifier for the task - color: A string representing the task label or color code - comments: An array of comment objects related to the task - history: An array that records the chronological history of changes and activity for the task - dueDate: The date and time when the task is due - startDate: The date and time when the task is scheduled to start - priority: The task's priority level (e.g., low, medium, high) - progress: The percentage of task completion - status: The current status of the task (e.g., open, in progress, completed) - swimlane: The swimlane or category the task is assigned to - tags: An array of tags or keywords associated with the task - text: The task title or main summary - description: Detailed information about the task - userId: The identifier of the user currently assigned to the task - createdUserId: The identifier of the user who created the task - createdDate: The date and time when the task was created - updatedUserId: The identifier of the user who last updated the task - updatedDate: The date and time when the task was last updated This structured JSON object enables developers to access all relevant attributes for rendering and managing tasks within an application.

          Retrieves detailed information about a specific task. The returned value is a JSON object containing the following fields:

          - checklist: An array of checklist items associated with the task
          - id: The unique identifier for the task
          - color: A string representing the task label or color code
          - comments: An array of comment objects related to the task
          - history: An array that records the chronological history of changes and activity for the task
          - dueDate: The date and time when the task is due
          - startDate: The date and time when the task is scheduled to start
          - priority: The task's priority level (e.g., low, medium, high)
          - progress: The percentage of task completion
          - status: The current status of the task (e.g., open, in progress, completed)
          - swimlane: The swimlane or category the task is assigned to
          - tags: An array of tags or keywords associated with the task
          - text: The task title or main summary
          - description: Detailed information about the task
          - userId: The identifier of the user currently assigned to the task
          - createdUserId: The identifier of the user who created the task
          - createdDate: The date and time when the task was created
          - updatedUserId: The identifier of the user who last updated the task
          - updatedDate: The date and time when the task was last updated

          This structured JSON object enables developers to access all relevant attributes for rendering and managing tasks within an application.

          Arguments

          idnumber

          The task's id

          Returnsany

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          const result = document.querySelector('smart-kanban')?.getTask("2");

          hide( column: number | string): voidConceals a specific column within a Kanban board, making its contents and tasks temporarily invisible to users without deleting any data. This action helps declutter the board or focus attention on other columns. The hidden column can typically be shown again through board settings or controls.

          Conceals a specific column within a Kanban board, making its contents and tasks temporarily invisible to users without deleting any data. This action helps declutter the board or focus attention on other columns. The hidden column can typically be shown again through board settings or controls.

          Arguments

          columnnumber | string

          The index or dataField of the column to hide

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.hide("done");

          Try a demo showcasing the hide method.

          loadState( state?: { collapsed: {}, dataSource: [], filtering: { filters: [], operator: string }, selection: { selected: [], selectionStart?: number | string, selectionInColumn: string, swimlane: string }, sorting: { dataFields: [], dataTypes: [], orderBy: [] }, tabs: [], visibility: { taskActions: boolean, taskComments: boolean, taskDue: boolean, taskPriority: boolean, taskProgress: boolean, taskTags: boolean, taskUserIcon: boolean } }): voidRetrieves and initializes the current state of the Kanban board, including all columns, tasks, and their respective statuses, to ensure the user sees the latest project information.

          Retrieves and initializes the current state of the Kanban board, including all columns, tasks, and their respective statuses, to ensure the user sees the latest project information.

          Arguments

          state?{ collapsed: {}, dataSource: [], filtering: { filters: [], operator: string }, selection: { selected: [], selectionStart?: number | string, selectionInColumn: string, swimlane: string }, sorting: { dataFields: [], dataTypes: [], orderBy: [] }, tabs: [], visibility: { taskActions: boolean, taskComments: boolean, taskDue: boolean, taskPriority: boolean, taskProgress: boolean, taskTags: boolean, taskUserIcon: boolean } }

          An object returned by one of the methods getState or saveState. If not passed, gets saved state from the browser's localStorage.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.loadState();

          Try a demo showcasing the loadState method.

          moveTask( task: number | string | HTMLElement, newStatus: string): voidMoves a specified task from its current column to a target column within the workflow or board, updating its status and position accordingly.

          Moves a specified task from its current column to a target column within the workflow or board, updating its status and position accordingly.

          Arguments

          tasknumber | string | HTMLElement

          The task's id or corresponding HTMLElement

          newStatusstring

          The new status of the task (its new column's dataField)

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.moveTask(11);

          Try a demo showcasing the moveTask method.

          openCustomizePanel(): voidDisplays the "Customize Tasks" header panel as a dropdown menu, allowing users to access and modify task customization options.

          Displays the "Customize Tasks" header panel as a dropdown menu, allowing users to access and modify task customization options.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.openCustomizePanel();

          Try a demo showcasing the openCustomizePanel method.

          openFilterPanel(): voidDisplays the "Filter" panel by opening its dropdown menu in the header section, allowing users to access and apply filtering options.

          Displays the "Filter" panel by opening its dropdown menu in the header section, allowing users to access and apply filtering options.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.openFilterPanel();

          Try a demo showcasing the openFilterPanel method.

          openSortPanel(): voidDisplays the "Sort" header panel as a dropdown menu, allowing users to select sorting options for the displayed data.

          Displays the "Sort" header panel as a dropdown menu, allowing users to select sorting options for the displayed data.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.openSortPanel();

          Try a demo showcasing the openSortPanel method.

          removeColumn( dataField: string): voidRemoves a specified column from the data set or table, effectively deleting all data contained within that column and updating the structure to reflect its absence. This operation is irreversible and affects any processes or queries that rely on the removed column.

          Removes a specified column from the data set or table, effectively deleting all data contained within that column and updating the structure to reflect its absence. This operation is irreversible and affects any processes or queries that rely on the removed column.

          Arguments

          dataFieldstring

          The column's data field

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.removeColumn("toDo");

          Try a demo showcasing the removeColumn method.

          removeFilter(): voidRemoves all applied filters, displaying the complete, unfiltered dataset.

          Removes all applied filters, displaying the complete, unfiltered dataset.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.removeFilter();

          Try a demo showcasing the removeFilter method.

          removeSort(): voidDisables any previously applied sorting, returning the data to its original, unsorted order.

          Disables any previously applied sorting, returning the data to its original, unsorted order.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.removeSort();

          Try a demo showcasing the removeSort method.

          removeTask( task: number | string | HTMLElement, prompt?: boolean): voidDeletes a specified task from the task list, permanently removing it from the data store.

          Deletes a specified task from the task list, permanently removing it from the data store.

          Arguments

          tasknumber | string | HTMLElement

          The task's id or corresponding HTMLElement

          prompt?boolean

          Whether or not to prompt the user before removing the task

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.removeTask(2);

          Try a demo showcasing the removeTask method.

          saveState(): voidPersists the current state of the Kanban board—including all columns, cards, and their order—to the browser's localStorage. This ensures that the user's board layout and content are retained and automatically restored when the page is reloaded or the browser is reopened.

          Persists the current state of the Kanban board—including all columns, cards, and their order—to the browser's localStorage. This ensures that the user's board layout and content are retained and automatically restored when the page is reloaded or the browser is reopened.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.saveState();

          Try a demo showcasing the saveState method.

          selectTask( task: number | string): voidSelects a specific task from a list or collection, allowing the application to retrieve or highlight the chosen task's details for further actions such as viewing, editing, or managing it.

          Selects a specific task from a list or collection, allowing the application to retrieve or highlight the chosen task's details for further actions such as viewing, editing, or managing it.

          Arguments

          tasknumber | string

          The task's id.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.selectTask(2);

          Try a demo showcasing the selectTask method.

          show( column: number | string): voidDisplays a single Kanban column, including the column title and a list of tasks or cards assigned to that column. Ideal for use in Kanban boards to visually organize tasks by status or category within a workflow.

          Displays a single Kanban column, including the column title and a list of tasks or cards assigned to that column. Ideal for use in Kanban boards to visually organize tasks by status or category within a workflow.

          Arguments

          columnnumber | string

          The index or dataField of the column to show

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.show("done");

          Try a demo showcasing the show method.

          showAllColumns(): voidDisplays a comprehensive list of all Kanban columns, including their names, order, and relevant metadata. This allows users or applications to view the complete structure of the Kanban board and manage workflow stages effectively.

          Displays a comprehensive list of all Kanban columns, including their names, order, and relevant metadata. This allows users or applications to view the complete structure of the Kanban board and manage workflow stages effectively.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.showAllColumns();

          Try a demo showcasing the showAllColumns method.

          unselectTask( task: number | string): voidDeselects a previously selected task, removing its active or highlighted status within the user interface.

          Deselects a previously selected task, removing its active or highlighted status within the user interface.

          Arguments

          tasknumber | string

          The task's id.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.unselectTask(2);

          updateColumn( dataField: string, newData: {}): voidUpdates the value of a specified column in a database table. This operation allows you to modify existing data by providing the column name and the new value to be set. Optionally, you can specify conditions to ensure that only rows matching certain criteria are updated.

          Updates the value of a specified column in a database table. This operation allows you to modify existing data by providing the column name and the new value to be set. Optionally, you can specify conditions to ensure that only rows matching certain criteria are updated.

          Arguments

          dataFieldstring

          The new column's data field

          newData{}

          The new data to visualize in the column.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.updateColumn("toDo");

          Try a demo showcasing the updateColumn method.

          updateTask( task: number | string | HTMLElement, newData: {}): voidUpdates the details of an existing task, such as its title, description, status, due date, or assigned user.

          Updates the details of an existing task, such as its title, description, status, due date, or assigned user.

          Arguments

          tasknumber | string | HTMLElement

          The task's id or corresponding HTMLElement

          newData{}

          The new data to visualize in the task.

          On the custom element in the DOM (narrow the selector, e.g. to #my-kanban, if you host multiple widgets):

          document.querySelector('smart-kanban')?.updateTask(2);

          Try a demo showcasing the updateTask method.

          CSS Variables

          --smart-kanban-default-widthvar()

          Default value

          "1200px"

          Default width of Kanban

          --smart-kanban-default-heightvar()

          Default value

          "500px"

          Default height of Kanban

          --smart-kanban-header-sizevar()

          Default value

          "35px"

          Header size of Kanban (applies to header and column headers)

          --smart-kanban-task-min-widthvar()

          Default value

          "150px"

          Min width for Kanban tasks in columns with horizontal orientation

          --smart-kanban-task-min-heightvar()

          Default value

          "80px"

          Kanban task min height

          --smart-kanban-text-max-heightvar()

          Default value

          "200px"

          Kanban task text part max height

          --smart-kanban-user-icon-sizevar()

          Default value

          "30px"

          Kanban user icon size

          --smart-kanban-user-list-widthvar()

          Default value

          "150px"

          Kanban user list width

          --smart-kanban-user-list-max-heightvar()

          Default value

          "400px"

          Kanban user list max height

          --smart-kanban-comments-list-widthvar()

          Default value

          "350px"

          Kanban comments list width

          --smart-kanban-comments-list-heightvar()

          Default value

          "400px"

          Kanban comments list height

          --smart-kanban-new-comment-heightvar()

          Default value

          "50px"

          Height of new comment section

          --smart-kanban-new-comment-height-expandedvar()

          Default value

          "175px"

          Expanded height of new comment section

          --smart-kanban-send-button-heightvar()

          Default value

          "30px"

          Height of Send button in new comment section

          --smart-kanban-color-band-widthvar()

          Default value

          "3px"

          Kanban color band width (i.e. left border of tasks)

          --smart-data-view-paddingvar()

          Default value

          "10px"

          Padding of the CardView and Kanban

          --smart-data-view-customize-panel-widthvar()

          Default value

          "200px"

          Width of the CardView and Kanban customize panel (drop down).

          --smart-data-view-filter-panel-widthvar()

          Default value

          "550px"

          Width of the CardView and Kanban filter panel (drop down).

          --smart-data-view-sort-panel-widthvar()

          Default value

          "400px"

          Width of the CardView and Kanban sort panel (drop down).

          --smart-data-view-search-panel-widthvar()

          Default value

          "250px"

          Width of the CardView and Kanban search panel (drop down).

          --smart-kanban-add-new-column-widthvar()

          Default value

          "1fr"

          Kanban "+ New status" column width.