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 | 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
Use the displayMode property to control which areas are visible at startup:
<Gantt tasks={tasks} scales={scales} displayMode="grid" />
The three values are:
"all"(default) — grid and chart side by side"grid"— grid only"chart"— chart only
In compact mode, "all" isn't available. If the container is 650px or below and displayMode is "all", Gantt treats it as "grid".
Switch the display area at runtime
To switch between grid and chart programmatically, call the set-display-mode action via api.exec():
gantt.exec("set-display-mode", { mode: "chart" }); // or "grid"
In compact mode, passing "all" has no effect.
Detect compact mode
To read whether compact mode is currently active, call api.getReactiveState() and destructure _compactMode:
const { _compactMode } = gantt.getReactiveState();
// boolean store, true when container width <= 650px
_compactMode is a reactive store. Subscribe to it to respond when the Gantt transitions in or out of compact mode. It's a read-only state property, not a configuration option.
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 samples: Display mode
Related articles: