/** * @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 * * * // Three columns with custom widths using fr units * * * // Two columns with pixel and fraction widths * * ``` */ cols?: number | Array; } /** * 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';