Task List React Template

Our React Task List View template allows you to incorporate task/project management related UI layouts within your next DevExtreme-powered React application.

UI Components

• DevExtreme React DataGrid – displays task information and allows users to analyze, search, and edit task records as requirements dictate.

• DevExtreme React Kanban Board – displays task information in the form of a Kanban board. Users can modify task status by moving cards from one list to another using drag-and-drop operations.

• DevExtreme React Gantt – displays related tasks in the form of an interactive Gantt chart. Users can view/manage tasks and associated relationships on a timeline.

• DevExtreme React Toolbar – organizes action controls into a single responsive UI block.

• DevExtreme React Buttons, Menus, DropDown Lists – allows you to execute task-related actions.

Usage Scenarios

• CRUD operations

  • Add a new task

  • Edit an existing task (inline editing)

  • Delete tasks

  • Manage task relationships

• View/search/analyze tasks

  • Full-text search by property (subject, description, owner, etc.) using the DataGrid’s/Gantt control’s built-in search box.

  • Filter tasks by any field value using the DataGrid’s/Gantt control’s built-in header filter.

  • Sort contacts against one or more columns.

  • Customize column visibility/position/width

  • Visualize tasks as cards on a custom Kanban board

  • Export the task list to Excel or PDF

• Process new tasks

  • Assign an owner to selected tasks (self or another individual)

  • Set task priority and due date