@itwin/itwinui-react 3.13.4 → 3.14.0

package/DEV-esm/core/Table/Table.js

@@ -1,516 +1,720 @@
 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, useVirtualScroll } from '../../utils/index.js';
-import { TableColumnsContext, getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
+import {
+  useGlobals,
+  useResizeObserver,
+  useLayoutEffect,
+  Box,
+  createWarningLogger,
+  ShadowRoot,
+  useMergedRefs,
+  useLatestRef,
+  useVirtualScroll,
+} from '../../utils/index.js';
+import { TableColumnsContext } 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 { SELECTION_CELL_ID } from './columns/index.js';
+import { ColumnHeader } from './ColumnHeader.js';
 let singleRowSelectedAction = 'singleRowSelected';
 let shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
 let tableResizeEndAction = 'tableResizeEnd';
-let COLUMN_MIN_WIDTHS = {
-    default: 72,
-    withExpander: 108
-};
 let logWarning = createWarningLogger();
-let flattenColumns = (columns)=>{
-    let flatColumns = [];
-    columns.forEach((column)=>{
-        flatColumns.push(column);
-        if ('columns' in column) flatColumns.push(...flattenColumns(column.columns));
-    });
-    return flatColumns;
+let flattenColumns = (columns) => {
+  let flatColumns = [];
+  columns.forEach((column) => {
+    flatColumns.push(column);
+    if ('columns' in column)
+      flatColumns.push(...flattenColumns(column.columns));
+  });
+  return flatColumns;
 };
-export const Table = (props)=>{
-    let { 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();
-    let ownerDocument = React.useRef();
-    let defaultColumn = React.useMemo(()=>({
-            maxWidth: 0,
-            minWidth: 0,
-            width: 0
-        }), []);
-    let rowHeight = React.useMemo(()=>{
-        if ('condensed' === density) return 50;
-        if ('extra-condensed' === density) return 38;
-        return 62;
-    }, [
-        density
-    ]);
-    let onBottomReachedRef = useLatestRef(onBottomReached);
-    let onRowInViewportRef = useLatestRef(onRowInViewport);
-    let hasManualSelectionColumn = React.useMemo(()=>{
-        let flatColumns = flattenColumns(columns);
-        return flatColumns.some((column)=>column.id === SELECTION_CELL_ID);
-    }, [
-        columns
-    ]);
-    let disableUserSelect = React.useCallback((e)=>{
-        if ('Shift' === e.key) ownerDocument.current && (ownerDocument.current.documentElement.style.userSelect = 'none');
-    }, []);
-    let enableUserSelect = React.useCallback((e)=>{
-        if ('Shift' === e.key) ownerDocument.current && (ownerDocument.current.documentElement.style.userSelect = '');
-    }, []);
-    React.useEffect(()=>{
-        if (!isSelectable || 'multi' !== selectionMode) return;
-        let 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
-    ]);
-    let previousFilter = React.useRef([]);
-    let currentFilter = React.useRef(previousFilter.current);
-    let 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 ? void 0 : isRowDisabled);
-                break;
-            case shiftRowSelectedAction:
-                newState = onShiftSelectHandler(newState, action, instance, onSelect, hasManualSelectionColumn ? void 0 : isRowDisabled);
-                break;
-            case TableActions.toggleRowSelected:
-            case TableActions.toggleAllRowsSelected:
-            case TableActions.toggleAllPageRowsSelected:
-                onToggleHandler(newState, action, instance, onSelect, hasManualSelectionColumn ? void 0 : 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
-    ]);
-    let filterTypes = React.useMemo(()=>({
-            ...customFilterFunctions,
-            ...filterFunctions
-        }), [
-        filterFunctions
-    ]);
-    let hasAnySubRows = React.useMemo(()=>data.some((item, index)=>getSubRows ? getSubRows(item, index) : item.subRows), [
-        data,
-        getSubRows
-    ]);
-    let 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);
-    let { getTableProps, rows, headerGroups: _headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter } = instance;
-    let headerGroups = _headerGroups;
-    if (1 === columns.length && 'columns' in columns[0]) {
-        headerGroups = _headerGroups.slice(1);
-        logWarning("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");
-    }
-    let ariaDataAttributes = Object.entries(rest).reduce((result, [key, value])=>{
-        if (key.startsWith('data-') || key.startsWith('aria-')) result[key] = value;
-        return result;
-    }, {});
-    let areFiltersSet = allColumns.some((column)=>null != column.filterValue && '' !== column.filterValue) || !!globalFilterValue;
-    let showFilterButton = (column)=>(0 !== data.length || areFiltersSet) && column.canFilter && !!column.Filter;
-    let showSortButton = (column)=>0 !== data.length && column.canSort;
-    let onRowClickHandler = React.useCallback((event, row)=>{
-        let isDisabled = isRowDisabled?.(row.original);
-        let ctrlPressed = event.ctrlKey || event.metaKey;
-        if (!isDisabled) onRowClick?.(event, row);
-        if (isSelectable && !isDisabled && selectRowOnClick && !event.isDefaultPrevented()) {
-            if ('multi' === selectionMode && event.shiftKey) dispatch({
-                type: shiftRowSelectedAction,
-                id: row.id,
-                ctrlPressed: ctrlPressed
-            });
-            else if (row.isSelected || 'single' !== selectionMode && ctrlPressed) row.toggleRowSelected(!row.isSelected);
-            else dispatch({
-                type: singleRowSelectedAction,
-                id: row.id
-            });
-        }
-    }, [
-        isRowDisabled,
-        isSelectable,
-        selectRowOnClick,
-        selectionMode,
-        dispatch,
-        onRowClick
-    ]);
-    React.useEffect(()=>{
-        setGlobalFilter(globalFilterValue);
-    }, [
-        globalFilterValue,
-        setGlobalFilter
-    ]);
-    React.useEffect(()=>{
-        setPageSize(pageSize);
-    }, [
+export const Table = (props) => {
+  let {
+    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();
+  let ownerDocument = React.useRef();
+  let defaultColumn = React.useMemo(
+    () => ({
+      maxWidth: 0,
+      minWidth: 0,
+      width: 0,
+    }),
+    [],
+  );
+  let rowHeight = React.useMemo(() => {
+    if ('condensed' === density) return 50;
+    if ('extra-condensed' === density) return 38;
+    return 62;
+  }, [density]);
+  let onBottomReachedRef = useLatestRef(onBottomReached);
+  let onRowInViewportRef = useLatestRef(onRowInViewport);
+  let hasManualSelectionColumn = React.useMemo(() => {
+    let flatColumns = flattenColumns(columns);
+    return flatColumns.some((column) => column.id === SELECTION_CELL_ID);
+  }, [columns]);
+  let disableUserSelect = React.useCallback((e) => {
+    if ('Shift' === e.key)
+      ownerDocument.current &&
+        (ownerDocument.current.documentElement.style.userSelect = 'none');
+  }, []);
+  let enableUserSelect = React.useCallback((e) => {
+    if ('Shift' === e.key)
+      ownerDocument.current &&
+        (ownerDocument.current.documentElement.style.userSelect = '');
+  }, []);
+  React.useEffect(() => {
+    if (!isSelectable || 'multi' !== selectionMode) return;
+    let 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,
+  ]);
+  let previousFilter = React.useRef([]);
+  let currentFilter = React.useRef(previousFilter.current);
+  let 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 ? void 0 : isRowDisabled,
+          );
+          break;
+        case shiftRowSelectedAction:
+          newState = onShiftSelectHandler(
+            newState,
+            action,
+            instance,
+            onSelect,
+            hasManualSelectionColumn ? void 0 : isRowDisabled,
+          );
+          break;
+        case TableActions.toggleRowSelected:
+        case TableActions.toggleAllRowsSelected:
+        case TableActions.toggleAllPageRowsSelected:
+          onToggleHandler(
+            newState,
+            action,
+            instance,
+            onSelect,
+            hasManualSelectionColumn ? void 0 : 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,
+    ],
+  );
+  let filterTypes = React.useMemo(
+    () => ({
+      ...customFilterFunctions,
+      ...filterFunctions,
+    }),
+    [filterFunctions],
+  );
+  let hasAnySubRows = React.useMemo(
+    () =>
+      data.some((item, index) =>
+        getSubRows ? getSubRows(item, index) : item.subRows,
+      ),
+    [data, getSubRows],
+  );
+  let instance = useTable(
+    {
+      manualPagination: !paginatorRenderer,
+      paginateExpandedRows: false,
+      ...props,
+      columns,
+      defaultColumn,
+      disableSortBy: !isSortable,
+      stateReducer: tableStateReducer,
+      filterTypes,
+      selectSubRows,
+      data,
+      getSubRows,
+      initialState: {
         pageSize,
-        setPageSize
-    ]);
-    React.useEffect(()=>{
-        if (previousFilter.current !== currentFilter.current) {
-            previousFilter.current = currentFilter.current;
-            onFilter?.(currentFilter.current, state, instance.filteredRows);
-        }
-    }, [
-        state,
-        instance.filteredRows,
-        onFilter
-    ]);
-    let lastPassedColumns = React.useRef([]);
-    React.useEffect(()=>{
-        if (lastPassedColumns.current.length > 0 && JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) instance.setColumnOrder([]);
-        lastPassedColumns.current = columns;
-    }, [
-        columns,
-        instance
-    ]);
-    let paginatorRendererProps = React.useMemo(()=>({
-            currentPage: state.pageIndex,
-            pageSize: state.pageSize,
-            totalRowsCount: rows.length,
-            size: 'default' !== density ? 'small' : 'default',
-            isLoading,
-            onPageChange: gotoPage,
-            onPageSizeChange: setPageSize,
-            totalSelectedRowsCount: 'single' === selectionMode ? 0 : instance.selectedFlatRows.length
-        }), [
-        density,
-        gotoPage,
-        isLoading,
-        rows.length,
-        setPageSize,
-        state.pageIndex,
-        state.pageSize,
-        instance.selectedFlatRows,
-        selectionMode
-    ]);
-    let tableRef = React.useRef(null);
-    let { scrollToIndex, tableRowRef } = useScrollToRow({
-        ...props,
-        page
-    });
-    let columnRefs = React.useRef({});
-    let previousTableWidth = React.useRef(0);
-    let 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;
-        });
-        if (0 === Object.keys(state.columnResizing.columnWidths).length) return;
-        dispatch({
-            type: tableResizeStartAction
-        });
-    }, [
-        dispatch,
-        state.columnResizing.columnWidths,
-        flatHeaders,
-        instance,
-        isResizable
-    ]);
-    let [resizeRef] = useResizeObserver(onTableResize);
-    useLayoutEffect(()=>{
-        if (state.isTableResizing) {
-            let newColumnWidths = {};
-            flatHeaders.forEach((column)=>{
-                if (columnRefs.current[column.id]) newColumnWidths[column.id] = columnRefs.current[column.id].getBoundingClientRect().width;
-            });
-            dispatch({
-                type: tableResizeEndAction,
-                columnWidths: newColumnWidths
-            });
-        }
-    });
-    let { virtualizer, css: virtualizerCss } = useVirtualScroll({
-        enabled: enableVirtualization,
-        count: page.length,
-        getScrollElement: ()=>tableRef.current,
-        estimateSize: ()=>rowHeight,
-        getItemKey: (index)=>page[index].id,
-        overscan: 1
-    });
-    useLayoutEffect(()=>{
-        if (scrollToIndex) virtualizer.scrollToIndex(scrollToIndex, {
-            align: 'center'
-        });
-    }, [
-        virtualizer,
-        scrollToIndex
-    ]);
-    let getPreparedRow = React.useCallback((index, virtualItem, virtualizer)=>{
-        let 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 ? void 0 : tableRowRef(row),
-            density: density,
-            virtualItem: virtualItem,
-            virtualizer: virtualizer
-        });
-    }, [
-        page,
-        prepareRow,
-        rowProps,
-        intersectionMargin,
-        state,
-        onRowClickHandler,
-        subComponent,
-        isRowDisabled,
-        hasAnySubRows,
-        instance,
-        expanderCell,
-        enableVirtualization,
-        tableRowRef,
-        density,
-        onBottomReachedRef,
-        onRowInViewportRef
-    ]);
-    let updateStickyState = ()=>{
-        if (!tableRef.current || flatHeaders.every((header)=>!header.sticky)) return;
-        0 !== tableRef.current.scrollLeft ? dispatch({
-            type: TableActions.setScrolledRight,
-            value: true
-        }) : dispatch({
-            type: TableActions.setScrolledRight,
-            value: false
+        ...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,
+  );
+  let {
+    getTableProps,
+    rows,
+    headerGroups: _headerGroups,
+    getTableBodyProps,
+    prepareRow,
+    state,
+    allColumns,
+    dispatch,
+    page,
+    gotoPage,
+    setPageSize,
+    flatHeaders,
+    visibleColumns,
+    setGlobalFilter,
+  } = instance;
+  let headerGroups = _headerGroups;
+  if (1 === columns.length && 'columns' in columns[0]) {
+    headerGroups = _headerGroups.slice(1);
+    logWarning(
+      "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",
+    );
+  }
+  let ariaDataAttributes = Object.entries(rest).reduce(
+    (result, [key, value]) => {
+      if (key.startsWith('data-') || key.startsWith('aria-'))
+        result[key] = value;
+      return result;
+    },
+    {},
+  );
+  let areFiltersSet =
+    allColumns.some(
+      (column) => null != column.filterValue && '' !== column.filterValue,
+    ) || !!globalFilterValue;
+  let onRowClickHandler = React.useCallback(
+    (event, row) => {
+      let isDisabled = isRowDisabled?.(row.original);
+      let ctrlPressed = event.ctrlKey || event.metaKey;
+      if (!isDisabled) onRowClick?.(event, row);
+      if (
+        isSelectable &&
+        !isDisabled &&
+        selectRowOnClick &&
+        !event.isDefaultPrevented()
+      ) {
+        if ('multi' === selectionMode && event.shiftKey)
+          dispatch({
+            type: shiftRowSelectedAction,
+            id: row.id,
+            ctrlPressed: ctrlPressed,
+          });
+        else if (row.isSelected || ('single' !== selectionMode && ctrlPressed))
+          row.toggleRowSelected(!row.isSelected);
+        else
+          dispatch({
+            type: singleRowSelectedAction,
+            id: row.id,
+          });
+      }
+    },
+    [
+      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]);
+  let lastPassedColumns = React.useRef([]);
+  React.useEffect(() => {
+    if (
+      lastPassedColumns.current.length > 0 &&
+      JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)
+    )
+      instance.setColumnOrder([]);
+    lastPassedColumns.current = columns;
+  }, [columns, instance]);
+  let paginatorRendererProps = React.useMemo(
+    () => ({
+      currentPage: state.pageIndex,
+      pageSize: state.pageSize,
+      totalRowsCount: rows.length,
+      size: 'default' !== density ? 'small' : 'default',
+      isLoading,
+      onPageChange: gotoPage,
+      onPageSizeChange: setPageSize,
+      totalSelectedRowsCount:
+        'single' === selectionMode ? 0 : instance.selectedFlatRows.length,
+    }),
+    [
+      density,
+      gotoPage,
+      isLoading,
+      rows.length,
+      setPageSize,
+      state.pageIndex,
+      state.pageSize,
+      instance.selectedFlatRows,
+      selectionMode,
+    ],
+  );
+  let tableRef = React.useRef(null);
+  let { scrollToIndex, tableRowRef } = useScrollToRow({
+    ...props,
+    page,
+  });
+  let columnRefs = React.useRef({});
+  let previousTableWidth = React.useRef(0);
+  let 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;
+      });
+      if (0 === Object.keys(state.columnResizing.columnWidths).length) return;
+      dispatch({
+        type: tableResizeStartAction,
+      });
+    },
+    [
+      dispatch,
+      state.columnResizing.columnWidths,
+      flatHeaders,
+      instance,
+      isResizable,
+    ],
+  );
+  let [resizeRef] = useResizeObserver(onTableResize);
+  useLayoutEffect(() => {
+    if (state.isTableResizing) {
+      let newColumnWidths = {};
+      flatHeaders.forEach((column) => {
+        if (columnRefs.current[column.id])
+          newColumnWidths[column.id] =
+            columnRefs.current[column.id].getBoundingClientRect().width;
+      });
+      dispatch({
+        type: tableResizeEndAction,
+        columnWidths: newColumnWidths,
+      });
+    }
+  });
+  let { virtualizer, css: virtualizerCss } = useVirtualScroll({
+    enabled: enableVirtualization,
+    count: page.length,
+    getScrollElement: () => tableRef.current,
+    estimateSize: () => rowHeight,
+    getItemKey: (index) => page[index].id,
+    overscan: 1,
+  });
+  useLayoutEffect(() => {
+    if (scrollToIndex)
+      virtualizer.scrollToIndex(scrollToIndex, {
+        align: 'center',
+      });
+  }, [virtualizer, scrollToIndex]);
+  let getPreparedRow = React.useCallback(
+    (index, virtualItem, virtualizer) => {
+      let 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 ? void 0 : tableRowRef(row),
+        density: density,
+        virtualItem: virtualItem,
+        virtualizer: virtualizer,
+      });
+    },
+    [
+      page,
+      prepareRow,
+      rowProps,
+      intersectionMargin,
+      state,
+      onRowClickHandler,
+      subComponent,
+      isRowDisabled,
+      hasAnySubRows,
+      instance,
+      expanderCell,
+      enableVirtualization,
+      tableRowRef,
+      density,
+      onBottomReachedRef,
+      onRowInViewportRef,
+    ],
+  );
+  let updateStickyState = () => {
+    if (!tableRef.current || flatHeaders.every((header) => !header.sticky))
+      return;
+    0 !== tableRef.current.scrollLeft
+      ? dispatch({
+          type: TableActions.setScrolledRight,
+          value: true,
+        })
+      : dispatch({
+          type: TableActions.setScrolledRight,
+          value: false,
         });
-        tableRef.current.scrollLeft !== tableRef.current.scrollWidth - tableRef.current.clientWidth ? dispatch({
-            type: TableActions.setScrolledLeft,
-            value: true
-        }) : dispatch({
-            type: TableActions.setScrolledLeft,
-            value: false
+    tableRef.current.scrollLeft !==
+    tableRef.current.scrollWidth - tableRef.current.clientWidth
+      ? dispatch({
+          type: TableActions.setScrolledLeft,
+          value: true,
+        })
+      : dispatch({
+          type: TableActions.setScrolledLeft,
+          value: false,
         });
-    };
-    React.useEffect(()=>{
-        updateStickyState();
-    }, []);
-    let isHeaderDirectClick = React.useRef(false);
-    let columnResizeRef = React.useCallback((el, column)=>{
-        if (el) {
-            columnRefs.current[column.id] = el;
-            column.resizeWidth = el.getBoundingClientRect().width;
-        }
-    }, []);
-    return React.createElement(TableColumnsContext.Provider, {
-        value: columns
-    }, React.createElement(Box, {
-        ref: useMergedRefs(tableRef, resizeRef, React.useCallback((element)=>{
+  };
+  React.useEffect(() => {
+    updateStickyState();
+  }, []);
+  return React.createElement(
+    TableColumnsContext.Provider,
+    {
+      value: columns,
+    },
+    React.createElement(
+      Box,
+      {
+        ref: useMergedRefs(
+          tableRef,
+          resizeRef,
+          React.useCallback((element) => {
             ownerDocument.current = element?.ownerDocument;
-        }, [])),
+          }, []),
+        ),
         id: id,
         ...getTableProps({
-            className: cx('iui-table', className),
-            style: {
-                minWidth: 0,
-                ...style
-            }
+          className: cx('iui-table', className),
+          style: {
+            minWidth: 0,
+            ...style,
+          },
         }),
-        onScroll: ()=>updateStickyState(),
-        "data-iui-size": 'default' === density ? void 0 : density,
-        ...ariaDataAttributes
-    }, headerGroups.map((headerGroup)=>{
-        headerGroup.headers = headerGroup.headers.filter((header)=>!header.id.includes('iui-table-checkbox-selector_placeholder') && !header.id.includes('iui-table-expander_placeholder'));
+        onScroll: () => updateStickyState(),
+        'data-iui-size': 'default' === density ? void 0 : density,
+        ...ariaDataAttributes,
+      },
+      headerGroups.map((headerGroup) => {
+        headerGroup.headers = headerGroup.headers.filter(
+          (header) =>
+            !header.id.includes('iui-table-checkbox-selector_placeholder') &&
+            !header.id.includes('iui-table-expander_placeholder'),
+        );
         let headerGroupProps = headerGroup.getHeaderGroupProps({
-            className: 'iui-table-row'
+          className: 'iui-table-row',
         });
-        return React.createElement(Box, {
-            as: "div",
+        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)=>{
-            let { onClick, ...restSortProps } = column.getSortByToggleProps();
-            let columnHasExpanders = hasAnySubRows && index === headerGroup.headers.findIndex((c)=>c.id !== SELECTION_CELL_ID);
-            if ([
-                void 0,
-                0
-            ].includes(column.minWidth)) {
-                column.minWidth = columnHasExpanders ? COLUMN_MIN_WIDTHS.withExpander : COLUMN_MIN_WIDTHS.default;
-                if ('number' == typeof column.width && column.minWidth > column.width) column.minWidth = column.width;
-            }
-            let 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: void 0,
-                ref: (el)=>{
-                    columnResizeRef(el, column);
-                },
-                onMouseDown: ()=>{
-                    isHeaderDirectClick.current = true;
-                },
-                onClick: (e)=>{
-                    if (isHeaderDirectClick.current) {
-                        onClick?.(e);
-                        isHeaderDirectClick.current = false;
-                    }
-                },
-                tabIndex: showSortButton(column) ? 0 : void 0,
-                onKeyDown: (e)=>{
-                    if ('Enter' == e.key && showSortButton(column)) column.toggleSortBy();
-                }
-            }, React.createElement(React.Fragment, null, React.createElement(ShadowRoot, null, 'string' == typeof column.Header ? 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 || 'expand' === columnResizeMode) && 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"
-            }), 'left' === column.sticky && state.sticky.isScrolledToRight && React.createElement(Box, {
-                className: "iui-table-cell-shadow-right",
-                slot: "shadows"
-            }), 'right' === column.sticky && state.sticky.isScrolledToLeft && React.createElement(Box, {
-                className: "iui-table-cell-shadow-left",
-                slot: "shadows"
-            })));
-        }))));
-    }), React.createElement(Box, {
-        as: "div",
-        ...bodyProps,
-        ...getTableBodyProps({
-            className: cx('iui-table-body', {
-                'iui-zebra-striping': 'zebra-rows' === styleType
-            }, bodyProps?.className),
+            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) => {
+                let dragAndDropProps = column.getDragAndDropProps();
+                return React.createElement(ColumnHeader, {
+                  ...dragAndDropProps,
+                  key: dragAndDropProps.key,
+                  columnRefs: columnRefs,
+                  column: column,
+                  index: index,
+                  areFiltersSet: areFiltersSet,
+                  hasAnySubRows: hasAnySubRows,
+                  headers: headerGroup.headers,
+                  state: state,
+                  data: data,
+                  isResizable: isResizable,
+                  columnResizeMode: columnResizeMode,
+                  enableColumnReordering: enableColumnReordering,
+                  density: density,
+                  visibleColumns: visibleColumns,
+                });
+              }),
+            ),
+          ),
+        );
+      }),
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...bodyProps,
+          ...getTableBodyProps({
+            className: cx(
+              'iui-table-body',
+              {
+                'iui-zebra-striping': 'zebra-rows' === styleType,
+              },
+              bodyProps?.className,
+            ),
             style: {
-                outline: 0
-            }
-        }),
-        tabIndex: -1,
-        "aria-multiselectable": isSelectable && 'multi' === selectionMode || void 0
-    }, React.createElement(ShadowRoot, {
-        css: virtualizerCss
-    }, enableVirtualization && 0 !== data.length ? React.createElement("div", {
-        "data-iui-virtualizer": "root",
-        style: {
-            minBlockSize: virtualizer.getTotalSize()
-        }
-    }, React.createElement("slot", null)) : React.createElement("slot", null)), 0 !== data.length && React.createElement(React.Fragment, null, enableVirtualization ? virtualizer.getVirtualItems().map((virtualItem)=>getPreparedRow(virtualItem.index, virtualItem, virtualizer)) : page.map((_, index)=>getPreparedRow(index))), isLoading && 0 === data.length && React.createElement(Box, {
-        as: "div",
-        ...emptyTableContentProps,
-        className: cx('iui-table-empty', emptyTableContentProps?.className)
-    }, React.createElement(ProgressRadial, {
-        indeterminate: true
-    })), !isLoading && 0 === data.length && !areFiltersSet && React.createElement(Box, {
-        as: "div",
-        ...emptyTableContentProps,
-        className: cx('iui-table-empty', emptyTableContentProps?.className)
-    }, React.createElement("div", null, emptyTableContent)), !isLoading && (0 === data.length || 0 === rows.length) && areFiltersSet && React.createElement(Box, {
-        as: "div",
-        ...emptyTableContentProps,
-        className: cx('iui-table-empty', emptyTableContentProps?.className)
-    }, React.createElement("div", null, emptyFilteredTableContent))), isLoading && 0 !== data.length && React.createElement(Box, {
-        className: "iui-table-body-extra",
-        "data-iui-loading": "true"
-    }, React.createElement(ProgressRadial, {
-        indeterminate: true,
-        size: "small"
-    })), paginatorRenderer?.(paginatorRendererProps)));
+              outline: 0,
+            },
+          }),
+          tabIndex: -1,
+          'aria-multiselectable':
+            (isSelectable && 'multi' === selectionMode) || void 0,
+        },
+        React.createElement(
+          ShadowRoot,
+          {
+            css: virtualizerCss,
+          },
+          enableVirtualization && 0 !== data.length
+            ? React.createElement(
+                'div',
+                {
+                  'data-iui-virtualizer': 'root',
+                  style: {
+                    minBlockSize: virtualizer.getTotalSize(),
+                  },
+                },
+                React.createElement('slot', null),
+              )
+            : React.createElement('slot', null),
+        ),
+        0 !== data.length &&
+          React.createElement(
+            React.Fragment,
+            null,
+            enableVirtualization
+              ? virtualizer
+                  .getVirtualItems()
+                  .map((virtualItem) =>
+                    getPreparedRow(virtualItem.index, virtualItem, virtualizer),
+                  )
+              : page.map((_, index) => getPreparedRow(index)),
+          ),
+        isLoading &&
+          0 === data.length &&
+          React.createElement(
+            Box,
+            {
+              as: 'div',
+              ...emptyTableContentProps,
+              className: cx(
+                'iui-table-empty',
+                emptyTableContentProps?.className,
+              ),
+            },
+            React.createElement(ProgressRadial, {
+              indeterminate: true,
+            }),
+          ),
+        !isLoading &&
+          0 === data.length &&
+          !areFiltersSet &&
+          React.createElement(
+            Box,
+            {
+              as: 'div',
+              ...emptyTableContentProps,
+              className: cx(
+                'iui-table-empty',
+                emptyTableContentProps?.className,
+              ),
+            },
+            React.createElement('div', null, emptyTableContent),
+          ),
+        !isLoading &&
+          (0 === data.length || 0 === rows.length) &&
+          areFiltersSet &&
+          React.createElement(
+            Box,
+            {
+              as: 'div',
+              ...emptyTableContentProps,
+              className: cx(
+                'iui-table-empty',
+                emptyTableContentProps?.className,
+              ),
+            },
+            React.createElement('div', null, emptyFilteredTableContent),
+          ),
+      ),
+      isLoading &&
+        0 !== data.length &&
+        React.createElement(
+          Box,
+          {
+            className: 'iui-table-body-extra',
+            'data-iui-loading': 'true',
+          },
+          React.createElement(ProgressRadial, {
+            indeterminate: true,
+            size: 'small',
+          }),
+        ),
+      paginatorRenderer?.(paginatorRendererProps),
+    ),
+  );
 };
 Table.displayName = 'Table';