# Swimlane in React Kanban Component
Swimlanes are horizontal categorizations of cards on the Kanban board. It is used for grouping of cards, which brings transparency to the workflow process.
## Render swimlane row
Cards can be grouped based on [keyField](https://ej2.syncfusion.com/react/documentation/api/kanban/#keyfield) and displayed in rows, which are separated by columns. It is mandatory to define the `keyField` that is mapped from the datasource for rendering swimlane rows 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 Swimlane
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 Swimlane
Loading....
{% endhighlight %}
{% endtabs %}
## Custom row text
Customize the swimlane row header text by using the `textField` property mapped from datasource.
> It is not mandatory to define the `textField` to [swimlaneSettings](https://ej2.syncfusion.com/react/documentation/api/kanban/#swimlanesettings).It will automatically consider the `keyField` to swimlane row header text.
> If the mapping `textField` key is not present in the datasource, it will consider the swimlane `keyField` as swimlane row header text.
`[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 Swimlane Custom Header Row Text
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 Swimlane Custom Header Row Text
Loading....
{% endhighlight %}
{% endtabs %}
## Template
You can customize the Kanban swimlane row by using the `template` property, which is specified within the `swimlaneSettings` property. In this demo, the swimlane header is customized with HTML element.
`[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);
}
rowTemplate(props) {
var src = props.keyField + '.png';
return (
{props.textField}
);
}
template = this.rowTemplate;
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);
}
public rowTemplate(props): any {
var src = props.keyField + '.png';
return (
{props.textField}
);
}
public template: any = this.rowTemplate;
render() {
return
}
};
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Kanban Swimlane Template
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);
function rowTemplate(props) {
var src = props.keyField + '.png';
return (
{props.textField}
);
}
let template = rowTemplate;
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);
function rowTemplate(props): any {
var src = props.keyField + '.png';
return (
{props.textField}
);
}
let template: any = rowTemplate;
return(
);
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Kanban Swimlane Template
Loading....
{% endhighlight %}
{% endtabs %}
## Sorting
Swimlane rows are rendered on descending order when using the [sortBy](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#sortby) property set to `Descending` order. By default, swimlane rows are rendered by **Ascending** order.
`[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 Swimlane Sorting
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 Swimlane Sorting
Loading....
{% endhighlight %}
{% endtabs %}
## Drag-and-drop
By default, The Kanban does not allow dragging the cards across the swimlane rows. Enabling the [draganddrop](https://ej2.syncfusion.com/react/documentation/api/kanban/#allowdraganddrop) property allows you to drag the cards across the swimlane rows, which is specified inside [swimlaneSettings](https://ej2.syncfusion.com/react/documentation/api/kanban/#swimlanesettings) property.
`[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" %}
Across Swimlane Drag and Drop
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" %}
Across Swimlane Drag and Drop
Loading....
{% endhighlight %}
{% endtabs %}
## Create empty row
You can render the empty swimlane row by enabling the `showEmptyRow` property. If mapping [keyField](https://ej2.syncfusion.com/react/documentation/api/kanban/#keyfield) does not have cards, empty swimlane row will be rendered.
`[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" %}
Swimlane Row with Empty Rows
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" %}
Swimlane Row with Empty Rows
Loading....
{% endhighlight %}
{% endtabs %}
## Calculate cards count
Users can show or hide the cards count by swimlane row in header when enabling the `showItemCount` property, which is enabled by default on the Kanban board.
> Provided localization support for **items** text.
In below demo, disabled on `showItemCount` property on rendering swimlane row without total count.
`[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 Swimlane Cards Count
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 Swimlane Cards Count
Loading....
{% endhighlight %}
{% endtabs %}
## Enable frozen rows
Frozen rows provide an option to make the current swimlane row header text always visible on top of the content while scrolling the Kanban content. The swimlane header text will be changed dynamically, when you scroll to another swimlane row.
By default, the `enableFrozenRows` property is set as `false`. If you wish to show the swimlane frozen rows, you can enable the `enableFrozenRows` property.
> This feature support only when using Kanban content scrolling.
`[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 Swimlane Cards Count
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 Swimlane Cards Count