Stacked LayoutPremium
The stacked layout mode of the Grid enables you to display data in a card-based format where each row renders as a vertical stack of field label/value pairs. This layout is particularly useful for mobile devices and responsive designs where horizontal space is limited.
Start Free Trial
Getting Started
To enable the stacked layout mode, set the dataLayoutMode property of the Grid to "stacked". This default configuration renders each field in a single column, stacking them vertically within each card.
Custom Column Widths
You can configure the stacked layout to arrange cells in multiple columns with custom widths using the stackedLayoutSettings property. The cols option accepts:
- A number for equal-width columns:
cols: 2orcols: 3 - An array of CSS values for custom widths:
cols: ['1fr', '2fr', '1fr'],cols: [200, 400, 200], orcols: ['25%', '50%', '25%'] - Width objects:
cols: [{ width: 200 }, { width: '1fr' }]
The example below uses fraction units (fr) to create a three-column layout where the middle column is twice as wide as the outer columns.
Responsive Stacked Layout
You can dynamically switch between column and stacked layouts based on screen size for a responsive design. This allows you to show the traditional table layout on larger screens and the stacked layout on smaller devices. The layout switches automatically when the viewport size changes.
Editing
The stacked layout supports all editing modes of the Grid. The editing UI adapts seamlessly to the stacked layout, presenting editors within the card structure while maintaining full editing functionality.
Inline Editing
In Inline editing mode, clicking Edit enters the entire row into edit mode, displaying all editable fields with their respective editors.
In-Cell Editing
In In-cell editing mode, individual cells become editable when clicked, allowing users to edit one field at a time.
Dialog Editing
In Dialog editing mode, clicking a row opens a popup dialog containing the edit form.
Toolbar Tools
The stacked layout is fully compatible with all Grid toolbar components. Sorting, filtering, and column management tools work seamlessly with the stacked layout.
Grouping
The stacked layout supports data grouping, allowing you to organize items into collapsible categories. Group headers and footers adapt to the stacked format, with aggregate values displayed clearly within the card-based layout.
Stacked Layout vs Adaptive Rendering
The stacked layout mode (dataLayoutMode="stacked") and adaptive rendering (adaptive={true}) serve different purposes:
| Feature | Stacked Layout | Adaptive Rendering |
|---|---|---|
| Purpose | Card-based data display | Responsive UI components |
| Affects | Row/cell rendering | Pager, column menu, edit forms |
| Usage | Mobile-first data layouts | Responsive popup elements |
| Can Combine | Yes | Yes |
You can use both features together—stacked layout changes how data rows are rendered, while adaptive rendering adjusts how interactive elements like the pager and column menu appear on different screen sizes.
Limitations
The following features are not supported or have limitations when using the stacked layout mode:
- Row/Column Spanning: The
rowSpanandcolSpanfeatures are not available in stacked mode. - Column Reordering: Visual column reordering is not applicable to stacked layout.
- Locked Columns: Column locking does not apply to stacked layout.