@itwin/itwinui-react 3.13.4 → 3.14.0

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

@@ -1,536 +1,713 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
 function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
     });
 }
 _export(exports, {
-    Table: function() {
-        return Table;
-    },
-    tableResizeStartAction: function() {
-        return tableResizeStartAction;
-    }
+  Table: function () {
+    return Table;
+  },
+  tableResizeStartAction: function () {
+    return tableResizeStartAction;
+  },
 });
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _classnames = _interop_require_default._(require("classnames"));
-const _reacttable = require("react-table");
-const _ProgressRadial = require("../ProgressIndicators/ProgressRadial.js");
-const _index = require("../../utils/index.js");
-const _utils = require("./utils.js");
-const _TableRowMemoized = require("./TableRowMemoized.js");
-const _index1 = require("./filters/index.js");
-const _customFilterFunctions = require("./filters/customFilterFunctions.js");
-const _index2 = require("./hooks/index.js");
-const _index3 = require("./actionHandlers/index.js");
-const _index4 = require("./columns/index.js");
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _reacttable = require('react-table');
+const _ProgressRadial = require('../ProgressIndicators/ProgressRadial.js');
+const _index = require('../../utils/index.js');
+const _utils = require('./utils.js');
+const _TableRowMemoized = require('./TableRowMemoized.js');
+const _customFilterFunctions = require('./filters/customFilterFunctions.js');
+const _index1 = require('./hooks/index.js');
+const _index2 = require('./actionHandlers/index.js');
+const _index3 = require('./columns/index.js');
+const _ColumnHeader = require('./ColumnHeader.js');
 const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 const tableResizeStartAction = 'tableResizeStart';
 const tableResizeEndAction = 'tableResizeEnd';
-const COLUMN_MIN_WIDTHS = {
-    default: 72,
-    withExpander: 108
-};
 const logWarning = (0, _index.createWarningLogger)();
