@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
61 lines (60 loc) • 2.05 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
/**
* Defines the width of a column in the stacked layout.
*/
export interface GridStackedColSize {
/**
* The width of the column. Number values are treated as pixels.
* String values can be any valid CSS width (px, %, fr, etc.).
*
* @example
* ```tsx
* { width: 200 } // 200px
* { width: '1fr' } // 1 fraction unit
* { width: '50%' } // 50% of container
* ```
*/
width?: string | number;
}
/**
* 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.
*/
export interface GridStackedLayoutSettings {
/**
* 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 1
*
* @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' }] }} />
* ```
*/
cols?: number | Array<number | string | GridStackedColSize>;
}
/**
* The data layout mode for the Grid.
*
* - `columns`: Traditional column-based table layout (default).
* - `stacked`: Card-based layout with field labels and values stacked vertically.
*/
export type GridDataLayoutMode = 'columns' | 'stacked';