Skip to main content

DHTMLX Kanban. Styling rows and custom swimlane menu example

Color-coding swimlanes helps visually separate task categories: features, bugs, tasks. A custom swimlane menu lets users change row colors interactively, adapting the board's appearance to their preferences without code changes.

Live example​

const { Kanban, Toolbar, defaultEditorShape } = kanban;
const { cards, columns, cardShape } = getData();

const rows = [
  {
    label: "Feature",
    id: "feature",
    css: "green" // initial style
  },
  {
    label: "Task",
    id: "task",
    css: "yellow" // initial style
  },
  {
    label: "Obsolete",
    id: "obsolete",
    css: "red" // initial style
  },
];

const board = new Kanban("#root", {
    columns,
    cards,
    rows,
    rowKey:"type",
    rowShape: {
        css: (row, cards) => "gray",
        menu: {
            show: true,
            items: [
                {
                    id: "color",
                    text: "Color",
                    data: [
                        { 
                            id:"gray", 
                            text: "Gray",
                            onClick: ({ id, item, row }) => changeRowColor(row, "gray")
                        },
                        { 
                            id:"yellow", 
                            text: "Yellow",
                            onClick: ({ id, item, row }) => changeRowColor(row, "yellow")
                        },
                        { 
                            id:"red", 
                            text: "Red",
                            onClick: ({ id, item, row }) => changeRowColor(row, "red")
                        },
                        { 
                            id:"green", 
                            text: "Green",
                            onClick: ({ id, item, row }) => changeRowColor(row, "green")
                        },
                        { 
                            id:"blue", 
                            text: "Blue",
                            onClick: ({ id, item, row }) => changeRowColor(row, "blue")
                        }
                    ]
                }
            ]
        }
    },
    editorShape: defaultEditorShape.filter(e => e.key !== "users"),
});

const toolbar = new Toolbar("#toolbar", { api: board.api });

const changeRowColor = (row, cssClass) => board.updateRow({ 
    id: row.id,
    row: {
        css: cssClass,
        collapsed: false
    },
    replace: false
});
<!-- custom styles -->

<style>
.wx-kanban .wx-column {
        padding: 5px;
      	border-radius: 5pt;
    }
    .wx-kanban .wx-label-line {
        border: none;
    }
  	.gray {
        background: #dadcdd;
	}
    .yellow {
		background: #FFEB84; 
	}
    .red {
        background: #FFA29C;
	}
    .green {
        background: #98EBA5;
	}
    .blue {
        background: #BDE9FD;
	}
</style>

The code follows the same pattern as column styling: static css classes on rows and a dynamic rowShape.css function returning a base "gray" class. The rowShape.menu.items array defines a "Color" submenu with color options. Each option's onClick calls board.updateRow with the new CSS class. The replace: false parameter preserves other row properties. Note that collapsed: false is also passed to keep the row expanded after the update.

Solution overview​

  1. Add css: "className" to row definitions for initial colors
  2. Set rowShape.css to a function for dynamic base styling
  3. Define rowShape.menu.items with nested data for color submenus
  4. Use onClick handlers that call board.updateRow({ id, row: { css, collapsed: false }, replace: false })

Key points​

  • Same API pattern as columns: rowShape mirrors columnShape for CSS and menu configuration. Learn one, know both
  • collapsed: false prevents collapse: Including this in the update ensures the row stays expanded when changing color. Without it, the row might collapse depending on its current state
  • onClick context: Each menu item receives { id, item, row }, the row object contains the full row data
  • Menu items are functions or static: You can return different items per row using a function, or define a static array for all rows

API reference​

Additional resources​