Getting Started with React Kanban Component

21 Jul 202624 minutes to read

This article provides a step-by-step guide to getting started with the Syncfusion^® React Kanban component.

Ready to streamline your Syncfusion^® React development? Discover the full potential of Syncfusion^® React components with Syncfusion^® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion^® CodeStudio and more. Explore Syncfusion^® AI Coding Assistant

Prerequisites

Before you begin, ensure the following tools are installed:

Tool	Version	Purpose
Node.js	18.x or later (LTS recommended)	Required by Vite and npm
npm	9.x or later (bundled with Node.js)	Package manager

Verify your setup:

node --version
npm --version

Overview

The Kanban component is composed of:

Cards: tasks displayed on the board; mapped from a dataSource via cardSettings.
Columns: workflow stages; defined using keyField on each ColumnDirective.
Swimlanes: optional grouping of cards; configured with swimlaneSettings.

Note on keyField: The Kanban component’s keyField property is the name of the field in the data source that categorizes cards (for example, "Status"). Each ColumnDirective also has its own keyField property, which is the value the column matches against. A card is rendered in a column when the card’s Status value equals that column’s keyField.

The cardSettings property defines how each card is displayed. The two main sub-properties are:

headerField — the data field used for the card header.

contentField — the data field used for the card body.

Create the React application

Create a new React application using Vite with TypeScript:

npm create vite@latest my-kanban-app -- --template react-ts
cd my-kanban-app

Use --template react for JavaScript instead of TypeScript.

Install the project’s base dependencies before adding Syncfusion packages:

npm install

Adding Syncfusion^® packages

Once you have created the React application, install the required Syncfusion^® React component package in the application. All Syncfusion^® React (Essential^® JS 2) packages are published on the npmjs public registry.To install the Kanban component package, use the following command.

npm install @syncfusion/ej2-react-kanban

Adding CSS reference

Themes for Syncfusion^® Kanban component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Tailwind 3 theme package using the following command:

npm install @syncfusion/ej2-tailwind3-theme --save

Then add the following CSS reference to the src/App.css file:

App.css
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/kanban/index.css";

Adding the Kanban component

Create a new file named src/datasource.ts and define the following data source:

export let kanbanData: Object[] = [
  {
    Id: 1, Status: 'Open', Summary: 'Analyze the new requirements gathered from the customer.',
    Type: 'Story', Priority: 'Low', Tags: 'Analyze,Customer', Estimate: 3.5,
    Assignee: 'Nancy Davloio', RankId: 1
  },
  {
    Id: 2, Status: 'InProgress', Summary: 'Improve application performance',
    Type: 'Improvement', Priority: 'Normal', Tags: 'Improvement',
    Estimate: 6, Assignee: 'Andrew Fuller', RankId: 1
  },
  {
    Id: 3, Status: 'Open', Summary: 'Arrange a web meeting with the customer to get new requirements.',
    Type: 'Others', Priority: 'Critical', Tags: 'Meeting',
    Estimate: 5.5, Assignee: 'Janet Leverling', RankId: 2
  },
  {
    Id: 4, Status: 'InProgress', Summary: 'Fix the issues reported in the IE browser.',
    Type: 'Bug', Priority: 'Release Breaker', Tags: 'IE',
    Estimate: 2.5, Assignee: 'Janet Leverling', RankId: 2
  },
  {
    Id: 5, Status: 'Testing', Summary: 'Fix the issues reported by the customer.',
    Type: 'Bug', Priority: 'Low', Tags: 'Customer',
    Estimate: 3.5, Assignee: 'Steven walker', RankId: 1
  },
  {
    Id: 6, Status: 'Close', Summary: 'Arrange a web meeting with the customer to get the login page requirements.',
    Type: 'Others', Priority: 'Low', Tags: 'Meeting',
    Estimate: 2, Assignee: 'Michael Suyama', RankId: 1
  },
  {
    Id: 7, Status: 'Validate', Summary: 'Validate new requirements',
    Type: 'Improvement', Priority: 'Low', Tags: 'Validation',
    Estimate: 1.5, Assignee: 'Robert King', RankId: 1
  },
  {
    Id: 8, Status: 'Close', Summary: 'Login page validation',
    Type: 'Story', Priority: 'Release Breaker', Tags: 'Validation,Fix',
    Estimate: 2.5, Assignee: 'Laura Callahan', RankId: 2
  },
  {
    Id: 9, Status: 'Testing', Summary: 'Fix the issues reported in Safari browser.',
    Type: 'Bug', Priority: 'Release Breaker', Tags: 'Fix,Safari',
    Estimate: 1.5, Assignee: 'Nancy Davloio', RankId: 2
  },
  {
    Id: 10, Status: 'Close', Summary: 'Test the application in the IE browser.',
    Type: 'Story', Priority: 'Low', Tags: 'Testing,IE',
    Estimate: 5.5, Assignee: 'Margaret hamilt', RankId: 3
  },
  {
    Id: 11, Status: 'Validate', Summary: 'Validate the issues reported by the customer.',
    Type: 'Story', Priority: 'High', Tags: 'Validation,Fix',
    Estimate: 1, Assignee: 'Andrew Fuller', RankId: 1
  }
];

