Compact and display modes
Compact mode activates automatically when the Gantt container width drops to 650px or below. No configuration is needed.
Behavior in compact mode
When compact mode is active, several layout behaviors change:
| Feature | Normal mode | Compact mode |
|---|---|---|
displayMode: "all" | Grid and chart side by side, plus the Subgrid if there are columns with section: "subGrid" | Not available. Gantt converts it to "grid" automatically. |
| Toggle buttons | Expands or collapses one panel | Switches between grid and chart only |
| Resizer drag | Enabled | Disabled |
| Task editor | 450px sidebar panel | Full-width overlay |
| Action column | Follows column config order | Always in the first column |
Set the display area
By default, all available panels are open: the grid, the chart, and the Subgrid | PRO feature if there are columns with section: "subGrid".
Use the displayMode property to open a different set of panels on initialization:
<Gantt tasks={tasks} scales={scales} columns={columns} displayMode={["chart", "subGrid"]} />
In compact mode, Gantt shows one panel only. If the container is 650px or below and displayMode is "all", Gantt treats it as "grid".
Switch the display area at runtime
To change the set of visible panels programmatically, call the set-display-mode action via api.exec():
api.exec("set-display-mode", { mode: "chart" });
In compact mode, passing "all" has no effect.
Task editor in compact mode
In compact mode, the task editor opens as a full-width overlay instead of a sidebar panel. Gantt applies .wx-full-screen to the editor panel in this state. Use this class to customize the compact editor's appearance:
.wx-full-screen {
/* custom compact editor styles */
}
Related sample:
Related articles: