@itwin/itwinui-react 3.11.3 → 3.12.0

package/esm/core/Table/Table.js

@@ -1,18 +1,65 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import {
+  jsx as _jsx,
+  jsxs as _jsxs,
+  Fragment as _Fragment,
+} from 'react/jsx-runtime';
+import { createElement as _createElement } from 'react';
 import * as React from 'react';
 import cx from 'classnames';
-import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
+import {
+  actions as TableActions,
+  useFlexLayout,
+  useFilters,
+  useRowSelect,
+  useSortBy,
+  useTable,
+  useExpanded,
+  usePagination,
+  useColumnOrder,
+  useGlobalFilter,
+} from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useLayoutEffect, Box, createWarningLogger, ShadowRoot, LineClamp, useMergedRefs, useLatestRef, } from '../../utils/index.js';
-import { TableColumnsContext, getCellStyle, getStickyStyle, getSubRowStyle, } from './utils.js';
+import {
+  useGlobals,
+  useResizeObserver,
+  SvgSortDown,
+  SvgSortUp,
+  useLayoutEffect,
+  Box,
+  createWarningLogger,
+  ShadowRoot,
+  LineClamp,
+  useMergedRefs,
+  useLatestRef,
+} from '../../utils/index.js';
+import {
+  TableColumnsContext,
+  getCellStyle,
+  getStickyStyle,
+  getSubRowStyle,
+} from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { FilterToggle } from './filters/index.js';
 import { customFilterFunctions } from './filters/customFilterFunctions.js';
-import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelection, useResizeColumns, useColumnDragAndDrop, useScrollToRow, useStickyColumns, } from './hooks/index.js';
-import { onExpandHandler, onFilterHandler, onToggleHandler, onShiftSelectHandler, onSingleSelectHandler, onTableResizeEnd, onTableResizeStart, } from './actionHandlers/index.js';
+import {
+  useExpanderCell,
+  useSelectionCell,
+  useSubRowFiltering,
+  useSubRowSelection,
+  useResizeColumns,
+  useColumnDragAndDrop,
+  useScrollToRow,
+  useStickyColumns,
+} from './hooks/index.js';
+import {
+  onExpandHandler,
+  onFilterHandler,
+  onToggleHandler,
+  onShiftSelectHandler,
+  onSingleSelectHandler,
+  onTableResizeEnd,
+  onTableResizeStart,
+} from './actionHandlers/index.js';
 import { VirtualScroll } from '../../utils/components/VirtualScroll.js';
 import { SELECTION_CELL_ID } from './columns/index.js';
 const singleRowSelectedAction = 'singleRowSelected';
@@ -20,473 +67,774 @@ const shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
 const tableResizeEndAction = 'tableResizeEnd';
 const COLUMN_MIN_WIDTHS = {
-    default: 72,
-    withExpander: 108, // expander column should be wider to accommodate the expander icon
+  default: 72,
+  withExpander: 108,
 };
 const logWarningInDev = createWarningLogger();
 const flattenColumns = (columns) => {
-    const flatColumns = [];
-    columns.forEach((column) => {
-        flatColumns.push(column);
-        if ('columns' in column) {
-            // @ts-expect-error - Since nested columns are not supported from a types perspective
-            flatColumns.push(...flattenColumns(column.columns));
-        }
-    });
-    return flatColumns;
+  const flatColumns = [];
+  columns.forEach((column) => {
+    flatColumns.push(column);
+    if ('columns' in column) {
+      flatColumns.push(...flattenColumns(column.columns));
+    }
+  });
+  return flatColumns;
 };