Note: The extend helper from @syncfusion/ej2-base is used to deep-clone the data so that the Kanban component’s internal state (for example, drag-and-drop rank changes) does not mutate the imported kanbanData array.

Update src/App.tsx to import the data and render the Kanban component:

import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
import './App.css';

function App() {
  // Deep-clone the data to avoid mutating the imported data source
  const data = extend([], kanbanData, null, true);
  return (
    <KanbanComponent id="kanban" keyField="Status" dataSource={data}
        cardSettings={{ contentField: "Summary", headerField: "Id" }}>
        <ColumnsDirective>
          <ColumnDirective headerText="To Do" keyField="Open" />
          <ColumnDirective headerText="In Progress" keyField="InProgress" />
          <ColumnDirective headerText="Testing" keyField="Testing" />
          <ColumnDirective headerText="Validate" keyField="Validate" />
          <ColumnDirective headerText="Done" keyField="Close" />
        </ColumnsDirective>
    </KanbanComponent>
  );
}
export default App;

Run the application

Run the following command to start the development server:

npm run dev

By default, Vite serves the application at http://localhost:5173. Open this URL in a browser to view the Kanban board.

Output

The Kanban board displays cards based on the kanbanData array. In this example, the board renders:

Five workflow columns: To Do (Open), In Progress, Testing, Validate, and Done (Close).
Cards mapped to each column by the Status field.
Card headers and content using the Id and Summary fields configured in cardSettings.

You can preview the following sample by clicking the Preview Sample button.