-const flattenColumns = (columns)=>{
-    let flatColumns = [];
-    columns.forEach((column)=>{
-        flatColumns.push(column);
-        if ('columns' in column) flatColumns.push(...flattenColumns(column.columns));
-    });
-    return flatColumns;
+const flattenColumns = (columns) => {
+  let flatColumns = [];
+  columns.forEach((column) => {
+    flatColumns.push(column);
+    if ('columns' in column)
+      flatColumns.push(...flattenColumns(column.columns));
+  });
+  return flatColumns;
 };
-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;
-    (0, _index.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 = (0, _index.useLatestRef)(onBottomReached);
-    let onRowInViewportRef = (0, _index.useLatestRef)(onRowInViewport);
-    let hasManualSelectionColumn = _react.useMemo(()=>{
-        let flatColumns = flattenColumns(columns);
-        return flatColumns.some((column)=>column.id === _index4.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 _reacttable.actions.toggleSortBy:
-                onSort?.(newState);
-                break;
-            case _reacttable.actions.setFilter:
-                currentFilter.current = (0, _index3.onFilterHandler)(newState, action, previousState, currentFilter.current, instance);
-                break;
-            case _reacttable.actions.toggleRowExpanded:
-            case _reacttable.actions.toggleAllRowsExpanded:
-                (0, _index3.onExpandHandler)(newState, instance, onExpand);
-                break;
-            case singleRowSelectedAction:
-                newState = (0, _index3.onSingleSelectHandler)(newState, action, instance, onSelect, hasManualSelectionColumn ? void 0 : isRowDisabled);
-                break;
-            case shiftRowSelectedAction:
-                newState = (0, _index3.onShiftSelectHandler)(newState, action, instance, onSelect, hasManualSelectionColumn ? void 0 : isRowDisabled);
-                break;
-            case _reacttable.actions.toggleRowSelected:
-            case _reacttable.actions.toggleAllRowsSelected:
-            case _reacttable.actions.toggleAllPageRowsSelected:
-                (0, _index3.onToggleHandler)(newState, action, instance, onSelect, hasManualSelectionColumn ? void 0 : isRowDisabled);
-                break;
-            case tableResizeStartAction:
-                newState = (0, _index3.onTableResizeStart)(newState);
-                break;
-            case tableResizeEndAction:
-                newState = (0, _index3.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.customFilterFunctions,
-            ...filterFunctions
-        }), [
-        filterFunctions
-    ]);
-    let hasAnySubRows = _react.useMemo(()=>data.some((item, index)=>getSubRows ? getSubRows(item, index) : item.subRows), [
-        data,
-        getSubRows
-    ]);
-    let instance = (0, _reacttable.useTable)({
-        manualPagination: !paginatorRenderer,
-        paginateExpandedRows: false,
-        ...props,
-        columns,
-        defaultColumn,
-        disableSortBy: !isSortable,
-        stateReducer: tableStateReducer,
-        filterTypes,
-        selectSubRows,
-        data,
-        getSubRows,
-        initialState: {
-            pageSize,
-            ...props.initialState
-        },
-        columnResizeMode
-    }, _reacttable.useFlexLayout, (0, _index2.useResizeColumns)(ownerDocument), _reacttable.useFilters, (0, _index2.useSubRowFiltering)(hasAnySubRows), _reacttable.useGlobalFilter, _reacttable.useSortBy, _reacttable.useExpanded, _reacttable.usePagination, _reacttable.useRowSelect, _index2.useSubRowSelection, (0, _index2.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, _index2.useSelectionCell)(isSelectable, selectionMode, isRowDisabled, density), _reacttable.useColumnOrder, (0, _index2.useColumnDragAndDrop)(enableColumnReordering), _index2.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);
-    }, [
+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;
+  (0, _index.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 = (0, _index.useLatestRef)(onBottomReached);
+  let onRowInViewportRef = (0, _index.useLatestRef)(onRowInViewport);
+  let hasManualSelectionColumn = _react.useMemo(() => {
+    let flatColumns = flattenColumns(columns);
+    return flatColumns.some(
+      (column) => column.id === _index3.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 _reacttable.actions.toggleSortBy:
+          onSort?.(newState);
+          break;
+        case _reacttable.actions.setFilter:
+          currentFilter.current = (0, _index2.onFilterHandler)(
+            newState,
+            action,
+            previousState,
+            currentFilter.current,
+            instance,
+          );
+          break;
+        case _reacttable.actions.toggleRowExpanded:
+        case _reacttable.actions.toggleAllRowsExpanded:
+          (0, _index2.onExpandHandler)(newState, instance, onExpand);
+          break;
+        case singleRowSelectedAction:
+          newState = (0, _index2.onSingleSelectHandler)(
+            newState,
+            action,
+            instance,
+            onSelect,
+            hasManualSelectionColumn ? void 0 : isRowDisabled,
+          );
+          break;
+        case shiftRowSelectedAction:
+          newState = (0, _index2.onShiftSelectHandler)(
+            newState,
+            action,
+            instance,
+            onSelect,
+            hasManualSelectionColumn ? void 0 : isRowDisabled,
+          );
+          break;
+        case _reacttable.actions.toggleRowSelected:
+        case _reacttable.actions.toggleAllRowsSelected:
+        case _reacttable.actions.toggleAllPageRowsSelected:
+          (0, _index2.onToggleHandler)(
+            newState,
+            action,
+            instance,
+            onSelect,
+            hasManualSelectionColumn ? void 0 : isRowDisabled,
+          );
+          break;
+        case tableResizeStartAction:
+          newState = (0, _index2.onTableResizeStart)(newState);
+          break;
+        case tableResizeEndAction:
+          newState = (0, _index2.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.customFilterFunctions,
+      ...filterFunctions,
+    }),
+    [filterFunctions],
+  );
+  let hasAnySubRows = _react.useMemo(
+    () =>
+      data.some((item, index) =>
+        getSubRows ? getSubRows(item, index) : item.subRows,
+      ),
+    [data, getSubRows],
+  );
+  let instance = (0, _reacttable.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 } = (0, _index2.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] = (0, _index.useResizeObserver)(onTableResize);
-    (0, _index.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 } = (0, _index.useVirtualScroll)({
-        enabled: enableVirtualization,
-        count: page.length,
-        getScrollElement: ()=>tableRef.current,
-        estimateSize: ()=>rowHeight,
-        getItemKey: (index)=>page[index].id,
-        overscan: 1
-    });
-    (0, _index.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.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: _reacttable.actions.setScrolledRight,
-            value: true
-        }) : dispatch({
-            type: _reacttable.actions.setScrolledRight,
-            value: false
+        ...props.initialState,
+      },
+      columnResizeMode,
+    },
+    _reacttable.useFlexLayout,
+    (0, _index1.useResizeColumns)(ownerDocument),
+    _reacttable.useFilters,
+    (0, _index1.useSubRowFiltering)(hasAnySubRows),
+    _reacttable.useGlobalFilter,
+    _reacttable.useSortBy,
+    _reacttable.useExpanded,
+    _reacttable.usePagination,
+    _reacttable.useRowSelect,
+    _index1.useSubRowSelection,
+    (0, _index1.useExpanderCell)(subComponent, expanderCell, isRowDisabled),
+    (0, _index1.useSelectionCell)(
+      isSelectable,
+      selectionMode,
+      isRowDisabled,
+      density,
+    ),
+    _reacttable.useColumnOrder,
+    (0, _index1.useColumnDragAndDrop)(enableColumnReordering),
+    _index1.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 } = (0, _index1.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] = (0, _index.useResizeObserver)(onTableResize);
+  (0, _index.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 } = (0, _index.useVirtualScroll)({
+    enabled: enableVirtualization,
+    count: page.length,
+    getScrollElement: () => tableRef.current,
+    estimateSize: () => rowHeight,
+    getItemKey: (index) => page[index].id,
+    overscan: 1,
+  });
+  (0, _index.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.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: _reacttable.actions.setScrolledRight,
+          value: true,
+        })
+      : dispatch({
+          type: _reacttable.actions.setScrolledRight,
+          value: false,
         });
-        tableRef.current.scrollLeft !== tableRef.current.scrollWidth - tableRef.current.clientWidth ? dispatch({
-            type: _reacttable.actions.setScrolledLeft,
-            value: true
-        }) : dispatch({
-            type: _reacttable.actions.setScrolledLeft,
-            value: false
+    tableRef.current.scrollLeft !==
+    tableRef.current.scrollWidth - tableRef.current.clientWidth
+      ? dispatch({
+          type: _reacttable.actions.setScrolledLeft,
+          value: true,
+        })
+      : dispatch({
+          type: _reacttable.actions.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(_utils.TableColumnsContext.Provider, {
-        value: columns
-    }, _react.createElement(_index.Box, {
-        ref: (0, _index.useMergedRefs)(tableRef, resizeRef, _react.useCallback((element)=>{
+  };
+  _react.useEffect(() => {
+    updateStickyState();
+  }, []);
+  return _react.createElement(
+    _utils.TableColumnsContext.Provider,
+    {
+      value: columns,
+    },
+    _react.createElement(
+      _index.Box,
+      {
+        ref: (0, _index.useMergedRefs)(
+          tableRef,
+          resizeRef,
+          _react.useCallback((element) => {
             ownerDocument.current = element?.ownerDocument;
-        }, [])),
+          }, []),
+        ),
         id: id,
         ...getTableProps({
-            className: (0, _classnames.default)('iui-table', className),
-            style: {
-                minWidth: 0,
-                ...style
-            }
+          className: (0, _classnames.default)('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(_index.Box, {
-            as: "div",
+        return _react.createElement(
+          _index.Box,
+          {
+            as: 'div',
             key: headerGroupProps.key,
             ...headerWrapperProps,
-            className: (0, _classnames.default)('iui-table-header-wrapper', headerWrapperProps?.className)
-        }, _react.createElement(_index.Box, {
-            as: "div",
-            ...headerProps,
-            className: (0, _classnames.default)('iui-table-header', headerProps?.className)
-        }, _react.createElement(_index.Box, headerGroupProps, headerGroup.headers.map((column, index)=>{
-            let { onClick, ...restSortProps } = column.getSortByToggleProps();
-            let columnHasExpanders = hasAnySubRows && index === headerGroup.headers.findIndex((c)=>c.id !== _index4.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: (0, _classnames.default)('iui-table-cell', {
-                    'iui-actionable': column.canSort,
-                    'iui-sorted': column.isSorted,
-                    'iui-table-cell-sticky': !!column.sticky
-                }, column.columnClassName),
-                style: {
-                    ...(0, _utils.getCellStyle)(column, !!state.isTableResizing),
-                    ...columnHasExpanders && (0, _utils.getSubRowStyle)({
-                        density
-                    }),
-                    ...(0, _utils.getStickyStyle)(column, visibleColumns),
-                    flexWrap: 'wrap',
-                    columnGap: 'var(--iui-size-xs)'
-                }
-            });
-            return _react.createElement(_index.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(_index.ShadowRoot, null, 'string' == typeof column.Header ? _react.createElement(_index.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(_index.Box, {
-                className: "iui-table-header-actions-container",
-                onKeyDown: (e)=>e.stopPropagation(),
-                slot: "actions"
-            }, showFilterButton(column) && _react.createElement(_index1.FilterToggle, {
-                column: column
-            }), showSortButton(column) && _react.createElement(_index.Box, {
-                className: "iui-table-cell-end-icon"
-            }, column.isSortedDesc || !column.isSorted && column.sortDescFirst ? _react.createElement(_index.SvgSortDown, {
-                className: "iui-table-sort",
-                "aria-hidden": true
-            }) : _react.createElement(_index.SvgSortUp, {
-                className: "iui-table-sort",
-                "aria-hidden": true
-            }))), isResizable && column.isResizerVisible && (index !== headerGroup.headers.length - 1 || 'expand' === columnResizeMode) && _react.createElement(_index.Box, {
-                ...column.getResizerProps(),
-                className: "iui-table-resizer",
-                slot: "resizers"
-            }, _react.createElement(_index.Box, {
-                className: "iui-table-resizer-bar"
-            })), enableColumnReordering && !column.disableReordering && _react.createElement(_index.Box, {
-                className: "iui-table-reorder-bar",
-                slot: "resizers"
-            }), 'left' === column.sticky && state.sticky.isScrolledToRight && _react.createElement(_index.Box, {
-                className: "iui-table-cell-shadow-right",
-                slot: "shadows"
-            }), 'right' === column.sticky && state.sticky.isScrolledToLeft && _react.createElement(_index.Box, {
-                className: "iui-table-cell-shadow-left",
-                slot: "shadows"
-            })));
-        }))));
-    }), _react.createElement(_index.Box, {
-        as: "div",
-        ...bodyProps,
-        ...getTableBodyProps({
-            className: (0, _classnames.default)('iui-table-body', {
-                'iui-zebra-striping': 'zebra-rows' === styleType
-            }, bodyProps?.className),
+            className: (0, _classnames.default)(
+              'iui-table-header-wrapper',
+              headerWrapperProps?.className,
+            ),
+          },
+          _react.createElement(
+            _index.Box,
+            {
+              as: 'div',
+              ...headerProps,
+              className: (0, _classnames.default)(
+                'iui-table-header',
+                headerProps?.className,
+              ),
+            },
+            _react.createElement(
+              _index.Box,
+              headerGroupProps,
+              headerGroup.headers.map((column, index) => {
+                let dragAndDropProps = column.getDragAndDropProps();
+                return _react.createElement(_ColumnHeader.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(
+        _index.Box,
+        {
+          as: 'div',
+          ...bodyProps,
+          ...getTableBodyProps({
+            className: (0, _classnames.default)(
+              '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(_index.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(_index.Box, {
-        as: "div",
-        ...emptyTableContentProps,
-        className: (0, _classnames.default)('iui-table-empty', emptyTableContentProps?.className)
-    }, _react.createElement(_ProgressRadial.ProgressRadial, {
-        indeterminate: true
-    })), !isLoading && 0 === data.length && !areFiltersSet && _react.createElement(_index.Box, {
-        as: "div",
-        ...emptyTableContentProps,
-        className: (0, _classnames.default)('iui-table-empty', emptyTableContentProps?.className)
-    }, _react.createElement("div", null, emptyTableContent)), !isLoading && (0 === data.length || 0 === rows.length) && areFiltersSet && _react.createElement(_index.Box, {
-        as: "div",
-        ...emptyTableContentProps,
-        className: (0, _classnames.default)('iui-table-empty', emptyTableContentProps?.className)
-    }, _react.createElement("div", null, emptyFilteredTableContent))), isLoading && 0 !== data.length && _react.createElement(_index.Box, {
-        className: "iui-table-body-extra",
-        "data-iui-loading": "true"
-    }, _react.createElement(_ProgressRadial.ProgressRadial, {
-        indeterminate: true,
-        size: "small"
-    })), paginatorRenderer?.(paginatorRendererProps)));
+              outline: 0,
+            },
+          }),
+          tabIndex: -1,
+          'aria-multiselectable':
+            (isSelectable && 'multi' === selectionMode) || void 0,
+        },
+        _react.createElement(
+          _index.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(
+            _index.Box,
+            {
+              as: 'div',
+              ...emptyTableContentProps,
+              className: (0, _classnames.default)(
+                'iui-table-empty',
+                emptyTableContentProps?.className,
+              ),
+            },
+            _react.createElement(_ProgressRadial.ProgressRadial, {
+              indeterminate: true,
+            }),
+          ),
+        !isLoading &&
+          0 === data.length &&
+          !areFiltersSet &&
+          _react.createElement(
+            _index.Box,
+            {
+              as: 'div',
+              ...emptyTableContentProps,
+              className: (0, _classnames.default)(
+                'iui-table-empty',
+                emptyTableContentProps?.className,
+              ),
+            },
+            _react.createElement('div', null, emptyTableContent),
+          ),
+        !isLoading &&
+          (0 === data.length || 0 === rows.length) &&
+          areFiltersSet &&
+          _react.createElement(
+            _index.Box,
+            {
+              as: 'div',
+              ...emptyTableContentProps,
+              className: (0, _classnames.default)(
+                'iui-table-empty',
+                emptyTableContentProps?.className,
+              ),
+            },
+            _react.createElement('div', null, emptyFilteredTableContent),
+          ),
+      ),
+      isLoading &&
+        0 !== data.length &&
+        _react.createElement(
+          _index.Box,
+          {
+            className: 'iui-table-body-extra',
+            'data-iui-loading': 'true',
+          },
+          _react.createElement(_ProgressRadial.ProgressRadial, {
+            indeterminate: true,
+            size: 'small',
+          }),
+        ),
+      paginatorRenderer?.(paginatorRendererProps),
+    ),
+  );
 };
 Table.displayName = 'Table';