New to KendoReact? Start a free 30-day trial

GridStackedLayoutSettings

Interface

Configuration for the stacked layout mode in the Grid.

The stacked layout renders each data row as a card with field label/value pairs arranged in a CSS Grid layout.

Definition

Package:@progress/kendo-react-grid

Properties

cols?

number | string | number | GridStackedColSize[]

Defines the number of columns in the stacked layout.

When a number, creates that many equal-width columns.
When an array, the length defines the column count and values define widths.

Default:

Example:

tsx

// Two equal columns
<Grid stackedLayoutSettings={{ cols: 2 }} />

// Three columns with custom widths using fr units
<Grid stackedLayoutSettings={{ cols: ['1fr', '2fr', '1fr'] }} />

// Two columns with pixel and fraction widths
<Grid stackedLayoutSettings={{ cols: [{ width: 200 }, { width: '1fr' }] }} />