# Columns in React Kanban Component
The **Kanban** columns represent the each stage of the process. The column definitions are used as the **dataSource** schema in the Kanban. The Kanban operations such as drag-and-drop, swimlane, and toggle columns are performed based on column definitions.
## Single-key mapping
Kanban columns are categorized by mapping the **key** from the datasource using the `keyField` property. The corresponding **value** in the datasource is mapped inside the columns [keyField](https://ej2.syncfusion.com/react/documentation/api/kanban/#keyfield). Based on this categorization, Kanban columns are split on this board.
> The `keyField` property is mandatory to render the columns in the Kanban board.
`[Class-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return ;
}
}
;
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component<{}, {}>{
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return
}
};
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Kanban Single Key Columns
Loading....
{% endhighlight %}
{% endtabs %}
`[Functional-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App() {
let data = extend([], kanbanData, null, true);
return ();
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App(){
let data = extend([], kanbanData, null, true);
return(
);
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Kanban Single Key Columns
Loading....
{% endhighlight %}
{% endtabs %}
## Multi-key mapping
Kanban board allows to render a single column by mapping multiple keys using `keyField` property. In below sample, specified the multiple keys(Open, Validate) to a single column.
`[Class-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return ;
}
}
;
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component<{}, {}>{
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return
}
};
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Multiple Key Columns
Loading....
{% endhighlight %}
{% endtabs %}
`[Functional-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App() {
let data = extend([], kanbanData, null, true);
return ();
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App(){
let data = extend([], kanbanData, null, true);
return(
);
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Multiple Key Columns
Loading....
{% endhighlight %}
{% endtabs %}
## Header text
The column header can be customized with HTML or CSS using the `template` property in `columns`. The following sample demonstrates a Kanban board with a custom column header template.
## Header template
You can customize the column header with any HTML or CSS element using the `template` property as shown in the following code.
`[Class-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
columnTemplate(props) {
return (
{props.headerText}
);
}
render() {
return ;
}
}
;
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component<{}, {}>{
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
private columnTemplate(props: { [key: string]: string }): JSX.Element {
return (
{% endhighlight %}
{% endtabs %}
## Toggle columns
Columns can be expanded or collapsed using the `allowToggle` property in `columns`, which renders an expand/collapse icon in the header.
> By default, collapsed column width is set to `50px`.
`[Class-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return ;
}
}
;
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component<{}, {}>{
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return
}
};
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Kanban Toggle Column
Loading....
{% endhighlight %}
{% endtabs %}
`[Functional-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App() {
let data = extend([], kanbanData, null, true);
return ();
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App(){
let data = extend([], kanbanData, null, true);
return(
);
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Kanban Toggle Column
Loading....
{% endhighlight %}
{% endtabs %}
### Initially collapsed column
By default, all columns are on expanded state when loading the Kanban board initially. But, you can render the columns with collapsed state using the `isExpanded` property.
>The `isExpanded` property only works when enabling the `allowToggle` property on particular column.
In the following example, the backlog column is collapsed on initialization of Kanban board.
`[Class-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return ;
}
}
;
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component<{}, {}>{
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return
}
};
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Rendering Column with Collapsed State
Loading....
{% endhighlight %}
{% endtabs %}
`[Functional-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App() {
let data = extend([], kanbanData, null, true);
return ();
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App(){
let data = extend([], kanbanData, null, true);
return(
);
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Rendering Column with Collapsed State
Loading....
{% endhighlight %}
{% endtabs %}
## Drag and Drop
The Kanban component allows dynamic column reordering through drag-and-drop interactions. To enable this, set the [allowColumnDragAndDrop](https://ej2.syncfusion.com/react/documentation/api/kanban/#allowColumnDragAndDrop) property to true. Once enabled, users can rearrange columns by dragging a column header to a new position, with visual feedback highlighting potential drop locations.
`[Class-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return ;
}
}
;
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogFieldsModel } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component<{}, {}>{
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return
}
};
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Kanban Cards
Loading....
{% endhighlight %}
{% endtabs %}
`[Functional-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App() {
let data = extend([], kanbanData, null, true);
return ();
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogFieldsModel } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App(){
let data = extend([], kanbanData, null, true);
return(
);
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Kanban Cards
Loading....
{% endhighlight %}
{% endtabs %}
## Stacked headers
Stacked headers are the additional headers to column header that will group the similar columns.
Define the grouping of columns **key** value to the `keyFields` property and provide the custom header text name to grouped columns using the `text` property, which is placed inside the [stackedHeaders](https://ej2.syncfusion.com/react/documentation/api/kanban/#stackedheaders) property.
In the following code, the kanban columns 'InProgress, Review' are grouped under 'Development Phase' category.
`[Class-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective, StackedHeadersDirective, StackedHeaderDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return ;
}
}
;
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective, StackedHeadersDirective,StackedHeaderDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component<{}, {}>{
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return
}
};
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Kanban Stacked Headers
Loading....
{% endhighlight %}
{% endtabs %}
`[Functional-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective, StackedHeadersDirective, StackedHeaderDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App() {
let data = extend([], kanbanData, null, true);
return ();
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective, StackedHeadersDirective,StackedHeaderDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App(){
let data = extend([], kanbanData, null, true);
return(
);
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Kanban Stacked Headers