DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

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