` * the **Tasks tree** or **Grid** area is used for quick navigation and shows each task start date, duration, and has the button control to add a task. * the **Gantt** chart where: * the **timescale** shows tasks and other activities by days * **task bars** represent such **task types** as projects, tasks, and milestones. Different colors are applied to differentiate between the types. * **milestones** illustrate tasks with zero duration that are used to mark important dates of the project * **links** show dependencies between tasks * the **context menu** that opens on the right-click  To open the context menu for a task, right click the required task in the **Tasks** tree or **Gantt chart** panel. The menu will open as in the image below:  Task types[](https://docs.svar.dev/react/gantt/guides/user-interface/#task-types "Direct link to Task types") --------------------------------------------------------------------------------------------------------------- There are three types of tasks in Gantt chart by default: * [Task](https://docs.svar.dev/react/gantt/guides/user-interface/#task) * [Milestone](https://docs.svar.dev/react/gantt/guides/user-interface/#milestone) * [Summary task](https://docs.svar.dev/react/gantt/guides/user-interface/#summary-task) The color of the bar indicates the task type.  And you can also add a [custom type](https://docs.svar.dev/react/gantt/guides/user-interface/#custom-type) . ### Task[](https://docs.svar.dev/react/gantt/guides/user-interface/#task "Direct link to Task") A task is a common task. It has a rectangular shape and a blue color and it is usually included into a summary task. ### Milestone[](https://docs.svar.dev/react/gantt/guides/user-interface/#milestone "Direct link to Milestone") A milestone is a diamond-shaped marker that defines an important point in the workflow. Milestones do not have duration or progress, so you can only specify the start date for them. ### Summary task[](https://docs.svar.dev/react/gantt/guides/user-interface/#summary-task "Direct link to Summary task") A summary task is a group of tasks, milestones and other summary tasks (or other custom items created by a user). It is marked green. info The description of a summary task's default functionality you can find in the sections below on this page and/or [here with instructions about configuring default settings](https://docs.svar.dev/react/gantt/guides/configuration/configure_summary) ### Custom type[](https://docs.svar.dev/react/gantt/guides/user-interface/#custom-type "Direct link to Custom type") A user can create a custom task type. Please, refer to [`taskTypes`](https://docs.svar.dev/react/gantt/api/properties/tasktypes) Managing tasks[](https://docs.svar.dev/react/gantt/guides/user-interface/#managing-tasks "Direct link to Managing tasks") --------------------------------------------------------------------------------------------------------------------------- Gantt chart allows adding tasks, editing and deleting summary tasks, tasks, and milestones as well as converting one task type into another. ### Add a task[](https://docs.svar.dev/react/gantt/guides/user-interface/#add-a-task "Direct link to Add a task") To add a task: 1. Click the **Add** button in the **Tasks tree** area OR In the context menu hover **Add** and select **Child task**, **Task above** or **Task below**.  2. In the right sidebar modal that appears, fill in the fields about a task. 3. Click **Save**.  ### Convert one task type into another[](https://docs.svar.dev/react/gantt/guides/user-interface/#convert-one-task-type-into-another "Direct link to Convert one task type into another") To convert one task type into another, use the context menu (Option 1) or the **Edit** modal (Option 2). info Tasks with subtasks are not converted into a summary task by default but you can modify it via the component API (refer to [Configuring summary tasks](https://docs.svar.dev/react/gantt/guides/configuration/configure_summary) ). Option 1: `
` 1. Right click the desired task in the **Tasks** tree or **Gantt chart** panel. 2. In the context menu hover **Convert**, and in the submenu, select the type to convert to.  Option 2: `
` 1. Double-click the desired task in the **Tasks** tree or **Gantt chart** panel. 2. In the sidebar modal that opens, in the **Type** drop-down list, select the type:  ### Edit a task[](https://docs.svar.dev/react/gantt/guides/user-interface/#edit-a-task "Direct link to Edit a task") To edit a task/summary task/milestone: 1. Double-click the desired task in the **Tasks** tree or **Gantt chart** panel. OR In the context menu for the desired task, click **Edit**. 2. In the right sidebar modal that appears, edit the fields about the task. 3. Click **Save**.  ### Delete a task[](https://docs.svar.dev/react/gantt/guides/user-interface/#delete-a-task "Direct link to Delete a task") To delete a task/summary task/milestone: To delete a task, follow one of the procedures below: Option 1: In the context menu for the desired task, click **Delete**. Option 2: 1. Double-click the desired task in the **Tasks** tree or **Gantt chart** panel. 2. In the right sidebar modal that appears, click **Delete**.  ### Drag-n-drop progress bars (change task dates)[](https://docs.svar.dev/react/gantt/guides/user-interface/#drag-n-drop-progress-bars-change-task-dates "Direct link to Drag-n-drop progress bars (change task dates)") To change the start date of a task, move it by the cental part along the horizontal scale.  To change the start or end date of a task, move its rightmost and leftmost part (the area is marked with the resizer cursor).  info **The summary task's bar cannot be resized. Its start and end dates cannot be changed separately**. And you can drag a summary task only with its child tasks, namely, if you shift a summary task, all its child tasks will be also moved. If a child task is rescheduled to start before the start date of a summary task, the summary task's start date changes. If a child task is rescheduled to end after a summary task's end date, the summary task's end date changes. You can also change the task dates in the **Edit** modal: see [Edit a task](https://docs.svar.dev/react/gantt/guides/user-interface/#edit-a-task) above. ### Change task progress[](https://docs.svar.dev/react/gantt/guides/user-interface/#change-task-progress "Direct link to Change task progress") The progress control in bars is shown for tasks and summary tasks (not for milestones). You can change the progress by dragging the progress handler in a bar or follow the instructions below: 1. Open the **Edit task** modal by double-clicking a task or selecting **Edit** in the context menu. See [Edit a task](https://docs.svar.dev/react/gantt/guides/user-interface/#edit-a-task) above. 2. In the modal, in the **Progress** field, move the cursor.  ### Copy&paste tasks[](https://docs.svar.dev/react/gantt/guides/user-interface/#copypaste-tasks "Direct link to Copy&paste tasks") To copy and paste a task: 1. Select a task by clicking it and then in the context menu, click **Copy**. 2. Click the task after which you want to paste the copied task, and then in the context menu click **Paste**.  ### Move and reorder tasks[](https://docs.svar.dev/react/gantt/guides/user-interface/#move-and-reorder-tasks "Direct link to Move and reorder tasks") To move a task up and place it before the previous task, select a task and in the context menu, click **Move -> Up** To move a task up and place it after the next task, select a task and in the context menu, click **Move -> Down**  To reorder tasks, in the **Tasks** tree, select a task, and drag-and-drop it to the required place in the tree. ### Indent and outdent tasks[](https://docs.svar.dev/react/gantt/guides/user-interface/#indent-and-outdent-tasks "Direct link to Indent and outdent tasks") To demote a task to the lower nesting level, select it, and then in the context menu click **Indent**. To increase the task nesting level, select a task, and then in the context menu click **Outdent**.  ### Sort tasks[](https://docs.svar.dev/react/gantt/guides/user-interface/#sort-tasks "Direct link to Sort tasks") Gantt allows users to sort tasks by clicking on a column header of the grid. When a single column header is clicked, tasks are sorted based on that column's values. For multi-sorting, users can hold the **Ctrl** key while clicking additional column headers. This preserves the existing sorting order and applies a secondary (or further) sorting level. The sorting priority is determined by the order in which the columns were selected, meaning the first clicked column has the highest priority. **How to use multi-sorting:** * Single sorting: click a column header to sort the data by that column * Multi-sorting: hold **Ctrl** and click another column header to add sorting without resetting the previous sorting * Sorting priority: sorting is applied in the order the columns were clicked, with earlier selections taking precedence * Removing sorting: click the column header again to toggle the sort direction or reset multi-sorting. Adding dependency links[](https://docs.svar.dev/react/gantt/guides/user-interface/#adding-dependency-links "Direct link to Adding dependency links") ------------------------------------------------------------------------------------------------------------------------------------------------------ There are 4 types of links between activities: * End to Start * Start to Start * End to End * Start to End To create links, click the round marker at the edge of the source task bar and then click the marker of the target task bar.  To edit the existing links, open the **Edit** modal for the desired task (see [Edit a task](https://docs.svar.dev/react/gantt/guides/user-interface/#edit-a-task) ), and in the **Predecessors** and/or **Successors** fields, change the link type. To delete a link, in the **Edit** modal, click the remove button next to the link type.  Resizing grid and chart[](https://docs.svar.dev/react/gantt/guides/user-interface/#resizing-grid-and-chart "Direct link to Resizing grid and chart") ------------------------------------------------------------------------------------------------------------------------------------------------------ You can expand/collapse the grid (tasks tree) and chart areas manually using the resizing button:  Hotkeys[](https://docs.svar.dev/react/gantt/guides/user-interface/#hotkeys "Direct link to Hotkeys") ------------------------------------------------------------------------------------------------------ Gantt supports the following keyboard shortcuts to navigate and interact with data faster: * Navigation * Arrow Up / Arrow Down - move selection vertically between rows (keys "arrowup"/"arrowdown") * Arrow Left / Arrow Right - move focus horizontally between grid cells within the same row * Copy, Cut, and Paste * Ctrl + C - copy the selected tasks (action key: "ctrl+c") * Ctrl + X - cut the selected tasks (action key: "ctrl+x") * Ctrl + V - paste next to the selected task (action key: "ctrl+v") * Delete * Ctrl + D / Backspace - delete the selected tasks (action keys: "ctrl+d"/"backspace") * Execute grid cell action * Enter - trigger the action associated with the current cell. For example, "open-task" action for "Task name" cells and "add-task" for the "+" cells. * [Main UI elements](https://docs.svar.dev/react/gantt/guides/user-interface/#main-ui-elements) * [Task types](https://docs.svar.dev/react/gantt/guides/user-interface/#task-types) * [Task](https://docs.svar.dev/react/gantt/guides/user-interface/#task) * [Milestone](https://docs.svar.dev/react/gantt/guides/user-interface/#milestone) * [Summary task](https://docs.svar.dev/react/gantt/guides/user-interface/#summary-task) * [Custom type](https://docs.svar.dev/react/gantt/guides/user-interface/#custom-type) * [Managing tasks](https://docs.svar.dev/react/gantt/guides/user-interface/#managing-tasks) * [Add a task](https://docs.svar.dev/react/gantt/guides/user-interface/#add-a-task) * [Convert one task type into another](https://docs.svar.dev/react/gantt/guides/user-interface/#convert-one-task-type-into-another) * [Edit a task](https://docs.svar.dev/react/gantt/guides/user-interface/#edit-a-task) * [Delete a task](https://docs.svar.dev/react/gantt/guides/user-interface/#delete-a-task) * [Drag-n-drop progress bars (change task dates)](https://docs.svar.dev/react/gantt/guides/user-interface/#drag-n-drop-progress-bars-change-task-dates) * [Change task progress](https://docs.svar.dev/react/gantt/guides/user-interface/#change-task-progress) * [Copy&paste tasks](https://docs.svar.dev/react/gantt/guides/user-interface/#copypaste-tasks) * [Move and reorder tasks](https://docs.svar.dev/react/gantt/guides/user-interface/#move-and-reorder-tasks) * [Indent and outdent tasks](https://docs.svar.dev/react/gantt/guides/user-interface/#indent-and-outdent-tasks) * [Sort tasks](https://docs.svar.dev/react/gantt/guides/user-interface/#sort-tasks) * [Adding dependency links](https://docs.svar.dev/react/gantt/guides/user-interface/#adding-dependency-links) * [Resizing grid and chart](https://docs.svar.dev/react/gantt/guides/user-interface/#resizing-grid-and-chart) * [Hotkeys](https://docs.svar.dev/react/gantt/guides/user-interface/#hotkeys) --- # Fullscreen mode | React gantt Documentation [Skip to main content](https://docs.svar.dev/react/gantt/guides/fullscreen/#__docusaurus_skipToContent_fallback) On this page ### Enabling the fullscreen mode[](https://docs.svar.dev/react/gantt/guides/fullscreen/#enabling-the-fullscreen-mode "Direct link to Enabling the fullscreen mode") To enable the fullscreen mode, import the [**Fullscreen**](https://docs.svar.dev/react/gantt/helpers/fullscreen_component) component and wrap the **Gantt** component with the **Fullscreen** component. Example: import { getData } from "../data";import { Gantt, Fullscreen } from "@svar-ui/react-gantt";const data = getData();export default function Demo() { return (
Click the "expand" icon
Point over Gantt chart, then hold Ctrl and use mouse wheel to zoom
{data.text || ""}
{data.text || ""}
{data.type}: {data.text}
start: {format(data.start, mask)}
{data.end && ( end: {format(data.end, mask)}
)} {avatar && ( 
)}
{user?.label ?? ""}
{data.toLocaleString("en-US", options)}
);}
CSS (separate file or global stylesheet):
.container { height: 100%; display: flex; align-items: center; justify-content: space-between;}.icon { display: inline-flex; align-items: center; font-size: 20px; color: #b5b5b5;}
Apply this component in the `cell` property of an inline editor config:
import { getData } from "../data";import { Gantt } from "@svar-ui/react-gantt";import DateCell from "../custom/DateCell.jsx";function Page() { const data = getData(); const columns = [ { id: "text", header: "Task name", flexgrow: 1 }, { id: "start", header: "Start date", width: 120, align: "center", editor: { type: "datepicker", config: { cell: DateCell, }, }, }, ]; return ( `
Advanced filtering[](https://docs.svar.dev/react/grid/guides/filtering_data/#advanced-filtering "Direct link to Advanced filtering")
--------------------------------------------------------------------------------------------------------------------------------------
To filter data by multiple criteria with complex queries and combine filters with AND/OR logic at runtime, you need to import the [Filter component](https://docs.svar.dev/react/filter/filter-main-overview/)
that meets your requirements and apply its API.
In the example below, we import the FilterBuilder component along with two helper functions: [`getOptions`](https://docs.svar.dev/react/filter/api/helpers/getoptions-helper)
for generating filter options based on a column, and [`createFilter`](https://docs.svar.dev/react/filter/api/helpers/createfilter-helper)
for creating a filter function from the filter value.
We then listen to the `onChange` action from the FilterBuilder. Whenever the filter value changes, we use `createFilter` to build a filtering function based on the current filter criteria. This function is then passed as a parameter to the [`filter-rows`](https://docs.svar.dev/react/grid/api/actions/filter-rows)
action, which triggers filtering in Grid.
import { FilterBuilder, createFilter, getOptions } from "@svar-ui/react-filter";import { Grid } from "@svar-ui/react-grid";import { getData } from "../data";import { useState } from "react";const { data, columns } = getData();const [api, setApi] = useState(null);const options = { firstName: getOptions(data, "firstName"), lastName: getOptions(data, "lastName"),};const fields = [ { id: "firstName", label: "Name", type: "text" }, { id: "lastName", label: "Last Name", type: "text" },];function applyFilter({ value }) { const filter = createFilter(value); if (api) { api.exec("filter-rows", { filter }); }}const init = apiInstance => setApi(apiInstance);`Grid with external filters
`` `
` `` {({ id }) => ( `` { setDateValue(v); handleFilter(); }} id={id} clear /> )} `` {({ id }) => ( `` { setCompanyValue(v); handleFilter(); }} id={id} clear icon={"wxi-search"} /> )}
`` `