Modes Overview
Mode controls the entire content area layout strategy. The same data array, the same fields, and the same actions work across all modes — only zones.content.mode and modeConfig.<mode> change.
When to Use Each Mode
| Mode | Best for | Key characteristic |
|---|---|---|
| table | Structured records with many fields, sorting, grouping | Column headers; rows scan horizontally |
| grid | Visual card layouts; equal-weight items | Responsive tile grid; no column headers |
| carousel | Sequential browsing; spotlight one item at a time | Horizontal scroll; arrows and indicators |
| board | Status-grouped items; kanban-style workflows | Columns defined by a field value; optional drag |
| chart | Aggregated numeric data; trend and composition views | bar, line, area, pie, donut series types |
For automatically switching between modes at different breakpoints, see Responsive Switching.
Same Data, Six Modes
The demos below use the same dataset rendered in each mode.
Table
Grid
Carousel
Board
Bar Chart
Pie Chart
Shared vs Mode-Specific Config
Mode guides cover settings under modeConfig.<mode> and mode-specific caveats.
Behavior shared across all modes lives in Reference and applies regardless of which mode is active:
- Content Config — sorting, filtering, grouping, pagination, search, gestures, responsive breakpoints, loading, and error handling
- Action Config — action shape, placement, and overflow behavior
- Item Config — item shape and layout contract
- Field Config — field schema and renderer option contracts
- Widgemo Config — top-level Widgemo configuration surface