import type { ReactElement, JSX } from 'react'; import type { DataTableAlignmentColumnDef } from './features/ColumnAlignment.js'; import type { DataTableColumnFontStyleProps } from './features/ColumnFontStyle/column-font-style-types.js'; import type { DataTableColumnOrderProps } from './features/ColumnOrder/column-order-types.js'; import type { DataTableColumnPinningProps } from './features/ColumnPinning/column-pinning-types.js'; import type { DataTableColumnSizingProps } from './features/ColumnSizing/column-sizing-types.js'; import type { DataTableColumnTypesColumnDef } from './features/ColumnTypes/column-types-types.js'; import type { DataTableColumnVisibilityProps, DataTableVisibilityColumnDef } from './features/ColumnVisibility/column-visibility-types.js'; import type { DataTableDownloadProps } from './features/Download/download-types.js'; import type { DataTableLineWrapProps } from './features/LineWrap/line-wrap-types.js'; import type { DataTableLoadingStateProps } from './features/LoadingState/loading-state-types.js'; import type { DataTableRowIdentification } from './features/RowIdentification/row-identification-types.js'; import type { DataTableRowInteractivityProps } from './features/RowInteractivity/row-interactivity-types.js'; import type { DataTableRowOrderProps } from './features/RowOrder/row-order-types.js'; import type { DataTableRowSelectionProps } from './features/RowSelection/row-selection-types.js'; import type { DataTableSortingColumnDef, DataTableSortingProps } from './features/Sorting/sorting-types.js'; import type { DataTableSubRowsProps } from './features/SubRows/sub-rows-types.js'; import type { DataTableThresholdColumnDef, DataTableThresholdProps } from './features/Thresholds/threshold-types.js'; import type { DataTableVisualVariantProps } from './features/VisualVariants/visual-variants-types.js'; import type { DataTableRowData } from './row-data-types.js'; import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js'; import type { DataTestId } from '../../core/types/data-props.js'; import type { MaskingProps } from '../../core/types/masking-props.js'; import type { StylingProps } from '../../core/types/styling-props.js'; import type { WithChildren } from '../../core/types/with-children.js'; /** * @public */ export type { DataTableRowData } from './row-data-types.js'; /** * Custom cell renderer function. * @public */ export type DataTableCustomCell = (props: { /** Raw value of the cell that is rendered. */ value: TValue; /** Index of the row the rendered cell is in. */ rowIndex: number; /** Data of the entire row the rendered cell is in. */ rowData: TData; /** Id of the row the rendered cell is in. */ rowId: string; /** Format function that would have been applied to the cell value out of the box. */ format: (value: TValue) => string; /** Link detection function for automatic link detection. */ detectLinks: (value: string) => string | JSX.Element; /** Formatting function for log content. */ formatLogContent: (value: string) => JSX.Element | null; /** The current line wrap state of the column the rendered cell is in. */ isLineWrapped: boolean; }) => JSX.Element; /** * Current configuration option that can be shared via intents. * @public */ export interface DataTableConfig { /** * Pagination props to initialize pagination. */ pagination?: { defaultPageIndex?: number; defaultPageSize?: number; }; /** * For specifying which columns should be visible or hidden. */ columnVisibility?: DataTableColumnVisibilityProps['columnVisibility']; /** * For controlling whether to take up the full parent container width. * @defaultValue false */ fullWidth?: DataTableBaseProps['fullWidth']; /** * For controlling whether to take up the full parent container height. * @defaultValue false */ fullHeight?: DataTableBaseProps['fullHeight']; /** * For controlling whether the content of a cell should be line wrapped. * @defaultValue false */ lineWrap?: DataTableLineWrapProps['lineWrap']; /** * For customizing the font style across the table or within individual columns. * @defaultValue 'text' */ fontStyle?: DataTableColumnFontStyleProps['fontStyle']; /** * For controlling whether the columns are resizable. * @defaultValue false */ resizable?: DataTableColumnSizingProps['resizable']; /** * For controlling whether individual rows can be selected. * @defaultValue undefined */ selectableRows?: DataTableRowSelectionProps['selectableRows']; /** * For configuring the highlighting of individual rows. * @defaultValue [] */ rowThresholds?: DataTableThresholdProps['rowThresholds']; /** * For controlling whether the columns are sortable. * @defaultValue false */ sortable?: DataTableSortingProps['sortable']; /** * For customizing the appearance of the table. */ variant?: DataTableVisualVariantProps['variant']; } /** * Common column definition denominator. All column definitions extend from this type. * @public */ export type DataTableColumnDefBase = { /** Id of the column to uniquely identify it. */ id: string; cell?: string | DataTableCustomCell; } & (DataTableCustomHeader | DataTableDefaultHeader) & DataTableAlignmentColumnDef & DataTableSortingColumnDef; /** * Column header definition for default string headers. * Used when the column header is a simple text value. * The header string is also used as the label in this case. * @public */ export interface DataTableDefaultHeader { /** Header of the column. */ header?: string; /** * The label is not allowed for default headers, as the `header` string is used as the label. */ label?: never; } /** * Column header definition for custom headers. * The `label` property can be provided as an option to supply a user-friendly name for column settings and `aria-label`. * @public */ export interface DataTableCustomHeader { /** Header of the column. */ header?: () => ReactElement; /** * User-friendly label for the column header, used in e.g. column settings modal and for `aria-label`. */ label?: string; } /** * Column definition for display columns that render cells in the DataTable. * @public */ export type DataTableDisplayColumnDef = DataTableColumnDefBase & DataTableColumnTypesColumnDef & DataTableThresholdColumnDef & DataTableVisibilityColumnDef & { /** * 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; }; /** * Absolute minimum width of the column. */ minWidth?: number; /** * Absolute maximum width of the column. */ maxWidth?: number; }; /** * Column definition for column groups that do not render cells in the DataTable. * @public */ export type DataTableGroupColumnDef = DataTableColumnDefBase & { /** * 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?: DataTableDisplayColumnDef[]; }; /** * Mapping type for the columns prop that can contain either display columns or group columns. * @public */ export type DataTableColumnDef = DataTableDisplayColumnDef | DataTableGroupColumnDef; /** * Settings available in the column settings modal. * @public */ export type DataTableColumnSettingsConfig = { columnOrder?: boolean; columnVisibility?: boolean; columnPinning?: boolean; }; /** * Ref type of the DataTable. * @public */ export interface DataTableRef { /** Root element ref of the component. */ readonly element: HTMLDivElement | null; /** Returns the current config of the DataTable.*/ getConfig: () => DataTableConfig; /** * Downloads all data, the data on the current page or the selected data. * Optionally, columns can be excluded by their IDs. */ downloadData: (subset: 'all' | 'page' | 'selected', excludeColumns?: string[]) => void; /** * Scrolls the table to the row with the given `rowId`, aligning the row at the given scroll position. */ scrollToRow: (rowId: string, align?: 'start' | 'center' | 'end') => 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 `DataTableToolbar`. */ openColumnSettings: (columnSettings?: DataTableColumnSettingsConfig) => void; /** * Returns the row IDs in their current display order, reflecting active sorting and the current page when pagination is enabled. */ getDisplayedRowIds: () => string[]; } /** * Basic props for the DataTable. * @public */ export interface DataTableBaseProps extends WithChildren { /** * Data given to the DataTable. Needs to be memoized in order to ensure * performant update cycles. */ data: TData[]; /** * Column definition given to the DataTable. Needs to be memoized in order * to ensure performant update cycles. */ columns: DataTableColumnDef[]; /** * 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 DataTable component. * @public */ export type DataTableProps = DataTableBaseProps & DataTableLineWrapProps & DataTableColumnFontStyleProps & DataTableVisualVariantProps & DataTableLoadingStateProps & DataTableColumnSizingProps & DataTableSortingProps & DataTableColumnVisibilityProps & DataTableColumnOrderProps & DataTableRowSelectionProps & DataTableThresholdProps & DataTableSubRowsProps & DataTableRowInteractivityProps & DataTableDownloadProps & DataTableRowIdentification & DataTableRowOrderProps & DataTableColumnPinningProps & StylingProps & DataTestId & MaskingProps & BehaviorTrackingProps;