app.jsx
app.tsx
index.html
datasource.tsx
datasource.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() {
    const data = extend([], kanbanData, null, true);
    return (<KanbanComponent id="kanban" keyField="Status" dataSource={data} 
        cardSettings=>
        <ColumnsDirective>
          <ColumnDirective headerText="To Do" keyField="Open"/>
          <ColumnDirective headerText="In Progress" keyField="InProgress"/>
          <ColumnDirective headerText="Testing" keyField="Testing"/>
          <ColumnDirective headerText="Done" keyField="Close"/>
        </ColumnsDirective>
    </KanbanComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('kanban'));
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() {
  const data = extend([], kanbanData, null, true);

  return (
    <KanbanComponent id="kanban" keyField="Status" dataSource={data} 
        cardSettings=>
        <ColumnsDirective>
          <ColumnDirective headerText="To Do" keyField="Open" />
          <ColumnDirective headerText="In Progress" keyField="InProgress" />
          <ColumnDirective headerText="Testing" keyField="Testing" />
          <ColumnDirective headerText="Done" keyField="Close" />
        </ColumnsDirective>
    </KanbanComponent>
  );
}

export default App;

ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Kanban Cards</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kanban Cards" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-layouts/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-kanban/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='kanban'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
export let kanbanData: Object[] = [
    {
        'Id': 1,
        'Status': 'Open',
        'Summary': 'Analyze the new requirements gathered from the customer.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Analyze,Customer',
        'Estimate': 3.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 2,
        'Status': 'InProgress',
        'Summary': 'Improve application performance',
        'Type': 'Improvement',
        'Priority': 'Normal',
        'Tags': 'Improvement',
        'Estimate': 6,
        'Assignee': 'Andrew Fuller',
        'RankId': 1
    },
    {
        'Id': 3,
        'Status': 'Open',
        'Summary': 'Arrange a web meeting with the customer to get new requirements.',
        'Type': 'Others',
        'Priority': 'Critical',
        'Tags': 'Meeting',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 4,
        'Status': 'InProgress',
        'Summary': 'Fix the issues reported in the IE browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'IE',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 5,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported by the customer.',
        'Type': 'Bug',
        'Priority': 'Low',
        'Tags': 'Customer',
        'Estimate': '3.5',
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 6,
        'Status': 'Close',
        'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
        'Type': 'Others',
        'Priority': 'Low',
        'Tags': 'Meeting',
        'Estimate': 2,
        'Assignee': 'Michael Suyama',
        'RankId': 1
    },
    {
        'Id': 7,
        'Status': 'Validate',
        'Summary': 'Validate new requirements',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Robert King',
        'RankId': 1
    },
    {
        'Id': 8,
        'Status': 'Close',
        'Summary': 'Login page validation',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Validation,Fix',
        'Estimate': 2.5,
        'Assignee': 'Laura Callahan',
        'RankId': 2
    },
    {
        'Id': 9,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in Safari browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'Fix,Safari',
        'Estimate': 1.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 2
    },
    {
        'Id': 10,
        'Status': 'Close',
        'Summary': 'Test the application in the IE browser.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Testing,IE',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 3
    },
    {
        'Id': 11,
        'Status': 'Validate',
        'Summary': 'Validate the issues reported by the customer.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Validation,Fix',
        'Estimate': 1,
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 12,
        'Status': 'Testing',
        'Summary': 'Check Login page validation.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Testing',
        'Estimate': 0.5,
        'Assignee': 'Michael Suyama',
        'RankId': 3
    },
    {
        'Id': 13,
        'Status': 'Open',
        'Summary': 'API improvements.',
        'Type': 'Improvement',
        'Priority': 'High',
        'Tags': 'Grid,API',
        'Estimate': 3.5,
        'Assignee': 'Robert King',
        'RankId': 3
    },
    {
        'Id': 14,
        'Status': 'InProgress',
        'Summary': 'Add responsive support to application',
        'Type': 'Epic',
        'Priority': 'Critical',
        'Tags': 'Responsive',
        'Estimate': 6,
        'Assignee': 'Laura Callahan',
        'RankId': 3
    },
    {
        'Id': 15,
        'Status': 'Open',
        'Summary': 'Show the retrieved data from the server in grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Database,SQL',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 4
    },
    {
        'Id': 16,
        'Status': 'InProgress',
        'Summary': 'Fix cannot open user’s default database SQL error.',
        'Priority': 'Critical',
        'Type': 'Bug',
        'Tags': 'Database,Sql2008',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 17,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in data binding.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Databinding',
        'Estimate': '3.5',
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 18,
        'Status': 'Close',
        'Summary': 'Analyze SQL server 2008 connection.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Grid,Sql',
        'Estimate': 2,
        'Assignee': 'Andrew Fuller',
        'RankId': 4
    },
    {
        'Id': 19,
        'Status': 'Validate',
        'Summary': 'Validate databinding issues.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 1
    },
    {
        'Id': 20,
        'Status': 'Close',
        'Summary': 'Analyze grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Analyze',
        'Estimate': 2.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 5
    },
    {
        'Id': 21,
        'Status': 'Close',
        'Summary': 'Stored procedure for initial data binding of the grid.',
        'Type': 'Others',
        'Priority': 'Release Breaker',
        'Tags': 'Databinding',
        'Estimate': 1.5,
        'Assignee': 'Steven walker',
        'RankId': 6
    },
    {
        'Id': 22,
        'Status': 'Close',
        'Summary': 'Analyze stored procedures.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Procedures',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 7
    },
    {
        'Id': 23,
        'Status': 'Validate',
        'Summary': 'Validate editing issues.',
        'Type': 'Story',
        'Priority': 'Critical',
        'Tags': 'Editing',
        'Estimate': 1,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 24,
        'Status': 'Testing',
        'Summary': 'Test editing functionality.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Editing,Test',
        'Estimate': 0.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 5
    },
    {
        'Id': 25,
        'Status': 'Open',
        'Summary': 'Enhance editing functionality.',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Editing',
        'Estimate': 3.5,
        'Assignee': 'Andrew Fuller',
        'RankId': 5
    }
];
export let kanbanData = [
    {
        'Id': 1,
        'Status': 'Open',
        'Summary': 'Analyze the new requirements gathered from the customer.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Analyze,Customer',
        'Estimate': 3.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 2,
        'Status': 'InProgress',
        'Summary': 'Improve application performance',
        'Type': 'Improvement',
        'Priority': 'Normal',
        'Tags': 'Improvement',
        'Estimate': 6,
        'Assignee': 'Andrew Fuller',
        'RankId': 1
    },
    {
        'Id': 3,
        'Status': 'Open',
        'Summary': 'Arrange a web meeting with the customer to get new requirements.',
        'Type': 'Others',
        'Priority': 'Critical',
        'Tags': 'Meeting',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 4,
        'Status': 'InProgress',
        'Summary': 'Fix the issues reported in the IE browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'IE',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 5,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported by the customer.',
        'Type': 'Bug',
        'Priority': 'Low',
        'Tags': 'Customer',
        'Estimate': '3.5',
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 6,
        'Status': 'Close',
        'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
        'Type': 'Others',
        'Priority': 'Low',
        'Tags': 'Meeting',
        'Estimate': 2,
        'Assignee': 'Michael Suyama',
        'RankId': 1
    },
    {
        'Id': 7,
        'Status': 'Validate',
        'Summary': 'Validate new requirements',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Robert King',
        'RankId': 1
    },
    {
        'Id': 8,
        'Status': 'Close',
        'Summary': 'Login page validation',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Validation,Fix',
        'Estimate': 2.5,
        'Assignee': 'Laura Callahan',
        'RankId': 2
    },
    {
        'Id': 9,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in Safari browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'Fix,Safari',
        'Estimate': 1.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 2
    },
    {
        'Id': 10,
        'Status': 'Close',
        'Summary': 'Test the application in the IE browser.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Testing,IE',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 3
    },
    {
        'Id': 11,
        'Status': 'Validate',
        'Summary': 'Validate the issues reported by the customer.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Validation,Fix',
        'Estimate': 1,
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 12,
        'Status': 'Testing',
        'Summary': 'Check Login page validation.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Testing',
        'Estimate': 0.5,
        'Assignee': 'Michael Suyama',
        'RankId': 3
    },
    {
        'Id': 13,
        'Status': 'Open',
        'Summary': 'API improvements.',
        'Type': 'Improvement',
        'Priority': 'High',
        'Tags': 'Grid,API',
        'Estimate': 3.5,
        'Assignee': 'Robert King',
        'RankId': 3
    },
    {
        'Id': 14,
        'Status': 'InProgress',
        'Summary': 'Add responsive support to application',
        'Type': 'Epic',
        'Priority': 'Critical',
        'Tags': 'Responsive',
        'Estimate': 6,
        'Assignee': 'Laura Callahan',
        'RankId': 3
    },
    {
        'Id': 15,
        'Status': 'Open',
        'Summary': 'Show the retrieved data from the server in grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Database,SQL',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 4
    },
    {
        'Id': 16,
        'Status': 'InProgress',
        'Summary': 'Fix cannot open user’s default database SQL error.',
        'Priority': 'Critical',
        'Type': 'Bug',
        'Tags': 'Database,Sql2008',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 17,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in data binding.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Databinding',
        'Estimate': '3.5',
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 18,
        'Status': 'Close',
        'Summary': 'Analyze SQL server 2008 connection.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Grid,Sql',
        'Estimate': 2,
        'Assignee': 'Andrew Fuller',
        'RankId': 4
    },
    {
        'Id': 19,
        'Status': 'Validate',
        'Summary': 'Validate databinding issues.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 1
    },
    {
        'Id': 20,
        'Status': 'Close',
        'Summary': 'Analyze grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Analyze',
        'Estimate': 2.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 5
    },
    {
        'Id': 21,
        'Status': 'Close',
        'Summary': 'Stored procedure for initial data binding of the grid.',
        'Type': 'Others',
        'Priority': 'Release Breaker',
        'Tags': 'Databinding',
        'Estimate': 1.5,
        'Assignee': 'Steven walker',
        'RankId': 6
    },
    {
        'Id': 22,
        'Status': 'Close',
        'Summary': 'Analyze stored procedures.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Procedures',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 7
    },
    {
        'Id': 23,
        'Status': 'Validate',
        'Summary': 'Validate editing issues.',
        'Type': 'Story',
        'Priority': 'Critical',
        'Tags': 'Editing',
        'Estimate': 1,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 24,
        'Status': 'Testing',
        'Summary': 'Test editing functionality.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Editing,Test',
        'Estimate': 0.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 5
    },
    {
        'Id': 25,
        'Status': 'Open',
        'Summary': 'Enhance editing functionality.',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Editing',
        'Estimate': 3.5,
        'Assignee': 'Andrew Fuller',
        'RankId': 5
    }
];

Troubleshooting

Issue	Possible cause	Fix
Dev server fails to start	Node.js version is too old	Upgrade to Node.js 18.x or later
Port `5173` is already in use	Another process is using the port	Stop the other process, or run `npm run dev -- --port 3000`
Styles are not being applied.	Theme CSS not imported	Verify all `@syncfusion/ej2-/styles/.css` imports are present in `src/App.css` and that `App.css` is imported in `App.tsx`
“Module not found” errors	Dependencies not installed	Run `npm install` in the project root
Cards missing from a column	Card `Status` value has no matching column `keyField`	Add a `ColumnDirective` whose `keyField` matches the missing `Status`, or update the data

Version compatibility

Package	Tested version
`@syncfusion/ej2-react-kanban`	Latest (as of July 2026)
React	18.x and 19.x
TypeScript	5.x (when using the `react-ts` template)
Vite	5.x and 6.x

To verify the installed version of the Kanban package, run:

npm list @syncfusion/ej2-react-kanban

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Getting Started with React Kanban Component

Prerequisites

Overview

Create the React application

Adding Syncfusion^® packages

Adding CSS reference

Adding the Kanban component

Run the application

Output

Troubleshooting

Version compatibility

See also

Getting Started with React Kanban Component

Prerequisites

Overview

Create the React application

Adding Syncfusion® packages

Adding CSS reference

Adding the Kanban component

Run the application

Output

Troubleshooting

Version compatibility

See also

Adding Syncfusion^® packages