About

KanbanComponent from @parag.smarter.codes/kanban package is made on top of the Syncfusion React Kanban component. KanbanComponent provides all the native functionalities of Syncfustion along with some custom functionalities of Kanban at one place.

Usage

npm

npm install @parag.smarter.codes/kanban --save

Setup

1. Import the KanbanComponent.

import KanbanComponent from '@parag.smarter.codes/kanban';

2. Mount the KanbanComponent on the DOM

ReactDOM.render(<KanbanComponent />, document.getElementById('root'));

3. Run the App

npm start

List of Kanban's Storybook UI components

Storybook

1. Kanban: Kanban is the parent component that contains multiple child components and some instances related to its functionality for example Card Component, Columns(Swimlanes), Adding Cards by pressing Add button located at the Column's Header, Editing Card in its custom Dialog-Box, etc.
   • Kanban Template: Describes the Layout of Kanban with a custom Card. w.r.t [Product design]
   • Card Template: Same as mentioned in Card Template
   • Adding Cards: Showing how cards are added/edited in Kanban.
2. Card: Card is the child component of Kanban that is responsible for showing information of one single entity.
   • Card Template: Describes the Layout of Card
3. AdvancedFilter: AdvancedFilter is a Re-usable filter component for Kanban & DataGrid component.
4. SortComponent: SortComponent is a component responsible for global sorting in the Kanban.

Video Tutorial

Video Tutorial of KanbanComponent