UI5 · Lukas742 · May 5, 2026 · May 5, 2026 · May 6, 2026 · May 6, 2026
@@ -39,14 +39,20 @@ precedence = "aggregate"
 SPDX-FileCopyrightText = "2022 Adobe Inc."
 SPDX-License-Identifier = "Apache-2.0"
 
+[[annotations]]
+path = "packages/main/src/components/AnalyticalTable/react-table/**"
+precedence = "aggregate"
+SPDX-FileCopyrightText = "2016 Tanner Linsley"
+SPDX-License-Identifier = "MIT"
+
 [[annotations]]
 path = "packages/main/src/components/AnalyticalTable/hooks/useRowSelect.ts"
 precedence = "aggregate"
-SPDX-FileCopyrightText = "2019-2021 Tanner Linsley"
+SPDX-FileCopyrightText = "2016 Tanner Linsley"
 SPDX-License-Identifier = "MIT"
 
 [[annotations]]
 path = "packages/main/src/components/AnalyticalTable/hooks/useColumnResizing.ts"
 precedence = "aggregate"
-SPDX-FileCopyrightText = "2019-2021 Tanner Linsley"
+SPDX-FileCopyrightText = "2016 Tanner Linsley"
 SPDX-License-Identifier = "MIT"
@@ -814,8 +814,7 @@
   "dependencies": {
     "@tanstack/react-virtual": "3.13.24",
     "@ui5/webcomponents-react-base": "workspace:~",
-    "clsx": "2.1.1",
-    "react-table": "7.8.0"
+    "clsx": "2.1.1"
   },
   "peerDependencies": {
     "@types/react": "*",

@@ -1,9 +1,9 @@
-import { makeRenderer } from 'react-table';
 import { AnalyticalTablePopinDisplay } from '../../../../enums/AnalyticalTablePopinDisplay.js';
 import { FlexBoxAlignItems } from '../../../../enums/FlexBoxAlignItems.js';
 import { FlexBoxDirection } from '../../../../enums/FlexBoxDirection.js';
 import { FlexBoxWrap } from '../../../../enums/FlexBoxWrap.js';
 import { FlexBox } from '../../../FlexBox/index.js';
+import { makeRenderer } from '../../react-table/index.js';
 import type { CellInstance } from '../../types/index.js';
 import { RenderColumnTypes } from '../../types/index.js';
 

@@ -1,6 +1,13 @@
 import type { MouseEvent, TouchEvent } from 'react';
 import { useCallback } from 'react';
-import { actions, defaultColumn, makePropGetter, useGetLatest, useMountedLayoutEffect } from 'react-table';
+import {
+  actions,
+  defaultColumn,
+  getFirstDefined,
+  makePropGetter,
+  useGetLatest,
+  useMountedLayoutEffect,
+} from '../react-table/index.js';
 import type { ColumnType, ReactTableHooks, TableInstance } from '../types/index.js';
 
 // Default Column
@@ -242,15 +249,6 @@ const reducer: TableInstance['stateReducer'] = (state, action) => {
   }
 };
 
