ListView Kanban SDK

A beautiful, flexible React component library for building Kanban-style task and method boards with drag-and-drop functionality.

Features

✨ Beautiful UI - Modern, minimalist design with space-efficient card layouts
🎯 Drag & Drop - Smooth drag-and-drop functionality between columns
🎨 Customizable - Flexible theming and column visibility controls
🔍 Smart Filtering - Filter by teams, levels, and boards
📊 Multi-board Support - View items across multiple boards
⚡ TypeScript - Full TypeScript support with type definitions
🎭 Category Badges - Visual indicators for Tasks, Bugs, Change Requests, and Objectives

Installation

npm install temp-listview-web-sdk

Quick Start

import { ListView } from 'temp-listview-web-sdk';
import 'temp-listview-web-sdk/styles.css';

function App() {
  return (
    <ListView
      kanbanColumns={kanbanData}
      teams={teams}
      availableLevels={[0, 1, 2]}
      selectedTeamIds={[]}
      selectedLevels={[]}
      columnVisibility={{}}
      loading={false}
      teamsLoading={false}
      showAllBoards={false}
      title="My Kanban Board"
      onTeamToggle={(teamId) => console.log('Team toggled:', teamId)}
      onClearTeamFilters={() => console.log('Filters cleared')}
      onLevelToggle={(level) => console.log('Level toggled:', level)}
      onClearLevelFilters={() => console.log('Level filters cleared')}
      onToggleColumnVisibility={(columnId) => console.log('Column toggled:', columnId)}
      onDragDrop={async (item, targetColumn) => {
        console.log('Item dropped:', item, targetColumn);
      }}
    />
  );
}

Props

Required Props

Prop	Type	Description
`kanbanColumns`	`KanbanColumn[]`	Array of Kanban columns with items
`teams`	`Team[]`	Array of team objects for filtering
`availableLevels`	`number[]`	Available task levels for filtering
`selectedTeamIds`	`string[]`	Currently selected team IDs
`selectedLevels`	`string[]`	Currently selected levels
`columnVisibility`	`Record<string, boolean>`	Column visibility state
`onTeamToggle`	`(teamId: string) => void`	Handler for team filter toggle
`onClearTeamFilters`	`() => void`	Handler to clear team filters
`onLevelToggle`	`(level: string) => void`	Handler for level filter toggle
`onClearLevelFilters`	`() => void`	Handler to clear level filters
`onToggleColumnVisibility`	`(columnId: string) => void`	Handler for column visibility
`onDragDrop`	`(item: KanbanItem, targetColumn: string, targetIndex?: number) => Promise<void>`	Handler for drag & drop

Optional Props

Prop	Type	Default	Description
`loading`	`boolean`	`false`	Show loading state
`error`	`string`	-	Error message to display
`teamsLoading`	`boolean`	`false`	Show teams loading state
`boardsLoading`	`boolean`	`false`	Show boards loading state
`showAllBoards`	`boolean`	`false`	Enable multi-board mode
`title`	`string`	`'Task & Method Board'`	Board title
`onAddItem`	`(columnId: string) => void`	-	Handler for add item button
`boards`	`Board[]`	`[]`	Available boards for filtering
`selectedBoardIds`	`string[]`	`[]`	Selected board IDs
`onBoardToggle`	`(boardId: string) => void`	-	Handler for board filter toggle
`onClearBoardFilters`	`() => void`	-	Handler to clear board filters

Types

interface KanbanColumn {
  id: string;
  title: string;
  items: KanbanItem[];
  isVisible: boolean;
  initials: string;
}

interface KanbanItem {
  id: string;
  title: string;
  status: string;
  nodeId: string;
  nodeType: string;
  nodeTitle: string;
  teamId?: string;
  teamName?: string;
  itemType: 'task' | 'method';
}

interface Team {
  id: string;
  name: string;
}

interface Board {
  id: string;
  name: string;
}

Styling

The package includes default styles. Import them in your app:

import 'temp-listview-web-sdk/styles.css';

Custom Styling

You can override the default styles by targeting the component classes:

/* Customize card appearance */
.kanban-card {
  border-radius: 8px;
  padding: 12px;
}

/* Customize column headers */
.kanban-column-header {
  background: #f5f5f5;
}

Default Columns

The SDK comes with pre-configured columns:

Possibilities (POSSIBILITIES)
Backlog (BACKLOG)
Started (STARTED)
Paused (PAUSED)
Blocked (BLOCKED)
Review (REVIEW)
Done (DONE)
Value Realized (VALUE_REALIZED)

Category Badges

Items can have category badges:

Task (T) - Gray badge
Bug (B) - Gray badge
Change Request (CR) - Gray badge
Objective (O) - Gray badge
Key Result (KR) - Gray badge

All badges use a consistent grayscale color scheme for a clean, minimalist look.

Advanced Usage

With Add Item Functionality

<ListView
  {...otherProps}
  onAddItem={(columnId) => {
    // Handle adding new item to column
    console.log('Add item to column:', columnId);
  }}
/>

Multi-board Mode

<ListView
  {...otherProps}
  showAllBoards={true}
  boards={allBoards}
  selectedBoardIds={selectedBoards}
  onBoardToggle={handleBoardToggle}
  onClearBoardFilters={handleClearBoards}
/>

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Dependencies

Peer Dependencies

react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
lucide-react: >=0.263.0

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions, please open an issue on GitHub.