Skip to main content

Customization

Along with configuring Kanban, there are plenty of ways to tweak how it looks and works. You can set up a custom card template, adjust the context menu for cards, columns, and rows, change up the Toolbar’s layout and actions, and use your own CSS styles to give Kanban a personal touch.

Custom cards​

If you want your cards to look a certain way, the cardTemplate property comes in handy. This callback function lets you define your own styles and logic for displaying cards in Kanban. Here’s a quick example:

Custom context menu​

For those times when you want to change up the context menu for cards, columns, or rows, you’ll want to use the cardShape, columnShape, and rowShape properties. Here’s how you can do it:

Custom toolbar​

To switch up the Toolbar’s layout and what it can do, the items property is the one to use. You can list out the controls you want in the array, put them in any order, and change how each one works.

Check out the snippet below to see how to:

  • rearrange the controls
  • set up the searchbar and adjust how it works
  • tweak the sort control and its behavior
  • add a custom control and set up what it does

Custom styles​

If you’d like to change how Kanban looks, you can do that by updating the relevant CSS variables. For more details, take a look at the Stylization section.

Here’s a snippet showing how to apply your own styles to Kanban: