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
The following example demonstrates the stacked layout with rich custom cell templates, including product images, progress bars, currency formatting, and toolbar tools for sorting, filtering, and column management.
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.
The following example demonstrates the minimum configuration for enabling stacked layout, where each row is rendered as a vertical card with field labels and values.
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.
The following example demonstrates how to toggle between stacked and column layouts dynamically based on the current viewport width.
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.
The following example demonstrates inline editing in the stacked layout, where clicking Edit on a card places the full row into edit mode.
In-Cell Editing
In In-cell editing mode, individual cells become editable when clicked, allowing users to edit one field at a time.
The following example demonstrates in-cell editing in the stacked layout, where clicking a field value makes it editable in place.
Dialog Editing
In Dialog editing mode, clicking a row opens a popup dialog containing the edit form.
The following example demonstrates dialog editing in the stacked layout, where clicking a card opens a modal form with all editable fields.
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.
The following example demonstrates a stacked layout Grid with toolbar sorting, filtering, and column chooser tools applied to the card-based view.
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.
The following example demonstrates grouping with detail rows in the stacked layout, where items are organized into collapsible group cards.
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.