Skip to main content

DHTMLX Kanban. Dynamic column grouping example

Different team members may need to view the same set of tasks organized by different criteria: by status, by priority, by assignee. Dynamic grouping lets users switch the board's column structure at runtime without changing the underlying data.

Live example​

const { cards, columns, rows, groupData } = getData();

const board = new kanban.Kanban("#root", {
  columns,
  cards,
  editorShape: [
    {
      type:"text",
      key:"label",
      label:"Label"
    },
    {
      type:"combo",
      key:"priority",
      label:"Priority",
    },
    {
      type:"select",
      key:"type",
      label:"Type",
      values: rows
    }
  ],
  cardShape:{
    label: true,
    priority: true,
    headerFields: [
      {
        key:"type",
        css:"card-type"
      }
    ]
  }
});

document.getElementById("project").addEventListener("change", function (e) {
  board.setConfig({
    columnKey: e.target.value,
    columns: groupData.find(group => group.id == e.target.value).columns
  });
});
<!-- custom styles -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">

<style>
.card-type {
        font-weight: bold;
        color: var(--wx-color-font-alt);
    }
</style>

The code uses setConfig to swap the columnKey and columns when a dropdown value changes. Each grouping option has its own set of columns defined in groupData. The columnKey property tells the Kanban which card field to use for column assignment (instead of the default column). The headerFields in cardShape displays the task type on each card, and the editor includes fields for editing priority and type.

Solution overview​

  1. Define multiple column sets in a groupData array, each with an id (matching a card field) and columns
  2. Initialize the board with the default column set
  3. On user selection, call board.setConfig({ columnKey: selectedField, columns: newColumns })
  4. Use headerFields in cardShape to show grouping-relevant metadata on cards

Key points​

  • columnKey changes the grouping field: By default, cards are grouped by their column property. Setting columnKey to another field (like priority or type) regroups cards by that field
  • Column IDs must match field values: When grouping by priority, column IDs must match the actual priority values in card data
  • setConfig is non-destructive: Switching groups doesn't lose card data. Cards are simply redistributed across the new columns
  • Combine with headerFields: Show the current grouping value on cards so users know why a card appears in a given column

API reference​

  • setConfig: Updates board configuration including column structure
  • cardShape: Card appearance including headerFields
  • editorShape: Custom editor fields

Additional resources​