-/**
- * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
- * @example
- * const columns = React.useMemo(() => [
- *   {
- *     id: 'name',
- *     Header: 'Name',
- *     accessor: 'name',
- *     width: 90,
- *   },
- *   {
- *     id: 'description',
- *     Header: 'description',
- *     accessor: 'description',
- *     maxWidth: 200,
- *   },
- *   {
- *     id: 'view',
- *     Header: 'view',
- *     Cell: () => {
- *       return <span onClick={onViewClick}>View</span>
- *     },
- *   },
- * ], [onViewClick])
- * const data = [
- *  { name: 'Name1', description: 'Description1' },
- *  { name: 'Name2', description: 'Description2' },
- *  { name: 'Name3', description: 'Description3' },
- * ]
- * <Table
- *   columns={columns}
- *   data={data}
- *   emptyTableContent='No data.'
- *   isLoading={false}
- *   isSortable={true}
- * />
- */
 export const Table = (props) => {
-    const { data, columns, isLoading = false, emptyTableContent, className, style, id, isSelectable = false, onSelect, onRowClick, selectionMode = 'multi', isSortable = false, onSort, stateReducer, onBottomReached, onRowInViewport, intersectionMargin = 300, subComponent, onExpand, onFilter, globalFilterValue, emptyFilteredTableContent, filterTypes: filterFunctions, expanderCell, isRowDisabled, rowProps, density = 'default', selectSubRows = true, getSubRows, selectRowOnClick = true, paginatorRenderer, pageSize = 25, isResizable = false, columnResizeMode = 'fit', styleType = 'default', enableVirtualization = false, enableColumnReordering = false, headerWrapperProps, headerProps, bodyProps, emptyTableContentProps, ...rest } = props;
-    useGlobals();
-    const ownerDocument = React.useRef();
-    const defaultColumn = React.useMemo(() => ({
-        maxWidth: 0,
-        minWidth: 0,
-        width: 0,
-    }), []);
-    const onBottomReachedRef = useLatestRef(onBottomReached);
-    const onRowInViewportRef = useLatestRef(onRowInViewport);
-    const hasManualSelectionColumn = React.useMemo(() => {
-        const flatColumns = flattenColumns(columns);
-        return flatColumns.some((column) => column.id === SELECTION_CELL_ID);
-    }, [columns]);
-    const disableUserSelect = React.useCallback((e) => {
-        if (e.key === 'Shift') {
-            ownerDocument.current &&
-                (ownerDocument.current.documentElement.style.userSelect = 'none');
-        }
-    }, []);
-    const enableUserSelect = React.useCallback((e) => {
-        if (e.key === 'Shift') {
-            ownerDocument.current &&
-                (ownerDocument.current.documentElement.style.userSelect = '');
-        }
-    }, []);
-    React.useEffect(() => {
-        if (!isSelectable || selectionMode !== 'multi') {
-            return;
-        }
-        const ownerDoc = ownerDocument.current;
-        ownerDoc?.addEventListener('keydown', disableUserSelect);
-        ownerDoc?.addEventListener('keyup', enableUserSelect);
-        return () => {
-            ownerDoc?.removeEventListener('keydown', disableUserSelect);
-            ownerDoc?.removeEventListener('keyup', enableUserSelect);
-        };
-    }, [
-        isSelectable,
-        selectionMode,
-        ownerDocument,
-        disableUserSelect,
-        enableUserSelect,
-    ]);
-    const previousFilter = React.useRef([]);
-    const currentFilter = React.useRef(previousFilter.current);
-    const tableStateReducer = React.useCallback((newState, action, previousState, instance) => {
-        switch (action.type) {
-            case TableActions.toggleSortBy:
-                onSort?.(newState);
-                break;
-            case TableActions.setFilter:
-                currentFilter.current = onFilterHandler(newState, action, previousState, currentFilter.current, instance);
-                break;
-            case TableActions.toggleRowExpanded:
-            case TableActions.toggleAllRowsExpanded:
-                onExpandHandler(newState, instance, onExpand);
-                break;
-            case singleRowSelectedAction: {
-                newState = onSingleSelectHandler(newState, action, instance, onSelect, 
-                // If it has manual selection column, then we can't check whether row is disabled
-                hasManualSelectionColumn ? undefined : isRowDisabled);
-                break;
-            }
-            case shiftRowSelectedAction: {
-                newState = onShiftSelectHandler(newState, action, instance, onSelect, 
-                // If it has manual selection column, then we can't check whether row is disabled
-                hasManualSelectionColumn ? undefined : isRowDisabled);
-                break;
-            }
-            case TableActions.toggleRowSelected:
-            case TableActions.toggleAllRowsSelected:
-            case TableActions.toggleAllPageRowsSelected: {
-                onToggleHandler(newState, action, instance, onSelect, 
-                // If it has manual selection column, then we can't check whether row is disabled
-                hasManualSelectionColumn ? undefined : isRowDisabled);
-                break;
-            }
-            case tableResizeStartAction: {
-                newState = onTableResizeStart(newState);
-                break;
-            }
-            case tableResizeEndAction: {
-                newState = onTableResizeEnd(newState, action);
-                break;
-            }
-            default:
-                break;
-        }
-        return stateReducer
-            ? stateReducer(newState, action, previousState, instance)
-            : newState;
-    }, [
-        hasManualSelectionColumn,
-        isRowDisabled,
-        onExpand,
-        onSelect,
-        onSort,
-        stateReducer,
-    ]);
-    const filterTypes = React.useMemo(() => ({ ...customFilterFunctions, ...filterFunctions }), [filterFunctions]);
-    const hasAnySubRows = React.useMemo(() => {
-        return data.some((item, index) => getSubRows ? getSubRows(item, index) : item.subRows);
-    }, [data, getSubRows]);
-    const instance = useTable({
-        manualPagination: !paginatorRenderer,
-        paginateExpandedRows: false,
-        ...props,
-        columns,
-        defaultColumn,
-        disableSortBy: !isSortable,
-        stateReducer: tableStateReducer,
-        filterTypes,
-        selectSubRows,
-        data,
-        getSubRows,
-        initialState: { pageSize, ...props.initialState },
-        columnResizeMode,
-    }, useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, selectionMode, isRowDisabled, density), useColumnOrder, useColumnDragAndDrop(enableColumnReordering), useStickyColumns);
-    const { getTableProps, rows, headerGroups: _headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter, } = instance;
-    let headerGroups = _headerGroups;
-    if (columns.length === 1 && 'columns' in columns[0]) {
-        headerGroups = _headerGroups.slice(1);
-        logWarningInDev(`Table's \`columns\` prop should not have a top-level \`Header\` or sub-columns. They are only allowed to be passed for backwards compatibility.\n See https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes`);
+  const {
+    data,
+    columns,
+    isLoading = false,
+    emptyTableContent,
+    className,
+    style,
+    id,
+    isSelectable = false,
+    onSelect,
+    onRowClick,
+    selectionMode = 'multi',
+    isSortable = false,
+    onSort,
+    stateReducer,
+    onBottomReached,
+    onRowInViewport,
+    intersectionMargin = 300,
+    subComponent,
+    onExpand,
+    onFilter,
+    globalFilterValue,
+    emptyFilteredTableContent,
+    filterTypes: filterFunctions,
+    expanderCell,
+    isRowDisabled,
+    rowProps,
+    density = 'default',
+    selectSubRows = true,
+    getSubRows,
+    selectRowOnClick = true,
+    paginatorRenderer,
+    pageSize = 25,
+    isResizable = false,
+    columnResizeMode = 'fit',
+    styleType = 'default',
+    enableVirtualization = false,
+    enableColumnReordering = false,
+    headerWrapperProps,
+    headerProps,
+    bodyProps,
+    emptyTableContentProps,
+    ...rest
+  } = props;
+  useGlobals();
+  const ownerDocument = React.useRef();
+  const defaultColumn = React.useMemo(
+    () => ({
+      maxWidth: 0,
+      minWidth: 0,
+      width: 0,
+    }),
+    [],
+  );
+  const onBottomReachedRef = useLatestRef(onBottomReached);
+  const onRowInViewportRef = useLatestRef(onRowInViewport);
+  const hasManualSelectionColumn = React.useMemo(() => {
+    const flatColumns = flattenColumns(columns);
+    return flatColumns.some((column) => column.id === SELECTION_CELL_ID);
+  }, [columns]);
+  const disableUserSelect = React.useCallback((e) => {
+    if (e.key === 'Shift') {
+      ownerDocument.current &&
+        (ownerDocument.current.documentElement.style.userSelect = 'none');
     }
-    const ariaDataAttributes = Object.entries(rest).reduce((result, [key, value]) => {
-        if (key.startsWith('data-') || key.startsWith('aria-')) {
-            result[key] = value;
-        }
-        return result;
-    }, {});
-    const areFiltersSet = allColumns.some((column) => column.filterValue != null && column.filterValue !== '') || !!globalFilterValue;
-    const showFilterButton = (column) => (data.length !== 0 || areFiltersSet) && column.canFilter && !!column.Filter;
-    const showSortButton = (column) => data.length !== 0 && column.canSort;
-    const onRowClickHandler = React.useCallback((event, row) => {
-        const isDisabled = isRowDisabled?.(row.original);
-        const ctrlPressed = event.ctrlKey || event.metaKey;
-        if (!isDisabled) {
-            onRowClick?.(event, row);
-        }
-        if (isSelectable &&
-            !isDisabled &&
-            selectRowOnClick &&
-            !event.isDefaultPrevented()) {
-            if (selectionMode === 'multi' && event.shiftKey) {
-                dispatch({
-                    type: shiftRowSelectedAction,
-                    id: row.id,
-                    ctrlPressed: ctrlPressed,
-                });
-            }
-            else if (!row.isSelected &&
-                (selectionMode === 'single' || !ctrlPressed)) {
-                dispatch({
-                    type: singleRowSelectedAction,
-                    id: row.id,
-                });
-            }
-            else {
-                row.toggleRowSelected(!row.isSelected);
-            }
-        }
-    }, [
-        isRowDisabled,
-        isSelectable,
-        selectRowOnClick,
-        selectionMode,
-        dispatch,
-        onRowClick,
-    ]);
-    React.useEffect(() => {
-        setGlobalFilter(globalFilterValue);
-    }, [globalFilterValue, setGlobalFilter]);
-    React.useEffect(() => {
-        setPageSize(pageSize);
-    }, [pageSize, setPageSize]);
-    React.useEffect(() => {
-        if (previousFilter.current !== currentFilter.current) {
-            previousFilter.current = currentFilter.current;
-            onFilter?.(currentFilter.current, state, instance.filteredRows);
-        }
-    }, [state, instance.filteredRows, onFilter]);
-    const lastPassedColumns = React.useRef([]);
-    // Reset the column order whenever new columns are passed
-    // This is to avoid the old columnOrder from affecting the new columns' columnOrder
-    React.useEffect(() => {
-        // Check if columns have changed (by value)
-        if (lastPassedColumns.current.length > 0 &&
-            JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) {
-            instance.setColumnOrder([]);
-        }
-        lastPassedColumns.current = columns;
-    }, [columns, instance]);
-    const paginatorRendererProps = React.useMemo(() => ({
-        currentPage: state.pageIndex,
-        pageSize: state.pageSize,
-        totalRowsCount: rows.length,
-        size: density !== 'default' ? 'small' : 'default',
-        isLoading,
-        onPageChange: gotoPage,
-        onPageSizeChange: setPageSize,
-        totalSelectedRowsCount: selectionMode === 'single' ? 0 : instance.selectedFlatRows.length, // 0 when selectionMode = 'single' since totalSelectedRowCount is for multi-selection mode only
-    }), [
-        density,
-        gotoPage,
-        isLoading,
-        rows.length,
-        setPageSize,
-        state.pageIndex,
-        state.pageSize,
-        instance.selectedFlatRows,
-        selectionMode,
-    ]);
-    const tableRef = React.useRef(null);
-    const { scrollToIndex, tableRowRef } = useScrollToRow({ ...props, page });
-    const columnRefs = React.useRef({});
-    const previousTableWidth = React.useRef(0);
-    const onTableResize = React.useCallback(({ width }) => {
-        // Handle table properties, but only when table is resizable
-        if (!isResizable) {
-            return;
-        }
-        instance.tableWidth = width;
-        if (width === previousTableWidth.current) {
-            return;
+  }, []);
+  const enableUserSelect = React.useCallback((e) => {
+    if (e.key === 'Shift') {
+      ownerDocument.current &&
+        (ownerDocument.current.documentElement.style.userSelect = '');
+    }
+  }, []);
+  React.useEffect(() => {
+    if (!isSelectable || selectionMode !== 'multi') {
+      return;
+    }
+    const ownerDoc = ownerDocument.current;
+    ownerDoc?.addEventListener('keydown', disableUserSelect);
+    ownerDoc?.addEventListener('keyup', enableUserSelect);
+    return () => {
+      ownerDoc?.removeEventListener('keydown', disableUserSelect);
+      ownerDoc?.removeEventListener('keyup', enableUserSelect);
+    };
+  }, [
+    isSelectable,
+    selectionMode,
+    ownerDocument,
+    disableUserSelect,
+    enableUserSelect,
+  ]);
+  const previousFilter = React.useRef([]);
+  const currentFilter = React.useRef(previousFilter.current);
+  const tableStateReducer = React.useCallback(
+    (newState, action, previousState, instance) => {
+      switch (action.type) {
+        case TableActions.toggleSortBy:
+          onSort?.(newState);
+          break;
+        case TableActions.setFilter:
+          currentFilter.current = onFilterHandler(
+            newState,
+            action,
+            previousState,
+            currentFilter.current,
+            instance,
+          );
+          break;
+        case TableActions.toggleRowExpanded:
+        case TableActions.toggleAllRowsExpanded:
+          onExpandHandler(newState, instance, onExpand);
+          break;
+        case singleRowSelectedAction: {
+          newState = onSingleSelectHandler(
+            newState,
+            action,
+            instance,
+            onSelect,
+            hasManualSelectionColumn ? undefined : isRowDisabled,
+          );
+          break;
         }
-        previousTableWidth.current = width;
-        // Update column widths when table was resized
-        flatHeaders.forEach((header) => {
-            if (columnRefs.current[header.id]) {
-                header.resizeWidth =
-                    columnRefs.current[header.id].getBoundingClientRect().width;
-            }
-        });
-        // If no column was resized then leave table resize handling to the flexbox
-        if (Object.keys(state.columnResizing.columnWidths).length === 0) {
-            return;
+        case shiftRowSelectedAction: {
+          newState = onShiftSelectHandler(
+            newState,
+            action,
+            instance,
+            onSelect,
+            hasManualSelectionColumn ? undefined : isRowDisabled,
+          );
+          break;
         }
-        dispatch({ type: tableResizeStartAction });
-    }, [
-        dispatch,
-        state.columnResizing.columnWidths,
-        flatHeaders,
-        instance,
-        isResizable,
-    ]);
-    const [resizeRef] = useResizeObserver(onTableResize);
-    // Flexbox handles columns resize so we take new column widths before browser repaints.
-    useLayoutEffect(() => {
-        if (state.isTableResizing) {
-            const newColumnWidths = {};
-            flatHeaders.forEach((column) => {
-                if (columnRefs.current[column.id]) {
-                    newColumnWidths[column.id] =
-                        columnRefs.current[column.id].getBoundingClientRect().width;
-                }
-            });
-            dispatch({ type: tableResizeEndAction, columnWidths: newColumnWidths });
+        case TableActions.toggleRowSelected:
+        case TableActions.toggleAllRowsSelected:
+        case TableActions.toggleAllPageRowsSelected: {
+          onToggleHandler(
+            newState,
+            action,
+            instance,
+            onSelect,
+            hasManualSelectionColumn ? undefined : isRowDisabled,
+          );
+          break;
         }
-    });
-    const getPreparedRow = React.useCallback((index) => {
-        const row = page[index];
-        prepareRow(row);
-        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!isRowDisabled?.(row.original), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, scrollContainerRef: tableRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row), density: density }));
-    }, [
-        page,
-        prepareRow,
-        rowProps,
-        intersectionMargin,
-        state,
-        onRowClickHandler,
-        subComponent,
-        isRowDisabled,
-        hasAnySubRows,
-        instance,
-        expanderCell,
-        enableVirtualization,
-        tableRowRef,
-        density,
-        onBottomReachedRef,
-        onRowInViewportRef,
-    ]);
-    const virtualizedItemRenderer = React.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
-    const updateStickyState = () => {
-        if (!tableRef.current || flatHeaders.every((header) => !header.sticky)) {
-            return;
+        case tableResizeStartAction: {
+          newState = onTableResizeStart(newState);
+          break;
         }
-        if (tableRef.current.scrollLeft !== 0) {
-            dispatch({ type: TableActions.setScrolledRight, value: true });
+        case tableResizeEndAction: {
+          newState = onTableResizeEnd(newState, action);
+          break;
         }
-        else {
-            dispatch({ type: TableActions.setScrolledRight, value: false });
+        default:
+          break;
+      }
+      return stateReducer
+        ? stateReducer(newState, action, previousState, instance)
+        : newState;
+    },
+    [
+      hasManualSelectionColumn,
+      isRowDisabled,
+      onExpand,
+      onSelect,
+      onSort,
+      stateReducer,
+    ],
+  );
+  const filterTypes = React.useMemo(
+    () => ({
+      ...customFilterFunctions,
+      ...filterFunctions,
+    }),
+    [filterFunctions],
+  );
+  const hasAnySubRows = React.useMemo(() => {
+    return data.some((item, index) =>
+      getSubRows ? getSubRows(item, index) : item.subRows,
+    );
+  }, [data, getSubRows]);
+  const instance = useTable(
+    {
+      manualPagination: !paginatorRenderer,
+      paginateExpandedRows: false,
+      ...props,
+      columns,
+      defaultColumn,
+      disableSortBy: !isSortable,
+      stateReducer: tableStateReducer,
+      filterTypes,
+      selectSubRows,
+      data,
+      getSubRows,
+      initialState: {
+        pageSize,
+        ...props.initialState,
+      },
+      columnResizeMode,
+    },
+    useFlexLayout,
+    useResizeColumns(ownerDocument),
+    useFilters,
+    useSubRowFiltering(hasAnySubRows),
+    useGlobalFilter,
+    useSortBy,
+    useExpanded,
+    usePagination,
+    useRowSelect,
+    useSubRowSelection,
+    useExpanderCell(subComponent, expanderCell, isRowDisabled),
+    useSelectionCell(isSelectable, selectionMode, isRowDisabled, density),
+    useColumnOrder,
+    useColumnDragAndDrop(enableColumnReordering),
+    useStickyColumns,
+  );
+  const {
+    getTableProps,
+    rows,
+    headerGroups: _headerGroups,
+    getTableBodyProps,
+    prepareRow,
+    state,
+    allColumns,
+    dispatch,
+    page,
+    gotoPage,
+    setPageSize,
+    flatHeaders,
+    visibleColumns,
+    setGlobalFilter,
+  } = instance;
+  let headerGroups = _headerGroups;
+  if (columns.length === 1 && 'columns' in columns[0]) {
+    headerGroups = _headerGroups.slice(1);
+    logWarningInDev(
+      `Table's \`columns\` prop should not have a top-level \`Header\` or sub-columns. They are only allowed to be passed for backwards compatibility.\n See https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes`,
+    );
+  }
+  const ariaDataAttributes = Object.entries(rest).reduce(
+    (result, [key, value]) => {
+      if (key.startsWith('data-') || key.startsWith('aria-')) {
+        result[key] = value;
+      }
+      return result;
+    },
+    {},
+  );
+  const areFiltersSet =
+    allColumns.some(
+      (column) => column.filterValue != null && column.filterValue !== '',
+    ) || !!globalFilterValue;
+  const showFilterButton = (column) =>
+    (data.length !== 0 || areFiltersSet) && column.canFilter && !!column.Filter;
+  const showSortButton = (column) => data.length !== 0 && column.canSort;
+  const onRowClickHandler = React.useCallback(
+    (event, row) => {
+      const isDisabled = isRowDisabled?.(row.original);
+      const ctrlPressed = event.ctrlKey || event.metaKey;
+      if (!isDisabled) {
+        onRowClick?.(event, row);
+      }
+      if (
+        isSelectable &&
+        !isDisabled &&
+        selectRowOnClick &&
+        !event.isDefaultPrevented()
+      ) {
+        if (selectionMode === 'multi' && event.shiftKey) {
+          dispatch({
+            type: shiftRowSelectedAction,
+            id: row.id,
+            ctrlPressed: ctrlPressed,
+          });
+        } else if (
+          !row.isSelected &&
+          (selectionMode === 'single' || !ctrlPressed)
+        ) {
+          dispatch({
+            type: singleRowSelectedAction,
+            id: row.id,
+          });
+        } else {
+          row.toggleRowSelected(!row.isSelected);
         }
-        // If scrolled a bit to the left looking from the right side
-        if (tableRef.current.scrollLeft !==
-            tableRef.current.scrollWidth - tableRef.current.clientWidth) {
-            dispatch({ type: TableActions.setScrolledLeft, value: true });
+      }
+    },
+    [
+      isRowDisabled,
+      isSelectable,
+      selectRowOnClick,
+      selectionMode,
+      dispatch,
+      onRowClick,
+    ],
+  );
+  React.useEffect(() => {
+    setGlobalFilter(globalFilterValue);
+  }, [globalFilterValue, setGlobalFilter]);
+  React.useEffect(() => {
+    setPageSize(pageSize);
+  }, [pageSize, setPageSize]);
+  React.useEffect(() => {
+    if (previousFilter.current !== currentFilter.current) {
+      previousFilter.current = currentFilter.current;
+      onFilter?.(currentFilter.current, state, instance.filteredRows);
+    }
+  }, [state, instance.filteredRows, onFilter]);
+  const lastPassedColumns = React.useRef([]);
+  React.useEffect(() => {
+    if (
+      lastPassedColumns.current.length > 0 &&
+      JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)
+    ) {
+      instance.setColumnOrder([]);
+    }
+    lastPassedColumns.current = columns;
+  }, [columns, instance]);
+  const paginatorRendererProps = React.useMemo(
+    () => ({
+      currentPage: state.pageIndex,
+      pageSize: state.pageSize,
+      totalRowsCount: rows.length,
+      size: density !== 'default' ? 'small' : 'default',
+      isLoading,
+      onPageChange: gotoPage,
+      onPageSizeChange: setPageSize,
+      totalSelectedRowsCount:
+        selectionMode === 'single' ? 0 : instance.selectedFlatRows.length,
+    }),
+    [
+      density,
+      gotoPage,
+      isLoading,
+      rows.length,
+      setPageSize,
+      state.pageIndex,
+      state.pageSize,
+      instance.selectedFlatRows,
+      selectionMode,
+    ],
+  );
+  const tableRef = React.useRef(null);
+  const { scrollToIndex, tableRowRef } = useScrollToRow({
+    ...props,
+    page,
+  });
+  const columnRefs = React.useRef({});
+  const previousTableWidth = React.useRef(0);
+  const onTableResize = React.useCallback(
+    ({ width }) => {
+      if (!isResizable) {
+        return;
+      }
+      instance.tableWidth = width;
+      if (width === previousTableWidth.current) {
+        return;
+      }
+      previousTableWidth.current = width;
+      flatHeaders.forEach((header) => {
+        if (columnRefs.current[header.id]) {
+          header.resizeWidth =
+            columnRefs.current[header.id].getBoundingClientRect().width;
         }
-        else {
-            dispatch({ type: TableActions.setScrolledLeft, value: false });
+      });
+      if (Object.keys(state.columnResizing.columnWidths).length === 0) {
+        return;
+      }
+      dispatch({
+        type: tableResizeStartAction,
+      });
+    },
+    [
+      dispatch,
+      state.columnResizing.columnWidths,
+      flatHeaders,
+      instance,
+      isResizable,
+    ],
+  );
+  const [resizeRef] = useResizeObserver(onTableResize);
+  useLayoutEffect(() => {
+    if (state.isTableResizing) {
+      const newColumnWidths = {};
+      flatHeaders.forEach((column) => {
+        if (columnRefs.current[column.id]) {
+          newColumnWidths[column.id] =
+            columnRefs.current[column.id].getBoundingClientRect().width;
         }
-    };
-    React.useEffect(() => {
-        updateStickyState();
-        // Call only on init
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const isHeaderDirectClick = React.useRef(false);
-    return (React.createElement(TableColumnsContext.Provider, { value: columns },
-        React.createElement(Box, { ref: useMergedRefs(tableRef, (element) => {
-                ownerDocument.current = element?.ownerDocument;
-                resizeRef(element);
-            }), id: id, ...getTableProps({
-                className: cx('iui-table', className),
-                style: {
-                    minWidth: 0,
-                    ...style,
-                },
-            }), onScroll: () => updateStickyState(), "data-iui-size": density === 'default' ? undefined : density, ...ariaDataAttributes },
-            headerGroups.map((headerGroup) => {
-                // There may be a better solution for this, but for now I'm filtering out the placeholder cells using header.id
-                headerGroup.headers = headerGroup.headers.filter((header) => !header.id.includes('iui-table-checkbox-selector_placeholder') &&
-                    !header.id.includes('iui-table-expander_placeholder'));
-                const headerGroupProps = headerGroup.getHeaderGroupProps({
-                    className: 'iui-table-row',
-                });
-                return (React.createElement(Box, { as: 'div', key: headerGroupProps.key, ...headerWrapperProps, className: cx('iui-table-header-wrapper', headerWrapperProps?.className) },
-                    React.createElement(Box, { as: 'div', ...headerProps, className: cx('iui-table-header', headerProps?.className) },
-                        React.createElement(Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
-                            const { onClick, ...restSortProps } = column.getSortByToggleProps();
-                            const columnHasExpanders = hasAnySubRows &&
-                                index ===
-                                    headerGroup.headers.findIndex((c) => c.id !== SELECTION_CELL_ID);
-                            // override "undefined" or zero min-width with default value
-                            if ([undefined, 0].includes(column.minWidth)) {
-                                column.minWidth = columnHasExpanders
-                                    ? COLUMN_MIN_WIDTHS.withExpander
-                                    : COLUMN_MIN_WIDTHS.default;
-                            }
-                            const columnProps = column.getHeaderProps({
-                                ...restSortProps,
-                                className: cx('iui-table-cell', {
-                                    'iui-actionable': column.canSort,
-                                    'iui-sorted': column.isSorted,
-                                    'iui-table-cell-sticky': !!column.sticky,
-                                }, column.columnClassName),
-                                style: {
-                                    ...getCellStyle(column, !!state.isTableResizing),
-                                    ...(columnHasExpanders && getSubRowStyle({ density })),
-                                    ...getStickyStyle(column, visibleColumns),
-                                    flexWrap: 'wrap',
-                                    columnGap: 'var(--iui-size-xs)',
-                                },
-                            });
-                            return (React.createElement(Box, { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
-                                    if (el) {
-                                        columnRefs.current[column.id] = el;
-                                        column.resizeWidth =
-                                            el.getBoundingClientRect().width;
-                                    }
-                                }, onMouseDown: () => {
-                                    isHeaderDirectClick.current = true;
-                                }, onClick: (e) => {
-                                    // Prevents from triggering sort when resizing and mouse is released in the middle of header
-                                    if (isHeaderDirectClick.current) {
-                                        onClick?.(e);
-                                        isHeaderDirectClick.current = false;
-                                    }
-                                }, tabIndex: showSortButton(column) ? 0 : undefined, onKeyDown: (e) => {
-                                    if (e.key == 'Enter' && showSortButton(column)) {
-                                        column.toggleSortBy();
-                                    }
-                                } },
-                                React.createElement(ShadowRoot, null,
-                                    typeof column.Header === 'string' ? (React.createElement(LineClamp, null,
-                                        React.createElement("slot", null))) : (React.createElement("slot", null)),
-                                    React.createElement("slot", { name: 'actions' }),
-                                    React.createElement("slot", { name: 'resizers' }),
-                                    React.createElement("slot", { name: 'shadows' })),
-                                column.render('Header'),
-                                (showFilterButton(column) ||
-                                    showSortButton(column)) && (React.createElement(Box, { className: 'iui-table-header-actions-container', onKeyDown: (e) => e.stopPropagation(), slot: 'actions' },
-                                    showFilterButton(column) && (React.createElement(FilterToggle, { column: column })),
-                                    showSortButton(column) && (React.createElement(Box, { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
-                                        (!column.isSorted && column.sortDescFirst) ? (React.createElement(SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
-                                isResizable &&
-                                    column.isResizerVisible &&
-                                    (index !== headerGroup.headers.length - 1 ||
-                                        columnResizeMode === 'expand') && (React.createElement(Box, { ...column.getResizerProps(), className: 'iui-table-resizer', slot: 'resizers' },
-                                    React.createElement(Box, { className: 'iui-table-resizer-bar' }))),
-                                enableColumnReordering &&
-                                    !column.disableReordering && (React.createElement(Box, { className: 'iui-table-reorder-bar', slot: 'resizers' })),
-                                column.sticky === 'left' &&
-                                    state.sticky.isScrolledToRight && (React.createElement(Box, { className: 'iui-table-cell-shadow-right', slot: 'shadows' })),
-                                column.sticky === 'right' &&
-                                    state.sticky.isScrolledToLeft && (React.createElement(Box, { className: 'iui-table-cell-shadow-left', slot: 'shadows' }))));
-                        })))));
+      });
+      dispatch({
+        type: tableResizeEndAction,
+        columnWidths: newColumnWidths,
+      });
+    }
+  });
+  const getPreparedRow = React.useCallback(
+    (index) => {
+      const row = page[index];
+      prepareRow(row);
+      return _jsx(
+        TableRowMemoized,
+        {
+          row: row,
+          rowProps: rowProps,
+          isLast: index === page.length - 1,
+          onRowInViewport: onRowInViewportRef,
+          onBottomReached: onBottomReachedRef,
+          intersectionMargin: intersectionMargin,
+          state: state,
+          onClick: onRowClickHandler,
+          subComponent: subComponent,
+          isDisabled: !!isRowDisabled?.(row.original),
+          tableHasSubRows: hasAnySubRows,
+          tableInstance: instance,
+          expanderCell: expanderCell,
+          scrollContainerRef: tableRef.current,
+          tableRowRef: enableVirtualization ? undefined : tableRowRef(row),
+          density: density,
+        },
+        row.getRowProps().key,
+      );
+    },
+    [
+      page,
+      prepareRow,
+      rowProps,
+      intersectionMargin,
+      state,
+      onRowClickHandler,
+      subComponent,
+      isRowDisabled,
+      hasAnySubRows,
+      instance,
+      expanderCell,
+      enableVirtualization,
+      tableRowRef,
+      density,
+      onBottomReachedRef,
+      onRowInViewportRef,
+    ],
+  );
+  const virtualizedItemRenderer = React.useCallback(
+    (index) => getPreparedRow(index),
+    [getPreparedRow],
+  );
+  const updateStickyState = () => {
+    if (!tableRef.current || flatHeaders.every((header) => !header.sticky)) {
+      return;
+    }
+    if (tableRef.current.scrollLeft !== 0) {
+      dispatch({
+        type: TableActions.setScrolledRight,
+        value: true,
+      });
+    } else {
+      dispatch({
+        type: TableActions.setScrolledRight,
+        value: false,
+      });
+    }
+    if (
+      tableRef.current.scrollLeft !==
+      tableRef.current.scrollWidth - tableRef.current.clientWidth
+    ) {
+      dispatch({
+        type: TableActions.setScrolledLeft,
+        value: true,
+      });
+    } else {
+      dispatch({
+        type: TableActions.setScrolledLeft,
+        value: false,
+      });
+    }
+  };
+  React.useEffect(() => {
+    updateStickyState();
+  }, []);
+  const isHeaderDirectClick = React.useRef(false);
+  return _jsx(TableColumnsContext.Provider, {
+    value: columns,
+    children: _jsxs(Box, {
+      ref: useMergedRefs(tableRef, (element) => {
+        ownerDocument.current = element?.ownerDocument;
+        resizeRef(element);
+      }),
+      id: id,
+      ...getTableProps({
+        className: cx('iui-table', className),
+        style: {
+          minWidth: 0,
+          ...style,
+        },
+      }),
+      onScroll: () => updateStickyState(),
+      'data-iui-size': density === 'default' ? undefined : density,
+      ...ariaDataAttributes,
+      children: [
+        headerGroups.map((headerGroup) => {
+          headerGroup.headers = headerGroup.headers.filter(
+            (header) =>
+              !header.id.includes('iui-table-checkbox-selector_placeholder') &&
+              !header.id.includes('iui-table-expander_placeholder'),
+          );
+          const headerGroupProps = headerGroup.getHeaderGroupProps({
+            className: 'iui-table-row',
+          });
+          return _jsx(
+            Box,
+            {
+              as: 'div',
+              ...headerWrapperProps,
+              className: cx(
+                'iui-table-header-wrapper',
+                headerWrapperProps?.className,
+              ),
+              children: _jsx(Box, {
+                as: 'div',
+                ...headerProps,
+                className: cx('iui-table-header', headerProps?.className),
+                children: _jsx(Box, {
+                  ...headerGroupProps,
+                  children: headerGroup.headers.map((column, index) => {
+                    const { onClick, ...restSortProps } =
+                      column.getSortByToggleProps();
+                    const columnHasExpanders =
+                      hasAnySubRows &&
+                      index ===
+                        headerGroup.headers.findIndex(
+                          (c) => c.id !== SELECTION_CELL_ID,
+                        );
+                    if ([undefined, 0].includes(column.minWidth)) {
+                      column.minWidth = columnHasExpanders
+                        ? COLUMN_MIN_WIDTHS.withExpander
+                        : COLUMN_MIN_WIDTHS.default;
+                    }
+                    const columnProps = column.getHeaderProps({
+                      ...restSortProps,
+                      className: cx(
+                        'iui-table-cell',
+                        {
+                          'iui-actionable': column.canSort,
+                          'iui-sorted': column.isSorted,
+                          'iui-table-cell-sticky': !!column.sticky,
+                        },
+                        column.columnClassName,
+                      ),
+                      style: {
+                        ...getCellStyle(column, !!state.isTableResizing),
+                        ...(columnHasExpanders &&
+                          getSubRowStyle({
+                            density,
+                          })),
+                        ...getStickyStyle(column, visibleColumns),
+                        flexWrap: 'wrap',
+                        columnGap: 'var(--iui-size-xs)',
+                      },
+                    });
+                    return _createElement(Box, {
+                      ...columnProps,
+                      ...column.getDragAndDropProps(),
+                      key: columnProps.key,
+                      title: undefined,
+                      ref: (el) => {
+                        if (el) {
+                          columnRefs.current[column.id] = el;
+                          column.resizeWidth = el.getBoundingClientRect().width;
+                        }
+                      },
+                      onMouseDown: () => {
+                        isHeaderDirectClick.current = true;
+                      },
+                      onClick: (e) => {
+                        if (isHeaderDirectClick.current) {
+                          onClick?.(e);
+                          isHeaderDirectClick.current = false;
+                        }
+                      },
+                      tabIndex: showSortButton(column) ? 0 : undefined,
+                      onKeyDown: (e) => {
+                        if (e.key == 'Enter' && showSortButton(column)) {
+                          column.toggleSortBy();
+                        }
+                      },
+                      children: [
+                        _jsxs(ShadowRoot, {
+                          children: [
+                            typeof column.Header === 'string'
+                              ? _jsx(LineClamp, {
+                                  children: _jsx('slot', {}),
+                                })
+                              : _jsx('slot', {}),
+                            _jsx('slot', {
+                              name: 'actions',
+                            }),
+                            _jsx('slot', {
+                              name: 'resizers',
+                            }),
+                            _jsx('slot', {
+                              name: 'shadows',
+                            }),
+                          ],
+                        }),
+                        column.render('Header'),
+                        (showFilterButton(column) || showSortButton(column)) &&
+                          _jsxs(Box, {
+                            className: 'iui-table-header-actions-container',
+                            onKeyDown: (e) => e.stopPropagation(),
+                            slot: 'actions',
+                            children: [
+                              showFilterButton(column) &&
+                                _jsx(FilterToggle, {
+                                  column: column,
+                                }),
+                              showSortButton(column) &&
+                                _jsx(Box, {
+                                  className: 'iui-table-cell-end-icon',
+                                  children:
+                                    column.isSortedDesc ||
+                                    (!column.isSorted && column.sortDescFirst)
+                                      ? _jsx(SvgSortDown, {
+                                          className: 'iui-table-sort',
+                                          'aria-hidden': true,
+                                        })
+                                      : _jsx(SvgSortUp, {
+                                          className: 'iui-table-sort',
+                                          'aria-hidden': true,
+                                        }),
+                                }),
+                            ],
+                          }),
+                        isResizable &&
+                          column.isResizerVisible &&
+                          (index !== headerGroup.headers.length - 1 ||
+                            columnResizeMode === 'expand') &&
+                          _jsx(Box, {
+                            ...column.getResizerProps(),
+                            className: 'iui-table-resizer',
+                            slot: 'resizers',
+                            children: _jsx(Box, {
+                              className: 'iui-table-resizer-bar',
+                            }),
+                          }),
+                        enableColumnReordering &&
+                          !column.disableReordering &&
+                          _jsx(Box, {
+                            className: 'iui-table-reorder-bar',
+                            slot: 'resizers',
+                          }),
+                        column.sticky === 'left' &&
+                          state.sticky.isScrolledToRight &&
+                          _jsx(Box, {
+                            className: 'iui-table-cell-shadow-right',
+                            slot: 'shadows',
+                          }),
+                        column.sticky === 'right' &&
+                          state.sticky.isScrolledToLeft &&
+                          _jsx(Box, {
+                            className: 'iui-table-cell-shadow-left',
+                            slot: 'shadows',
+                          }),
+                      ],
+                    });
+                  }),
+                }),
+              }),
+            },
+            headerGroupProps.key,
+          );
+        }),
+        _jsxs(Box, {
+          as: 'div',
+          ...bodyProps,
+          ...getTableBodyProps({
+            className: cx(
+              'iui-table-body',
+              {
+                'iui-zebra-striping': styleType === 'zebra-rows',
+              },
+              bodyProps?.className,
+            ),
+            style: {
+              outline: 0,
+            },
+          }),
+          tabIndex: -1,
+          'aria-multiselectable':
+            (isSelectable && selectionMode === 'multi') || undefined,
+          children: [
+            data.length !== 0 &&
+              _jsx(_Fragment, {
+                children: enableVirtualization
+                  ? _jsx(VirtualScroll, {
+                      itemsLength: page.length,
+                      itemRenderer: virtualizedItemRenderer,
+                      scrollToIndex: scrollToIndex,
+                    })
+                  : page.map((_, index) => getPreparedRow(index)),
+              }),
+            isLoading &&
+              data.length === 0 &&
+              _jsx(Box, {
+                as: 'div',
+                ...emptyTableContentProps,
+                className: cx(
+                  'iui-table-empty',
+                  emptyTableContentProps?.className,
+                ),
+                children: _jsx(ProgressRadial, {
+                  indeterminate: true,
+                }),
+              }),
+            !isLoading &&
+              data.length === 0 &&
+              !areFiltersSet &&
+              _jsx(Box, {
+                as: 'div',
+                ...emptyTableContentProps,
+                className: cx(
+                  'iui-table-empty',
+                  emptyTableContentProps?.className,
+                ),
+                children: _jsx('div', {
+                  children: emptyTableContent,
+                }),
+              }),
+            !isLoading &&
+              (data.length === 0 || rows.length === 0) &&
+              areFiltersSet &&
+              _jsx(Box, {
+                as: 'div',
+                ...emptyTableContentProps,
+                className: cx(
+                  'iui-table-empty',
+                  emptyTableContentProps?.className,
+                ),
+                children: _jsx('div', {
+                  children: emptyFilteredTableContent,
+                }),
+              }),
+          ],
+        }),
+        isLoading &&
+          data.length !== 0 &&
+          _jsx(Box, {
+            className: 'iui-table-body-extra',
+            'data-iui-loading': 'true',
+            children: _jsx(ProgressRadial, {
+              indeterminate: true,
+              size: 'small',
             }),
-            React.createElement(Box, { as: 'div', ...bodyProps, ...getTableBodyProps({
-                    className: cx('iui-table-body', {
-                        'iui-zebra-striping': styleType === 'zebra-rows',
-                    }, bodyProps?.className),
-                    style: { outline: 0 },
-                }), tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
-                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map((_, index) => getPreparedRow(index))))),
-                isLoading && data.length === 0 && (React.createElement(Box, { as: 'div', ...emptyTableContentProps, className: cx('iui-table-empty', emptyTableContentProps?.className) },
-                    React.createElement(ProgressRadial, { indeterminate: true }))),
-                !isLoading && data.length === 0 && !areFiltersSet && (React.createElement(Box, { as: 'div', ...emptyTableContentProps, className: cx('iui-table-empty', emptyTableContentProps?.className) },
-                    React.createElement("div", null, emptyTableContent))),
-                !isLoading &&
-                    (data.length === 0 || rows.length === 0) &&
-                    areFiltersSet && (React.createElement(Box, { as: 'div', ...emptyTableContentProps, className: cx('iui-table-empty', emptyTableContentProps?.className) },
-                    React.createElement("div", null, emptyFilteredTableContent)))),
-            isLoading && data.length !== 0 && (React.createElement(Box, { className: 'iui-table-body-extra', "data-iui-loading": 'true' },
-                React.createElement(ProgressRadial, { indeterminate: true, size: 'small' }))),
-            paginatorRenderer?.(paginatorRendererProps))));
+          }),
+        paginatorRenderer?.(paginatorRendererProps),
+      ],
+    }),
+  });
 };