import type { ReactNode } from 'react'; import type { DataTestId, MaskingProps, StylingProps, WithChildren } from '@dynatrace/strato-components/core'; import type { SimpleTableV2CustomCell } from './hooks/useColumns.js'; /** * @public */ export type SimpleTableV2RowData = unknown | object | any[]; /** * Common column definition denominator. All column definitions extend from this * type. * @public */ export type SimpleTableV2ColumnDefBase = { /** Id of the column to uniquely identify it. */ id: string; /** Header of the column. */ header?: string | (() => ReactNode); cell?: string | SimpleTableV2CustomCell; /** * Defines the preferred or initial width of the column. */ width?: number; minWidth?: number; maxWidth?: number; alignment?: 'left' | 'center' | 'right' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; }; /** * Column definition for display columns that render cells in the SimpleTableV2. * @public */ export type SimpleTableV2DisplayColumnDef = SimpleTableV2ColumnDefBase & { /** * The accessor can be used to map the column to an entry in your data. */ accessor: (string & {}) | keyof TData | ((row: TData) => TValue); }; /** * Column definition for column groups that do not render cells in the SimpleTableV2. * @public */ export type SimpleTableV2GroupColumnDef = SimpleTableV2ColumnDefBase & { /** * Defines the preferred or initial width of the column. */ width?: number | `${number}fr`; /** * A list of child display columns that this columngroup contains of. */ columns?: SimpleTableV2DisplayColumnDef[]; }; /** * Mapping type for the columns prop that can contain either display columns or group columns. * @public */ export type SimpleTableV2ColumnDef = SimpleTableV2DisplayColumnDef | SimpleTableV2GroupColumnDef; /** * Basic props for the SimpleTableV2. * @public */ export interface SimpleTableV2BaseProps extends WithChildren { /** * Data given to the SimpleTableV2. Needs to be memoized in order to ensure * performant update cycles. */ data: TData[]; /** * Column definition given to the SimpleTableV2. Needs to be memoized in order * to ensure performant update cycles. */ columns: SimpleTableV2ColumnDef[]; /** * Configures the variant on the data table, impacting the visual representation. */ variant?: { /** * rowSeparation can be set to 'horizontalDividers' which will provide lines between rows or * can be set to 'zebraStripes' which will provide alternate row coloring. * @defaultValue 'horizontalDividers' */ rowSeparation?: 'none' | 'horizontalDividers' | 'zebraStripes'; /** * If true provides vertical lines between the columns. * @defaultValue false */ verticalDividers?: boolean; /** * If true provides a border for the table. * @defaultValue true */ contained?: boolean; /** * rowDensity adds spacing around the content inside the row * with minimal space for 'condensed', maximum spacing for 'comfortable' and * 'default' being medium spacing. * @defaultValue 'default' */ rowDensity?: 'default' | 'condensed' | 'comfortable'; /** * fontStyle, sets the font style for the entire data table. * This does not overwrite any fontStyle set at the lower level, like columns etc. * @defaultValue 'text' */ fontStyle?: 'text' | 'code'; }; } /** * Combined props type for the SimpleTableV2 component. * @public */ export type SimpleTableV2Props = SimpleTableV2BaseProps & StylingProps & DataTestId & MaskingProps;