-// Replaces react-table's internal `getFirstDefined` from `utils.js` (not publicly exported)
-function getFirstDefined<T>(...args: (T | undefined)[]): T | undefined {
-  for (let i = 0; i < args.length; i += 1) {
-    if (typeof args[i] !== 'undefined') {
-      return args[i];
-    }
-  }
-}
-
 const useInstanceBeforeDimensions = (instance: TableInstance) => {
   const {
     flatHeaders,

@@ -1,5 +1,5 @@
-import { ensurePluginOrder } from 'react-table';
 import { AnalyticalTableScaleWidthMode } from '../../../enums/AnalyticalTableScaleWidthMode.js';
+import { ensurePluginOrder } from '../react-table/index.js';
 import type {
   AnalyticalTableColumnDefinition,
   ColumnType,

@@ -1,6 +1,6 @@
 import type { FocusEventHandler, KeyboardEvent, KeyboardEventHandler, MutableRefObject } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
-import { actions } from 'react-table';
+import { actions } from '../react-table/index.js';
 import type { ColumnType, ReactTableHooks, TableInstance } from '../types/index.js';
 import { getLeafHeaders, NAVIGATION_KEYS } from '../util/index.js';
 

@@ -1,6 +1,12 @@
 import { useCallback, useMemo } from 'react';
-import { actions, makePropGetter, ensurePluginOrder, useGetLatest, useMountedLayoutEffect } from 'react-table';
 import { AnalyticalTableSelectionMode } from '../../../enums/AnalyticalTableSelectionMode.js';
+import {
+  actions,
+  makePropGetter,
+  ensurePluginOrder,
+  useGetLatest,
+  useMountedLayoutEffect,
+} from '../react-table/index.js';
 import type { ReactTableHooks, RowType, TableInstance } from '../types/index.js';
 
 const pluginName = 'useRowSelect';

@@ -1,7 +1,7 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/internal/utils';
 import { useEffect, useRef } from 'react';
-import { ensurePluginOrder } from 'react-table';
 import { AnalyticalTableSelectionMode } from '../../../enums/AnalyticalTableSelectionMode.js';
+import { ensurePluginOrder } from '../react-table/index.js';
 import type { AnalyticalTablePropTypes, ReactTableHooks, TableInstance } from '../types/index.js';
 
 type OnRowSelectEvent = Parameters<NonNullable<AnalyticalTablePropTypes['onRowSelect']>>[0];

@@ -14,7 +14,6 @@ import {
 import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
-import { useColumnOrder, useExpanded, useFilters, useGlobalFilter, useGroupBy, useSortBy, useTable } from 'react-table';
 import { AnalyticalTableNoDataReason } from '../../enums/AnalyticalTableNoDataReason.js';
 import { AnalyticalTablePopinDisplay } from '../../enums/AnalyticalTablePopinDisplay.js';
 import { AnalyticalTableScaleWidthMode } from '../../enums/AnalyticalTableScaleWidthMode.js';
@@ -74,6 +73,15 @@ import { useStyling } from './hooks/useStyling.js';
 import { useSyncScroll } from './hooks/useSyncScroll.js';
 import { useToggleRowExpand } from './hooks/useToggleRowExpand.js';
 import { useVisibleColumnsWidth } from './hooks/useVisibleColumnsWidth.js';
+import {
+  useColumnOrder,
+  useExpanded,
+  useFilters,
+  useGlobalFilter,
+  useGroupBy,
+  useSortBy,
+  useTable,
+} from './react-table/index.js';
 import { VerticalScrollbar } from './scrollbars/VerticalScrollbar.js';
 import { VirtualTableBody } from './TableBody/VirtualTableBody.js';
 import { VirtualTableBodyContainer } from './TableBody/VirtualTableBodyContainer.js';

@@ -2,8 +2,8 @@ import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import { AnalyticalTableSelectionBehavior } from '../../../enums/AnalyticalTableSelectionBehavior.js';
 import { AnalyticalTableSelectionMode } from '../../../enums/AnalyticalTableSelectionMode.js';
 import { CheckBox } from '../../../webComponents/CheckBox/index.js';
+import { getBy } from '../react-table/index.js';
 import type { ReactTableHooks, RowType, TableInstance } from '../types/index.js';
-import { getBy } from '../util/index.js';
 
 type DisableRowSelectionType = string | ((row: RowType) => boolean);
 

@@ -0,0 +1,69 @@
+export function sum(values: any[], aggregatedValues: number[]): number {
+  // It's faster to just add the aggregations together instead of
+  // process leaf nodes individually
+  return aggregatedValues.reduce((sum, next) => sum + (typeof next === 'number' ? next : 0), 0);
+}
+
+export function min(values: number[]): number {
+  let min = values[0] || 0;
+
+  values.forEach((value) => {
+    if (typeof value === 'number') {
+      min = Math.min(min, value);
+    }
+  });
+
+  return min;
+}
+
+export function max(values: number[]): number {
+  let max = values[0] || 0;
+
+  values.forEach((value) => {
+    if (typeof value === 'number') {
+      max = Math.max(max, value);
+    }
+  });
+
+  return max;
+}
+
+export function minMax(values: number[]): string {
+  let min = values[0] || 0;
+  let max = values[0] || 0;
+
+  values.forEach((value) => {
+    if (typeof value === 'number') {
+      min = Math.min(min, value);
+      max = Math.max(max, value);
+    }
+  });
+
+  return `${min}..${max}`;
+}
+
+export function average(values: number[]): number {
+  return sum(null, values) / values.length;
+}
+
+export function median(values: number[]): number | null {
+  if (!values.length) {
+    return null;
+  }
+
+  const mid = Math.floor(values.length / 2);
+  const nums = [...values].sort((a, b) => a - b);
+  return values.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
+}
+
+export function unique(values: any[]): any[] {
+  return Array.from(new Set(values).values());
+}
+
+export function uniqueCount(values: any[]): number {
+  return new Set(values).size;
+}
+
+export function count(values: any[]): number {
+  return values.length;
+}
@@ -0,0 +1,113 @@
+import type { RowType, FilterFn } from '../types/index.js';
+
+export const text: FilterFn = (rows: RowType[], ids: string[], filterValue: any): RowType[] => {
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return String(rowValue).toLowerCase().includes(String(filterValue).toLowerCase());
+    });
+  });
+};
+text.autoRemove = (val: any) => !val;
+
+export const exactText: FilterFn = (rows: RowType[], ids: string[], filterValue: any): RowType[] => {
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return rowValue !== undefined ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase() : true;
+    });
+  });
+};
+exactText.autoRemove = (val: any) => !val;
+
+export const exactTextCase: FilterFn = (rows: RowType[], ids: string[], filterValue: any): RowType[] => {
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return rowValue !== undefined ? String(rowValue) === String(filterValue) : true;
+    });
+  });
+};
+exactTextCase.autoRemove = (val: any) => !val;
+
+export const includes: FilterFn = (rows: RowType[], ids: string[], filterValue: any): RowType[] => {
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return rowValue.includes(filterValue);
+    });
+  });
+};
+includes.autoRemove = (val: any) => !val || !val.length;
+
+export const includesAll: FilterFn = (rows: RowType[], ids: string[], filterValue: any): RowType[] => {
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return rowValue && rowValue.length && filterValue.every((val: any) => rowValue.includes(val));
+    });
+  });
+};
+includesAll.autoRemove = (val: any) => !val || !val.length;
+
+export const includesSome: FilterFn = (rows: RowType[], ids: string[], filterValue: any): RowType[] => {
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return rowValue && rowValue.length && filterValue.some((val: any) => rowValue.includes(val));
+    });
+  });
+};
+includesSome.autoRemove = (val: any) => !val || !val.length;
+
+export const includesValue: FilterFn = (rows: RowType[], ids: string[], filterValue: any): RowType[] => {
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return filterValue.includes(rowValue);
+    });
+  });
+};
+includesValue.autoRemove = (val: any) => !val || !val.length;
+
+export const exact: FilterFn = (rows: RowType[], ids: string[], filterValue: any): RowType[] => {
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return rowValue === filterValue;
+    });
+  });
+};
+exact.autoRemove = (val: any) => typeof val === 'undefined';
+
+export const equals: FilterFn = (rows: RowType[], ids: string[], filterValue: any): RowType[] => {
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+
+      return rowValue == filterValue;
+    });
+  });
+};
+equals.autoRemove = (val: any) => val == null;
+
+export const between: FilterFn = (rows: RowType[], ids: string[], filterValue: any): RowType[] => {
+  let [min, max] = filterValue || [];
+
+  min = typeof min === 'number' ? min : -Infinity;
+  max = typeof max === 'number' ? max : Infinity;
+
+  if (min > max) {
+    const temp = min;
+    min = max;
+    max = temp;
+  }
+
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return rowValue >= min && rowValue <= max;
+    });
+  });
+};
+between.autoRemove = (val: any) => !val || (typeof val[0] !== 'number' && typeof val[1] !== 'number');