import { type ReactElement } from 'react'; import type { DataTestId, MaskingProps, StylingProps, WithChildren } from '@dynatrace/strato-components/core'; import type { DataTableV2AlignmentColumnDef } from './features/ColumnAlignment.js'; import type { DataTableV2ColumnFontStyleProps } from './features/ColumnFontStyle.js'; import type { DataTableV2ColumnOrderProps } from './features/ColumnOrder/ColumnOrder.js'; import type { DataTableV2ColumnSizingProps } from './features/ColumnSizing.js'; import type { DataTableV2ColumnTypesColumnDef } from './features/ColumnTypes/ColumnTypes.js'; import type { DataTableV2ColumnVisibilityProps, DataTableV2VisibilityColumnDef } from './features/ColumnVisibility/ColumnVisibility.js'; import type { DataTableV2DownloadProps } from './features/Download/Download.js'; import type { DataTableV2LineWrapProps } from './features/LineWrap.js'; import type { DataTableV2LoadingStateProps } from './features/LoadingState.js'; import type { DataTableV2RowIdentification } from './features/RowIdentification/RowIdentification.js'; import type { DataTableV2RowInteractivityProps } from './features/RowInteractivity/RowInteractivity.js'; import type { DataTableV2RowOrderProps } from './features/RowOrder/RowOrder.js'; import type { DataTableV2RowSelectionProps } from './features/RowSelection/RowSelection.js'; import type { DataTableV2SortingColumnDef, DataTableV2SortingProps } from './features/Sorting/Sorting.js'; import type { DataTableV2SubRowsProps } from './features/SubRows/SubRows.js'; import type { DataTableV2ThresholdColumnDef, DataTableV2ThresholdProps } from './features/Thresholds/Thresholds.js'; import type { DataTableV2VisualVariantProps } from './features/VisualVariants.js'; import type { DataTableV2CustomCell } from './hooks/useColumns.js'; /** * @public */ export type DataTableV2RowData = unknown | object | any[]; /** * Current configuration option that can be shared via intents. * @public */ export interface DataTableV2Config { /** * Pagination props to initialize pagination. */ pagination?: { defaultPageIndex?: number; defaultPageSize?: number; }; /** * For specifying which columns should be visible or hidden. */ columnVisibility?: DataTableV2ColumnVisibilityProps['columnVisibility']; /** * For controlling whether to take up the full parent container width. * @defaultValue false */ fullWidth?: DataTableV2BaseProps['fullWidth']; /** * For controlling whether to take up the full parent container height. * @defaultValue false */ fullHeight?: DataTableV2BaseProps['fullHeight']; /** * For controlling whether the content of a cell should be line wrapped. * @defaultValue false */ lineWrap?: DataTableV2LineWrapProps['lineWrap']; /** * For customizing the font style across the table or within individual columns. * @defaultValue 'text' */ fontStyle?: DataTableV2ColumnFontStyleProps['fontStyle']; /** * For controlling whether the columns are resizable. * @defaultValue false */ resizable?: DataTableV2ColumnSizingProps['resizable']; /** * For controlling whether individual rows can be selected. * @defaultValue undefined */ selectableRows?: DataTableV2RowSelectionProps['selectableRows']; /** * For configuring the highlighting of individual rows. * @defaultValue [] */ rowThresholds?: DataTableV2ThresholdProps['rowThresholds']; /** * For controlling whether the columns are sortable. * @defaultValue false */ sortable?: DataTableV2SortingProps['sortable']; /** * For customizing the appearance of the table. */ variant?: DataTableV2VisualVariantProps['variant']; } /** * Common column definition denominator. All column definitions extend from this * type. * @public */ export type DataTableV2ColumnDefBase = { /** Id of the column to uniquely identify it. */ id: string; /** Header of the column. */ header?: string | (() => ReactElement); cell?: string | DataTableV2CustomCell; } & DataTableV2AlignmentColumnDef & DataTableV2SortingColumnDef; /** * Column definition for display columns that render cells in the DataTableV2. * @public */ export type DataTableV2DisplayColumnDef = DataTableV2ColumnDefBase & DataTableV2ColumnTypesColumnDef & DataTableV2ThresholdColumnDef & DataTableV2VisibilityColumnDef & { /** * The accessor can be used to map the column to an entry in your data. */ accessor: (string & {}) | keyof TData | ((row: TData) => TValue); /** * Defines the preferred width of a column. * Options number | `${number}fr` | 'auto' | 'content' * - number: Defines the width of a column in pixels * - `${number}fr`: Lets you define a fractioned width. Child columns with fractions can split their fractions between the parents fraction. * - auto: Will distribute the space evenly between the auto columns. Leverages the auto sizing feature of a CSS grid * - content: Will look at content visible in the first render and size the columns according to their max-content. * - object with `type` and `maxWidth`: this maxWidth is the initial maxWidth and if resizing is enabled then you can resize beyond this maxWidth. */ width?: number | `${number}fr` | 'content' | 'auto' | { type: 'auto' | 'content'; /** * Initial maximum width of the column. If resizing is enabled, * it is possible to resize beyond this maxWidth. */ maxWidth?: number; }; minWidth?: number; /** * Absolute maximum width of the column. */ maxWidth?: number; }; /** * Column definition for column groups that do not render cells in the DataTableV2. * @public */ export type DataTableV2GroupColumnDef = DataTableV2ColumnDefBase & { /** * 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?: DataTableV2DisplayColumnDef[]; }; /** * Mapping type for the columns prop that can contain either display columns or group columns. * @public */ export type DataTableV2ColumnDef = DataTableV2DisplayColumnDef | DataTableV2GroupColumnDef; /** * Settings available in the column settings modal. * @public */ export type DataTableV2ColumnSettingsConfig = { columnOrder?: boolean; columnVisibility?: boolean; }; /** * ref type of the DataTableV2. * @public */ export interface DataTableV2Ref { /** Root element ref of the component. */ readonly element: HTMLDivElement | null; /** Returns the current config of the DataTable.*/ getConfig: () => DataTableV2Config; /** Downloads all data, the data on the current page or the selected data. */ downloadData: (subset: 'all' | 'page' | 'selected') => void; /** Scrolls to the row or subRow which matches the given id. */ scrollToRow: (rowId: string) => void; /** * Opens the column settings modal. * * @param columnSettings - specifies which column settings are available in the modal. * Every setting not explicitly specified defaults to its respective slot in the `DataTableV2Toolbar`. */ openColumnSettings: (columnSettings?: DataTableV2ColumnSettingsConfig) => void; } /** * Basic props for the DataTableV2. * @public */ export interface DataTableV2BaseProps extends WithChildren { /** * Data given to the DataTableV2. Needs to be memoized in order to ensure * performant update cycles. */ data: TData[]; /** * Column definition given to the DataTableV2. Needs to be memoized in order * to ensure performant update cycles. */ columns: DataTableV2ColumnDef[]; /** * Enables DataTable to use the full width of its container. * * @defaultValue false */ fullWidth?: boolean; /** * Enables DataTable to use the full height of its container. * * @defaultValue false */ fullHeight?: boolean; } /** * Combined props type for the DataTableV2 component. * @public */ export type DataTableV2Props = DataTableV2BaseProps & DataTableV2LineWrapProps & DataTableV2ColumnFontStyleProps & DataTableV2VisualVariantProps & DataTableV2LoadingStateProps & DataTableV2ColumnSizingProps & DataTableV2SortingProps & DataTableV2ColumnVisibilityProps & DataTableV2ColumnOrderProps & DataTableV2RowSelectionProps & DataTableV2ThresholdProps & DataTableV2SubRowsProps & DataTableV2RowInteractivityProps & DataTableV2DownloadProps & DataTableV2RowIdentification & DataTableV2RowOrderProps & StylingProps & DataTestId & MaskingProps;