TaskManager

TaskManager renders tasks as a list or a Kanban board (auto-switching on narrow screens), with drag-and-drop between buckets, inline create/edit/delete, and loading/error states. It's props-driven UI: pass items and wire operations through callbacks or a /spfx / /codeapps adapter hook.

When to use

• Lightweight task/work-item boards backed by a SharePoint list or Dataverse table.
• Anywhere you want list ⇄ Kanban with drag-and-drop without building it yourself.

Import

import { TaskManager } from '@spartanfx/react';

Standalone

items (an array of ITask) is the only required prop.

import { TaskManager } from '@spartanfx/react';

<TaskManager
  items={tasks}
  buckets={['To do', 'In progress', 'Done']}
  defaultView="kanban"
  onCreate={(input) => createTask(input)}
  onUpdate={(task) => saveTask(task)}
  onDelete={(id) => removeTask(id)}
/>

With the SharePoint adapter

import { TaskManager } from '@spartanfx/react';
import { useSharePointTaskManager } from '@spartanfx/react/spfx';

function Board({ sp }) {
  const tm = useSharePointTaskManager({ sp, listTitle: 'Tasks' });
  return <TaskManager {...tm} buckets={['To do', 'In progress', 'Done']} />;
}

For Power Apps Code Apps, use useCASharePointTaskManager or useCADataverseTaskManager.

Key props

Prop	Type	Default	Notes
items (required)	ITask[]	—	Tasks to display.
buckets	string[]	—	Status columns for Kanban.
defaultView	ViewAs	'list'	Initial view (list or kanban).
allowAddition / allowEdit / allowDeletion / allowDragDrop	boolean	true	Toggle each capability.
responsiveThreshold	number	1400	Width (px) below which it switches to Kanban.
onCreate / onUpdate / onDelete	callbacks	—	Persist changes.
loading / error	boolean / Error	—	Status display.

See the full generated reference: TaskManager API ↗ and the adapter hook useSharePointTaskManager.

See also

• Planner
• Architecture: adapters & targets
• Components overview