import type { ScrollToOptions } from '@tanstack/react-virtual'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import type { ComponentType, DependencyList, Dispatch, MutableRefObject, ReactNode, Ref, RefObject, SetStateAction } from 'react'; import type { AnalyticalTableNoDataReason } from '../../../enums/AnalyticalTableNoDataReason.js'; import type { AnalyticalTablePopinDisplay } from '../../../enums/AnalyticalTablePopinDisplay.js'; import type { AnalyticalTableScaleWidthMode } from '../../../enums/AnalyticalTableScaleWidthMode.js'; import type { AnalyticalTableScrollMode } from '../../../enums/AnalyticalTableScrollMode.js'; import type { AnalyticalTableSelectionBehavior } from '../../../enums/AnalyticalTableSelectionBehavior.js'; import type { AnalyticalTableSelectionMode } from '../../../enums/AnalyticalTableSelectionMode.js'; import type { AnalyticalTableSubComponentsBehavior } from '../../../enums/AnalyticalTableSubComponentsBehavior.js'; import type { AnalyticalTableVisibleRowCountMode } from '../../../enums/AnalyticalTableVisibleRowCountMode.js'; import type { IndicationColor } from '../../../enums/IndicationColor.js'; import type { TextAlign } from '../../../enums/TextAlign.js'; import type { VerticalAlign } from '../../../enums/VerticalAlign.js'; import type { CommonProps } from '../../../types/index.js'; import type { PopoverDomRef } from '../../../webComponents/Popover/index.js'; import type { classNames } from '../AnalyticalTable.module.css.js'; export type ClassNames = typeof classNames; interface StateReducerAction { type: string; id?: string; value?: boolean; payload?: any; columnId?: string; filterValue?: string; clientX?: number; [key: string]: unknown; } export declare enum RenderColumnTypes { Filter = "Filter", Grouped = "Grouped", Cell = "Cell", Expandable = "Expandable", RepeatedValue = "RepeatedValue", PopIn = "PopIn", Popover = "Popover", Header = "Header", Aggregated = "Aggregated" } export interface ColumnType extends Omit { id?: string; Expandable?: any; Grouped?: any; RepeatedValue?: any; Popover?: any; canFilter?: boolean; canGroupBy?: boolean; canResize?: boolean; canSort?: boolean; depth?: number; filterValue?: any; filteredRows?: RowType[]; getFooterProps?: (props?: any) => any; getGroupByToggleProps?: (props?: any) => any; getHeaderProps?: (props?: any) => any; getSortByToggleProps?: (props?: any) => any; getToggleHiddenProps?: (props?: any) => any; groupedIndex?: number; isGrouped?: boolean; isResizing?: boolean; isSorted?: boolean; isSortedDesc?: boolean; isVisible?: boolean; originalWidth?: number; parent?: any; preFilteredRows?: Record[]; /** * Renders the component with the given column type * @param type * @param props The props are added to the table instance */ render?: (type: RenderColumnTypes | keyof typeof RenderColumnTypes, props: Record) => ReactNode; /** * Set the filter value for the current column. * * __Note:__ If set to `undefined`, the filter is removed. */ setFilter?: (val: string | string[] | undefined) => void; sortDescFirst?: boolean; sortedIndex?: number; toggleHidden?: (hidden?: boolean) => void; totalFlexWidth?: number; totalLeft?: number; totalMaxWidth?: number; totalMinWidth?: number; totalVisibleHeaderCount?: number; totalWidth?: number; [key: string]: any; } export interface CellType { column: ColumnType; row: RowType; value: boolean | number | string | undefined | null; getCellProps: (userProps?: any) => any; /** * Indicates whether the cell is aggregated. * * __Note:__ This is a numeric flag where `1` means true and `0` means false. */ isAggregated: 0 | 1; isGrouped: boolean; isPlaceholder: boolean; [key: string]: any; } export interface TableInstance { allColumns: ColumnType[]; allColumnsHidden?: boolean; autoResetExpanded?: boolean; autoResetFilters?: boolean; autoResetGroupBy?: boolean; autoResetHiddenColumns?: boolean; autoResetPage?: boolean; autoResetResize?: boolean; autoResetRowState?: boolean; autoResetSelectedRows?: boolean; autoResetSortBy?: boolean; columns: ColumnType[]; data: Record[]; defaultColumn: Record; disableFilters: boolean; disableGlobalFilter?: boolean; disableGroupBy: boolean; disableSortBy: boolean; dispatch: (action: { type: string; payload?: Record | AnalyticalTableState['popInColumns'] | boolean | string | number; clientX?: number; columnId?: string; columnOrder?: string[] | ((order: string[]) => string[]); columnWidth?: number; desc?: boolean; filterValue?: any; filters?: any; headerIdWidths?: (string | number)[][]; id?: string; multi?: boolean; sortBy?: AnalyticalTableState['sortBy']; value?: boolean | string[] | ((old: string[]) => string[]); }) => void; expandedDepth?: number; expandedRows?: RowType[]; filteredFlatRows?: RowType[]; filteredRows?: RowType[]; filteredRowsById?: Record; flatHeaders: ColumnType[]; flatRows: RowType[]; footerGroups?: Record[]; getHooks: () => ReactTableHooks; getRowId: (row: RowType, index: number, parent?: any) => string; getSubRows: (row: RowType, relativeIndex?: number) => RowType[]; getTableBodyProps?: (userProps?: Record) => Record; getTableProps?: (userProps?: Record) => Record; getToggleAllPageRowsSelectedProps?: (userProps?: Record) => Record; getToggleAllRowsExpandedProps?: (userProps?: Record) => Record; getToggleAllRowsSelectedProps?: (userProps?: Record) => Record; getToggleHideAllColumnsProps?: (userProps?: Record) => Record; globalFilteredFlatRows?: RowType[]; globalFilteredRows?: RowType[]; globalFilteredRowsById?: Record; groupByFn?: (rows: RowType[], columnId: string) => Record; groupedFlatRows?: RowType[]; groupedRows?: RowType[]; groupedRowsById?: Record; /** * Nested column headers are not supported. This array must only contain a single header group. */ headerGroups: Record[]; headers: ColumnType[]; initialRows: RowType[]; initialState: Record; isAllPageRowsSelected?: boolean; isAllRowsExpanded?: boolean; isAllRowsSelected?: boolean; nonGroupedFlatRows?: RowType[]; nonGroupedRowsById?: Record; onlyGroupedFlatRows?: RowType[]; onlyGroupedRowsById?: Record; page?: RowType[]; plugins: Array void)>; preExpandedRows?: RowType[]; preFilteredFlatRows?: RowType[]; preFilteredRows?: RowType[]; preFilteredRowsById?: Record; preGlobalFilteredFlatRows?: RowType[]; preGlobalFilteredRows?: RowType[]; preGlobalFilteredRowsById?: Record; preGroupedFlatRow?: RowType[]; preGroupedRows?: RowType[]; preGroupedRowsById?: Record; preSortedFlatRows?: RowType[]; preSortedRows?: RowType[]; prepareRow?: (row: RowType) => void; resetResizing?: () => void; rows: RowType[]; rowsById: Record; selectSubRows: boolean; selectedFlatRows?: RowType[]; setAllFilters?: (filtersObjectArray: Record[]) => void; setColumnOrder?: (columnOrder: AnalyticalTableState['columnOrder']) => void; /** * Set the filter value for the defined column. * * __Note:__ If set to `undefined`, the filter is removed. */ setFilter?: (columnId: string, filterValue: string | string[] | undefined) => void; setGlobalFilter?: (filterValue: string) => void; setGroupBy?: (columnIds: string[]) => void; setHiddenColumns?: (columnIds: string[]) => void; setSortBy?: (sortBy: AnalyticalTableState['sortBy']) => void; sortTypes: Record; sortedFlatRows?: Record[]; sortedRows?: Record[]; state: AnalyticalTableState & Record; stateReducer?: (state: TableInstance['state'], action: StateReducerAction, _prevState: TableInstance['state'], instance: TableInstance) => TableInstance['state']; toggleAllPageRowsSelected?: (selected?: boolean) => void; toggleAllRowsExpanded?: (expanded?: boolean) => void; toggleAllRowsSelected?: (selected?: boolean) => void; toggleGroupBy?: (columnId: string, value?: boolean) => void; toggleHideAllColumns?: (hidden?: boolean) => void; toggleHideColumn?: (columnId: string, hidden?: boolean) => void; toggleRowExpanded?: (rowPath: string, expanded?: boolean) => void; toggleRowSelected?: (rowPath: string, selected?: boolean) => void; toggleSortBy?: (columnId: string, desc: boolean, multi?: boolean) => void; totalColumnsMaxWidth?: number; totalColumnsMinWidth?: number; totalColumnsWidth?: number; useControlledState: (state: TableInstance['state'] & Record, instance?: { instance: TableInstance; }) => TableInstance['state'] & Record; virtualRowsRange?: { startIndex: number; endIndex: number; }; visibleColumns: ColumnType[]; visibleColumnsWidth?: number[]; webComponentsReactProperties: WCRPropertiesType; pendingSelectEvent?: { event: Event; row?: RowType; selectAll?: boolean; }; rawColumnSizing?: Map; [key: string]: any; } export interface WCRPropertiesType { canUseVoiceOver: boolean; fontsReady: boolean; isFirefox: boolean; selectionMode: AnalyticalTablePropTypes['selectionMode']; onRowSelect?: AnalyticalTablePropTypes['onRowSelect']; a11yElementIds: { cellSelectDescId: string; cellUnselectDescId: string; cellExpandDescId: string; cellCollapseDescId: string; cellEmptyDescId: string; headerSelectAllDescId: string; headerDeselectAllDescId: string; }; translatableTexts: { selectAllText: string; deselectAllText: string; expandNodeA11yText: string; collapseNodeA11yText: string; filteredA11yText: string; groupedA11yText: string; selectAllA11yText: string; deselectAllA11yText: string; rowExpandedAnnouncementText: string; rowCollapsedAnnouncementText: string; selectionHeaderCellText: string; highlightHeaderCellText: string; navigationHeaderCellText: string; }; tagNamesWhichShouldNotSelectARow: Set; tableRef: MutableRefObject; selectionBehavior: AnalyticalTablePropTypes['selectionBehavior']; classes: ClassNames; onAutoResize: AnalyticalTablePropTypes['onAutoResize']; onRowClick: AnalyticalTablePropTypes['onRowClick']; onRowContextMenu: AnalyticalTablePropTypes['onRowContextMenu']; onRowExpandChange: AnalyticalTablePropTypes['onRowExpandChange']; onSort: AnalyticalTablePropTypes['onSort']; onGroup: AnalyticalTablePropTypes['onGroup']; isTreeTable: AnalyticalTablePropTypes['isTreeTable']; alternateRowColor: AnalyticalTablePropTypes['alternateRowColor']; scaleWidthMode: AnalyticalTablePropTypes['scaleWidthMode']; loading: AnalyticalTablePropTypes['loading']; withRowHighlight: AnalyticalTablePropTypes['withRowHighlight']; highlightField: AnalyticalTablePropTypes['highlightField']; withNavigationHighlight: AnalyticalTablePropTypes['withNavigationHighlight']; markNavigatedRow: AnalyticalTablePropTypes['markNavigatedRow']; renderRowSubComponent: AnalyticalTablePropTypes['renderRowSubComponent']; alwaysShowSubComponent: boolean; showOverlay: AnalyticalTablePropTypes['showOverlay']; uniqueId: string; subRowsKey: AnalyticalTablePropTypes['subRowsKey']; onColumnsReorder: AnalyticalTablePropTypes['onColumnsReorder']; onFilter: AnalyticalTablePropTypes['onFilter']; } export type CellInstance = TableInstance & { cell: CellType; } & Omit; export interface RowType { canExpand?: boolean; cells?: CellType[]; allCells?: Record[]; depth: number; id: string; index: number; isExpanded?: boolean; isGrouped?: boolean; isSelected?: boolean; isSomeSelected?: boolean; getRowProps?: (props?: any) => any; original: Record; originalSubRows?: Record[]; subRows?: RowType[]; values: Record; groupByID?: string; groupByVal?: string; leafRows?: Omit[]; getToggleRowExpandedProps?: (userProps?: any) => any; getToggleRowSelectedProps?: (userProps?: any) => any; toggleRowExpanded?: (isExpanded?: boolean) => void; toggleRowSelected?: (isSelected?: boolean) => void; [key: string]: any; } export interface ScrollToRefType { horizontalScrollToOffset: (offset: number, options: Omit) => void; horizontalScrollToIndex: (item: number, options: Omit) => void; scrollToIndex: (item: number, options: Omit) => void; scrollToOffset: (item: number, options: Omit) => void; } export interface TriggerScrollState { type: 'offset' | 'item'; direction: 'vertical' | 'horizontal'; args: [number, Omit?]; } interface PopInColumnsState { id: string; column: ColumnType; popinDisplay: AnalyticalTableColumnDefinition['popinDisplay']; } export interface AnalyticalTableState { columnOrder: string[]; columnResizing: Record; expanded: Record; filters: Filter[]; groupBy: string[]; hiddenColumns: string[]; selectedRowIds: Record; sortBy: { id: string; desc: boolean; }[]; globalFilter?: string; tableClientWidth?: number; dndColumn?: string; popInColumns?: PopInColumnsState[]; isRtl?: boolean; isScrollable?: boolean; subComponentsHeight?: Record; visibleRows?: number; rowCollapsed?: boolean; bodyHeight?: number; interactiveRowsHavePopIn?: boolean; tableColResized?: true; triggerScroll?: TriggerScrollState; cellContentTabIndex?: number; } interface Filter { id: number | string; value: string; } interface CellLabelParam { instance: Record; cell: CellInstance; } interface ScaleWidthModeOptions { /** * Defines the string used for internal width calculation of custom header cells (e.g. `Header: () => Click me!`). * * You can find out more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-analyticaltable-faq--docs#how-to-scale-custom-cells). * * __Note:__ This property has no effect when used with `AnalyticalTableScaleWidthMode.Default`. */ headerString?: string; /** * Defines the string used for internal width calculation of the longest cell inside the body of the table (e.g. `Cell: () => Click me!`). * * You can find out more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-analyticaltable-faq--docs#how-to-scale-custom-cells). * * __Note:__ This property has no effect when used with `AnalyticalTableScaleWidthMode.Default`. */ cellString?: string; } interface PopoverProps { id: string; /** * Set the state of the popover. If set to `false` the component is unmounted. */ setOpen: Dispatch>; /** * React Ref that holds the reference to the respective table header element. * * @deprecated Use `openerId` instead. */ openerRef: MutableRefObject; /** * ID of the respective table header element that opens the popover. */ openerId: string; } export interface TableInstanceWithPopoverProps extends CellInstance { popoverProps: PopoverProps; } export interface FilterProps { column: ColumnType; /** * `Popover` DOM RefObject */ popoverRef: RefObject; /** * `accessibleNameRef` for filter `Input` */ accessibleNameRef: string; } export interface AnalyticalTableColumnDefinition { /** * This `string`/`function` is used to build the data model for your column. * * __Note__: You can also specify deeply nested values with accessors like `info.hobby` or even `address[0].street` * __Note__: If no `accessor` is set, or the `accessor` is a function, the `id` property has to be set. */ accessor?: string | ((originalRow: Record, rowIndex: number, row: RowType, parentRows: RowType[], data: Record[]) => any); /** * Defines the unique ID for the column. It is used by reference in things like sorting, grouping, filtering etc. * * __Note__: If no `accessor` is set, or the `accessor` is a function, the `id` property has to be set. */ id?: string; /** * Can either be string or a React component that will be rendered as column header */ Header?: string | ComponentType; /** * Defines the `aria-label` for the whole column read by screen readers. * * __Note:__ This prop is mandatory if you pass anything else than `string` to the `Header` property. In this case the `headerLabel` should at least contain the column name. * * __Note:__ If `headerLabel` is defined, screen readers will always read the passed string, even when `Header` is a `string`. */ headerLabel?: string; /** * Tooltip for the column header. If not set, the display text will be the same as the Header if it is a `string`. */ headerTooltip?: string; /** * Custom cell renderer. If set, the table will use this component or render the provided string for every cell, * passing all necessary information as props, e.g., the cell value as `props.value`. * * __Note:__ * - Using a custom component __can impact performance__! If you pass a component, __memoizing it is strongly recommended__, especially for complex components or large datasets. * - For custom elements, text truncation needs to be applied manually. [Here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-analyticaltable-faq--docs) you can find out more. */ Cell?: string | ComponentType; /** * Defines a function that receives an object as a parameter, including the cell and table instance, and should return the `aria-label` of the current cell. * * __Note:__ Use this property if there is no textual content available through the dataset (e.g. no `accessor` field available), or if you want to provide additional context when navigating to the respective cell for screen readers. * * __Note:__ To retrieve the internal `aria-label`, utilize the `cell.cellLabel` property. * * __Note:__ When defined on the first column, this overrides automatic pop-in accessibility announcements. */ cellLabel?: (param: CellLabelParam) => string; /** * Defines the column width. If not set the table will distribute all columns without a width evenly. * * __Note:__ The `width` cannot be less than `minWidth`. Since `minWidth` defaults to 60, set a lower `minWidth` to allow narrower columns. */ width?: number; /** * Minimum width of the column. * * @default: 60 */ minWidth?: number; /** * Maximum width of the column. */ maxWidth?: number; /** * Custom header Popover renderer. If set, this component replaces the internal header Popover. * * The table instance is passed as a prop, which includes the `popoverProps` object containing: * - `openerRef`: A reference to the header cell that opens the popover. * - `setOpen`: A React state setter to control the popover's open state. (The component will be unmounted if set to `false`) * * __Note:__ Since the component unmounts when closing the popover, the `open` prop of `Popover` components doesn't need to be controlled directly and can be set to `true`. */ Popover?: ComponentType<{ instance: TableInstanceWithPopoverProps; }> | ((instance: TableInstanceWithPopoverProps) => ReactNode); /** * Filter Component to be rendered in the Header. */ Filter?: ComponentType; /** * Disable filters for this column. */ disableFilters?: boolean; /** * If set to true, this column will be filterable, regardless if it has a valid `accessor`. */ defaultCanFilter?: boolean; /** * Either a string or a filter function. * * Supported String Values: * * `text` * * `exactText` * * `exactTextCase` * * `equals` * * __Note:__ When the standard `Filter` component is used, the filter function is not triggered if the `filterValue` is empty, as the filter is then removed. */ filter?: string | ((rows: RowType[], columnIds: string[], filterValue: string) => RowType[]); /** * Disables global filtering for this column */ disableGlobalFilter?: boolean; /** * Component to render for aggregated cells. */ Aggregated?: string | ComponentType; /** * Aggregation function or string.
Supported String Values:
  • `min`
  • `max`
  • `median`
  • `count`
*/ aggregate?: string | ((leafValues: any, aggregatedValues: any) => any); /** * When attempting to group/aggregate non-primitive cell values (e.g. arrays of items) you will likely need to resolve a stable primitive value like a number or string to use in normal row aggregations. This property can be used to aggregate or simply access the value to be used in aggregations eg. count-ing the unique number of items in a cell's array value before sum-ing that count across the table. */ aggregateValue?: string | ((values: any, row: RowType, column: any) => any); /** * Disable groupBy for this column. */ disableGroupBy?: boolean; /** * If set to true, this column will be sortable, regardless if it has a valid `accessor`. */ defaultCanSort?: boolean; /** * Disable sorting for this column. */ disableSortBy?: boolean; /** * If set to `true`, the first sort direction for this column will be descending instead of ascending. */ sortDescFirst?: boolean; /** * If set to `true`, the underlying sorting direction will be inverted, but the UI will not. */ sortInverted?: boolean; /** * - Used to compare 2 rows of data and order them correctly. * - If a function is passed, it must be **memoized**. The sortType function should return 1 if rowA is larger and -1 if rowB is larger. `react-table` will handle the rest; there's no need to manage the inversion of sort numbers (depending on sort direction) manually. * - String options: `basic`, `datetime`, `alphanumeric`. * - The resolved function from the string/function will be used to sort the column's data. * - If a `string` is passed, the function with that name located on either the custom `sortTypes` option or the built-in sorting types object will be used. * - If a `function` is passed, it will be used. * * @default 'alphanumeric' */ sortType?: string | ((rowA: any, rowB: any, columnId: string, descending: boolean) => number); /** * Disable resizing for this column. */ disableResizing?: boolean; /** * Defines whether double-clicking a columns resizer will automatically resize the column to fit the largest cell content of visible rows. * * __Note:__ Only default text content is supported by this option, for custom content it might work as well, but we recommend checking the behavior carefully as the logic can't account for all possible implementations. */ autoResizable?: boolean; /** * Defines a `className` that is applied to each body cell of the column. */ className?: string; /** * Defines a `className` that is applied to the header cell of the column. */ classNameHeader?: string; /** * Horizontal alignment of the cell. */ hAlign?: TextAlign | keyof typeof TextAlign; /** * Vertical alignment of the cell. */ vAlign?: VerticalAlign | keyof typeof VerticalAlign; /** * Allows passing a custom string for the internal width calculation of custom cells for `scaleWidthMode` `Grow` and `Smart`. * * You can find out more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-analyticaltable-faq--docs#how-to-scale-custom-cells). * * __Note:__ This property has no effect when used with `AnalyticalTableScaleWidthMode.Default`. * * @since 1.22.0 */ scaleWidthModeOptions?: ScaleWidthModeOptions; /** * Enables the pop-in behavior of the column. When the `responsiveMinWidth` is smaller than the width of the table, the content of each cell will move to the first cell in the row, improving usability on small or mobile devices. * * __Note:__ * - At least one column must remain visible at all times! * - The `sap.ui.table` doesn’t support pop-in behavior (unlike `sap.m.Table`); it’s unclear whether this should be part of the design. * */ responsivePopIn?: boolean; /** * Defines how the table should react when its width falls below the `responsiveMinWidth`. * * - If `responsivePopIn` is `true` the content of this column will be moved to the first column. * - If `responsivePopIn` is not set or `false` the column will be hidden. */ responsiveMinWidth?: number; /** * Custom pop-in header renderer. If set, the table will call that component for every column that is "popped-in" and pass the table instance as prop. */ PopInHeader?: string | ComponentType; /** * Defines the display of `AnalyticalTable` pop-ins. * * @default AnalyticalTablePopinDisplay.Block * @since 2.5.0 */ popinDisplay?: AnalyticalTablePopinDisplay | keyof typeof AnalyticalTablePopinDisplay; /** * Defines if the column is reorderable by dragging and dropping columns. */ disableDragAndDrop?: boolean; /** * Defines whether this column should allow multi-sort. * * __Note:__ When sorting by a column that does not allow multiple sorting, only the current column is sorted and all other sorted columns are reset. */ enableMultiSort?: boolean; /** * __Required when using the `useF2CellEdit` plugin hook.__ Without the hook, this property has no effect. * * Defines the name of interactive element(s) inside the cell. * This property is used both to describe the cell's content for screen readers and to manage focus and keyboard navigation. * * @since 2.14.0 */ interactiveElementName?: string | ((cell: CellInstance) => string); [key: string]: any; } export interface DivWithCustomScrollProp extends HTMLDivElement { isExternalVerticalScroll?: boolean; } export interface AnalyticalTableDomRef extends Omit { scrollToItem: (index: number, align?: AnalyticalTableScrollMode | keyof typeof AnalyticalTableScrollMode) => void; scrollTo: (scrollOffset: number, align?: AnalyticalTableScrollMode | keyof typeof AnalyticalTableScrollMode) => void; horizontalScrollTo: (scrollOffset: number, align?: AnalyticalTableScrollMode | keyof typeof AnalyticalTableScrollMode) => void; horizontalScrollToItem: (index: number, align?: AnalyticalTableScrollMode | keyof typeof AnalyticalTableScrollMode) => void; } type HighlightColor = ValueState | keyof typeof ValueState | IndicationColor | keyof typeof IndicationColor; interface OnAutoResizeMouseEvent extends Omit { detail: { columnId: string; width: number; nativeDetail: 2; }; } interface OnRowClickEvent extends Omit { detail: { row: RowType; nativeDetail: number; }; } interface OnRowContextMenuEvent extends Omit { detail: { row: RowType; /** * __Note:__ `undefined` if right-click did not target a specific cell **/ column: ColumnType | undefined; }; } export interface AnalyticalTablePropTypes extends Omit { /** * Defines the columns array where you can define the configuration for each column. * * __Must be memoized!__ */ columns: AnalyticalTableColumnDefinition[]; /** * The data array that you want to display on the table. * * __Must be memoized!__ */ data: Record[]; /** * Component or text rendered in the header section of the `AnalyticalTable`. * * __Note:__ If not set, the header section is not rendered. When set, its text is automatically used as the table's accessible name. To provide a different accessible name, use `accessibleName` or `accessibleNameRef` instead. */ header?: ReactNode; /** * Defines the accessible name of the table. * * __Note:__ If set, the `aria-labelledby` derived from the `header` prop will not be applied to the table grid. */ accessibleName?: string; /** * Defines the IDs of the elements that label the table. * * __Note:__ If set, the `aria-labelledby` derived from the `header` prop will not be applied to the table grid. */ accessibleNameRef?: string; /** * Extension section of the Table. If not set, no extension area will be rendered */ extension?: ReactNode; /** * The minimum number of rows that are displayed. If the data contains fewer entries than `minRows`, it will be filled with empty rows. * * __Note:__ * - To prevent the height of the table from jumping when e.g. filtering or fetching data, it's recommended setting `minRows` to the same value as `visibleRows`. * - Values less than 1 are __not__ supported! * * * @default 5 */ minRows?: number; /** * Defines how the table will render rows. * * - __"Fixed":__ The table always has as many rows as defined in the `visibleRows` prop. * - __"Auto":__ The number of visible rows depends on the height of the surrounding container. Since this mode can cause the table height to change when filtering, fetching data, etc., we recommend using the `"AutoWithEmptyRows"` mode instead. * - __"AutoWithEmptyRows":__ The number of rows displayed depends on the height of the surrounding container, if not enough visible rows are available, empty rows are displayed. * - __"Interactive":__ Adds a resizer to the bottom of the table to dynamically add or remove visible rows. The initial number of rows is defined by the `visibleRows` prop. * * __Note:__ When `"Auto"` or `"AutoWithEmptyRows"` is enabled, we recommend using a fixed height for the parent container. * * @default "Fixed" */ visibleRowCountMode?: AnalyticalTableVisibleRowCountMode | keyof typeof AnalyticalTableVisibleRowCountMode; /** * Specifies the number of additional empty rows added to the bottom of a table that is normally __non__ scrollable. * Use this prop if you want to ensure that the table is scrollable. * * __Note:__ It's recommended to use this prop only if `infiniteScroll` is applied and where assessing scrollability is not possible across various resolutions or datasets. * E.g., when using `visibleRowCountMode` with values `"Auto"` or `"AutoWithEmptyRows"`. * * __Note:__ This prop has no effect if the table is already scrollable without additional empty rows. */ additionalEmptyRowsCount?: number; /** * The number of rows visible without going into overflow. * * __Note:__ * - If the data contains more entries than the `visibleRow` count, a vertical scrollbar is rendered and the table goes into overflow. * - To prevent the height of the table from jumping when e.g. filtering or fetching data, it's recommended setting `minRows` to the same value as `visibleRows`. * * @default 15 */ visibleRows?: number; /** * Defines whether the row height of popped-in columns should be considered when calculating the body height of the table. * * __Note:__ If set so `true` the table will change its height depending on whether columns are popped in or not. */ adjustTableHeightOnPopIn?: boolean; /** * Indicates whether a loading indicator should be shown. * * __Note:__ If the data array is not empty and loading is set to `true` a `BusyIndicator` will be displayed on top of the table, otherwise a skeleton placeholder will be shown. You can control this behavior via the `alwaysShowBusyIndicator` prop. */ loading?: boolean; /** * Defines the delay in milliseconds, after which the `BusyIndicator` will be visible on the screen. * * @default 1000 */ loadingDelay?: number; /** * Setting this prop to `true` will show an overlay on top of the AnalyticalTable content preventing users from interacting with it. */ showOverlay?: boolean; /** * If `true`, always shows the `BusyIndicator` component when loading instead of the skeleton loader. * * __We recommend setting this prop to `true` when loading times are under 1 second.__ */ alwaysShowBusyIndicator?: boolean; /** * Defines the text shown if the data array is empty or a filtered table doesn't return results. * * __Note:__ If `noDataText` isn't set, the default text displayed is "No data". For filtered tables, it will show "No data found. Try adjusting the filter settings." instead. */ noDataText?: string; /** * Defines the height of the rows and header row. * * __Note:__ This prop overrides the default height. If you want to use the default height after you have set a custom height, you will have to remove this prop and remount the component. * * __Note:__ To preserve the intended design, it is not recommended to set a row height with active elements such as buttons below `32px` for content density "Compact" and `44px` for content density "Cozy". */ rowHeight?: number; /** * Defines the height of the header row. * * __Note:__ If this property is set, it overwrites the height set in `rowHeight` for the header row. * * __Note:__ This prop overrides the default height. If you want to use the default height after you have set a custom height, you will have to remove this prop and remount the component. */ headerRowHeight?: number; /** * Defines whether the table should retain its column width, when a column has been manually resized and the container width has changed. */ retainColumnWidth?: boolean; /** * Defines whether the table should display rows with alternating row colors. */ alternateRowColor?: boolean; /** * Flag whether the table should add an extra column at the end of the rows for displaying a navigation highlight. */ withNavigationHighlight?: boolean; /** * Flag whether the table should add an extra column at the start of the rows for displaying row highlights, based on the `highlightField` prop. * * __Note:__ When enabled, the table automatically adds a column with `accessor="status"`. If you have a custom column using this accessor, change the `highlightField` prop to a different value to avoid conflicts. */ withRowHighlight?: boolean; /** * Accessor for showing the row highlights. Only taken into account when `withRowHighlight` is set. * * The value of this prop can either be a `string` pointing to a `ValueState` or an `IndicationColor` in your dataset * or an accessor function which should return a `ValueState` or an `IndicationColor`. * * __Note:__ If a function is used, it __must be memoized!__ * * @since 1.26.0 * * @default "status" */ highlightField?: string | ((original: Record) => HighlightColor); /** * Defines whether columns are filterable. * * __Note:__ The table is implementing "top-down" (parent/root node first) filtering. */ filterable?: boolean; /** * Defines whether columns are sortable. * * @default true */ sortable?: boolean; /** * Defines whether columns are groupable. * * __Note:__ This prop has no effect when `isTreeTable` is true or `renderRowSubComponent` is set. * * __Note:__ It is not recommended to use grouping in combination with `infiniteScroll` as there is no concept for this configuration. */ groupable?: boolean; /** * Group table rows by adding the column's `accessor` or `id` to the array. * * __Must be memoized!__ * * __Note:__ This prop has no effect when `isTreeTable` is true or `renderRowSubComponent` is set. */ groupBy?: string[]; /** * Defines the selection behavior of the table. * * - __"Row":__ A selection column is rendered along with the normal columns. The whole row is selectable. * - __"RowOnly":__ No selection column is rendered along with the normal columns. The whole row is selectable. * - __"RowSelector":__ The row is only selectable by clicking on the corresponding field in the selection column. * * __Default:__ `"Row"` */ selectionBehavior?: AnalyticalTableSelectionBehavior | keyof typeof AnalyticalTableSelectionBehavior; /** * Defines the `SelectionMode` of the table. * * - __"None":__ The rows are not selectable. * - __"Single":__ You can select only one row at once. Clicking on another row will unselect the previously selected row. * - __"Multiple":__ You can select multiple rows. * * @default "None" */ selectionMode?: AnalyticalTableSelectionMode | keyof typeof AnalyticalTableSelectionMode; /** * Defines the column growing behaviour. Possible Values: * * - **Default**: The available space of the table is distributed evenly for columns without fixed width. If the minimum width of all columns is reached, horizontal scrolling will be enabled. * - **Smart**: Every column gets the space it needs for displaying the full header text. If all header texts need more space than the available table width, horizontal scrolling will be enabled. If there is space left, columns with a long text will get more space until there is no more table space left. * - **Grow**: Every column gets the space it needs for displaying its full header text and full text content of all cells. If it requires more space than the table has, horizontal scrolling will be enabled. To prevent huge header text from polluting the table, a max-width of 700px is applied to each column. It can be overwritten by setting the respective column property. * * __Note:__ * - Columns without data `accessor` are ignored by the `Smart` and `Grow` modes. You can use the `scaleWidthModeOptions` property on the column definition to add custom strings for the internal width calculation. * - For performance reasons, the `Smart` and `Grow` modes base their calculation for table cell width on a subset of column cells. If the first 20 cells of a column are significantly smaller than the rest of the column cells, the content may still not be fully displayed for all cells. * - Only the default mode is available out of the box for the `sap.m.Table`; similar behavior to the `"Grow"` mode can be achieved in `sap.ui.table` using `autoResizeColumn`. * * @default "Default" * */ scaleWidthMode?: AnalyticalTableScaleWidthMode | keyof typeof AnalyticalTableScaleWidthMode; /** * Defines the number of the CSS `scaleX(sx: number)` function. `sx` is representing the abscissa of the scaling vector. */ scaleXFactor?: number; /** * Defines the columns order by their `accessor` or `id`. * * __Must be memoized!__ */ columnOrder?: string[]; /** * Defines whether infinite scroll is active. * * __Note:__ It is not recommended to use this prop in combination with a grouped table, as there is no concept for this configuration. * * __Note:__ To prevent the table state from resetting when the data is updated, please see [this faq entry](https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-analyticaltable-faq--docs#how-to-stop-the-table-state-from-automatically-resetting-when-the-data-changes). */ infiniteScroll?: boolean; /** * The `infiniteScrollThreshold` defines at how many remaining rows the `onLoadMore` event should be fired. * * Example: Your initial dataset consists of 50 entries and you want to load more data when the user scrolled to the 40th row. Then you should set the `infiniteScrollThreshold` to 10. * * @default 20 */ infiniteScrollThreshold?: number; /** * Defines the value that should be filtered on across all rows. * * __Note:__ This prop is not supported for tree-tables. You can enable it by creating your own global-filter function. You can find out more about this in the [react-table v7 documentation](https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useGlobalFilter.md). */ globalFilterValue?: string; /** * Additional options which will be passed to [v7 react-table´s useTable hook](https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useTable.md#table-options) * * __Must be memoized!__ */ reactTableOptions?: Record; /** * You can use this prop to add custom hooks to the table. * * __Must be memoized!__ * * @default [] */ tableHooks?: ((hooks: ReactTableHooks) => void)[]; /** * Defines the key for nested rows. * * __Note__: You can also specify deeply nested sub-rows with accessors like `values.subRows`. * * @default "subRows" */ subRowsKey?: string; /** * The key must consist of a valid `rowId` like `{ 2: true }` or `{ '0.2.0': true }` for nested rows. * * __Note:__ This prop updates the internal table state and must therefore be memoized! */ selectedRowIds?: Record; /** * Defines whether the table should act as tree-table. */ isTreeTable?: boolean; /** * The amount of columns to load both behind and ahead of the current window range. * * @default 5 */ overscanCountHorizontal?: number; /** * The amount of rows to load both behind and ahead of the current window range. */ overscanCount?: number; /** * Defines the subcomponent that should be displayed below each row. * * __Must be memoized!__ * * __Note:__ * - __There is no design concept regarding this functionality!__ * - When rendering active elements inside the subcomponent, make sure to add the `data-subcomponent-active-element' attribute, otherwise focus behavior won't be consistent. * - Subcomponents can affect performance, especially when used in a tree table (`isTreeTable={true}`). If you face performance issues, please try memoizing your subcomponent. */ renderRowSubComponent?: (row: RowType) => ReactNode; /** * Defines the rendering and height calculation behavior of subcomponents when `renderRowSubComponent` is used. * * - __"Expandable":__ Render subcomponents as expandable container of each row. * - __"Visible":__ Render subcomponents below each row. * - __"IncludeHeight":__ Render subcomponents below each row. The height of each initially visible subcomponent (defined by `visibleRows`) is taken into account when defining the body height of the table. * - __"IncludeHeightExpandable":__ Render subcomponents as expandable container of each row. The height of each expanded subcomponent of visible rows (defined by `visibleRows`) is taken into account when defining the body height of the table, so that the height of the table changes when a subcomponent is expanded/collapsed. (since: v1.23.0) * * @default "Expandable" * * @since 1.19.0 */ subComponentsBehavior?: AnalyticalTableSubComponentsBehavior | keyof typeof AnalyticalTableSubComponentsBehavior; /** * This callback can be used to programmatically show an indicator for navigated rows. It has no effect if `withNavigationHighlight` is not set. * * __Must be memoized!__ */ markNavigatedRow?: (row: RowType) => boolean; /** * Fired when the sorting of the rows changes. */ onSort?: (e: CustomEvent<{ column: ColumnType; sortDirection: string; }>) => void; /** * Fired when the grouping of the rows changes. */ onGroup?: (e: CustomEvent<{ column: ColumnType; groupedColumns: string[]; isGrouped: boolean; }>) => void; /** * Fired when a row is selected or unselected. */ onRowSelect?: (e: CustomEvent<{ /** * Selected row object. * * __Note:__ If the event is invoked by select-all press, this property is not available. */ row?: RowType; /** * Defines if the row is selected. * * __Note:__ If the event invoked by select-all press, this property is not available. */ isSelected?: boolean; /** * Indicates if all rows (including filtered out rows) are selected. */ allRowsSelected: boolean; /** * Indicates if all currently visible rows are selected. * * __Note:__ When the table is filtered, this reflects only the non-filtered (visible) rows. */ allVisibleRowsSelected: boolean; rowsById: Record; selectedRowIds: Record; nativeDetail: number; }>) => void; /** * Fired when a row is clicked */ onRowClick?: (e: OnRowClickEvent) => void; /** * Fired when a row is right-clicked (context menu). * * Call `e.preventDefault()` inside the callback to suppress it and show your own menu. */ onRowContextMenu?: (e: OnRowContextMenuEvent) => void; /** * Fired when a row is expanded or collapsed */ onRowExpandChange?: (e: CustomEvent<{ row: RowType; column: ColumnType; }>) => void; /** * Fired when the columns order is changed. */ onColumnsReorder?: (e: CustomEvent<{ columnsNewOrder: ColumnType[]; column: ColumnType; }>) => void; /** * Fired when the `infiniteScrollThreshold` is reached. * * __Note:__ When used in a vertically resizable table (`visibleRowCountMode: AnalyticalTableVisibleRowCountMode.Interactive`), the event is also fired if all available rows are displayed after resizing. * You can distinguish between the scroll and custom event by checking the `event.type`. * * @param {number} e.detail.rowCount - The number of rows * @param {number} e.detail.totalRowCount - The total number of rows, including sub-rows */ onLoadMore?: (e: CustomEvent<{ rowCount: number; totalRowCount: number; }>) => void; /** * Fired when the body of the table is scrolled. * * __Note:__ This callback __must be memoized__! Since it is triggered on __every scroll event__, * non-memoized or expensive calculations can have a __huge impact on performance__ and cause visible lag. * Throttling or debouncing is always recommended to reduce performance overhead. */ onTableScroll?: (e: CustomEvent<{ rows: RowType[]; rowElements: HTMLCollection; }>) => void; /** * Fired when the table is resized by double-clicking the Resizer. * * __Note:__ Auto-resize is only available on columns that have the `autoResizable` option set to `true`. */ onAutoResize?: (e: OnAutoResizeMouseEvent) => void; /** * Fired when a filter is applied to a column. */ onFilter?: (e: OnFilterParam) => void; /** * Component that will be rendered when the table is not loading and has no data. * * __Note:__ * - Although this prop accepts all React components, it is strongly recommended that you use `IllustratedMessage` with `design="Auto"` to preserve the intended design. * - For `visibleRowCountMode`s "Auto" and "AutoWithEmptyRows", the `NoDataComponent` spreads to the available space below the header row, otherwise the `minRows` prop defines the minimum height of the table body. * - To prevent overflow, ensure the table body is at least **60 px** tall when displaying an `IllustratedMessage`. * * @default DefaultNoDataComponent */ NoDataComponent?: ComponentType<{ noDataText: string; className: string; noDataReason: AnalyticalTableNoDataReason | keyof typeof AnalyticalTableNoDataReason; accessibleRole: 'gridcell'; }>; /** * Exposes the internal table instance. * This object will contain all [instance properties (react-table v7)](https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useTable.md#instance-properties) * of the `useTable` hook and all instance properties from `useColumnOrder`, `useExpanded`, `useFilters`, * `useGlobalFilter`, `useGroupBy`,`useResizeColumns`, `useRowSelect` and `useSortBy` plugin hooks. * * **Note**: Use this prop with care, some properties might have an impact on the internal `AnalyticalTable` implementation. */ tableInstance?: Ref; } interface OnFilterParam { filters: Filter[]; value: string | undefined; columnId: string | number; } interface ConfigParam { instance: TableInstance; } export interface ReactTableHooks { useOptions: any[]; stateReducers: NonNullable[]; useControlledState: any[]; columns: ((columns: ColumnType[], config: ConfigParam) => ColumnType[])[]; columnsDeps: ((deps: DependencyList, config: ConfigParam) => DependencyList)[]; allColumns: any[]; allColumnsDeps: any[]; accessValue: any[]; materializedColumns: any[]; materializedColumnsDeps: any[]; useInstanceAfterData: any[]; visibleColumns: ((columns: ColumnType[], config: ConfigParam) => ColumnType[])[]; visibleColumnsDeps: ((deps: DependencyList, config: ConfigParam) => DependencyList)[]; headerGroups: any[]; headerGroupsDeps: any[]; useInstanceBeforeDimensions: any[]; useInstance: any[]; prepareRow: any[]; getTableProps: any[]; getTableBodyProps: any[]; getHeaderGroupProps: any[]; getFooterGroupProps: any[]; getHeaderProps: any[]; getFooterProps: any[]; getRowProps: any[]; getCellProps: any[]; useFinalInstance: any[]; getToggleHiddenProps?: any[]; getToggleHideAllColumnsProps?: any[]; getGroupByToggleProps?: any[]; getSortByToggleProps?: any[]; getToggleAllRowsExpandedProps?: any[]; getToggleRowExpandedProps?: any[]; getToggleRowSelectedProps?: any[]; getToggleAllRowsSelectedProps?: any[]; getToggleAllPageRowsSelectedProps?: any[]; getResizerProps?: ((props: Record, meta: { instance: TableInstance; header: ColumnType; }) => Record | Record[])[]; } export type PluginHook = { (hooks: ReactTableHooks): void; pluginName: string; }; export interface FilterFn { (rows: RowType[], columnIds: string[], filterValue: any): RowType[]; autoRemove?: (filterValue: any, column?: any) => boolean; } export {};