@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/Table/Table.js

@@ -4,38 +4,68 @@
  *--------------------------------------------------------------------------------------------*/
 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/index.js';
-import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useIsomorphicLayoutEffect, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/table.css';
+import {
+  useGlobals,
+  useResizeObserver,
+  SvgSortDown,
+  SvgSortUp,
+  useIsomorphicLayoutEffect,
+  Box,
+  createWarningLogger,
+} from '../utils/index.js';
 import { getCellStyle, getStickyStyle } 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';
 const shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
 const tableResizeEndAction = 'tableResizeEnd';
-let didLogWarning = false;
-let isDev = false;
-// wrapping in try-catch because process might be undefined
-try {
-    isDev = process.env.NODE_ENV !== 'production';
-}
-catch (_a) { }
+const logWarningInDev = createWarningLogger();
 const flattenColumns = (columns) => {
-    const flatColumns = [];
-    columns.forEach((column) => {
-        flatColumns.push(column);
-        if ('columns' in column) {
-            flatColumns.push(...flattenColumns(column.columns));
-        }
-    });
-    return flatColumns;
+  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;
 };
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
@@ -75,413 +105,729 @@ const flattenColumns = (columns) => {
  * />
  */
 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, ...rest } = props;
-    useGlobals();
-    const ownerDocument = React.useRef();
-    const defaultColumn = React.useMemo(() => ({
-        maxWidth: 0,
-        minWidth: 0,
-        width: 0,
-    }), []);
-    // useRef prevents from rerendering when one of these callbacks changes
-    const onBottomReachedRef = React.useRef(onBottomReached);
-    const onRowInViewportRef = React.useRef(onRowInViewport);
-    React.useEffect(() => {
-        onBottomReachedRef.current = onBottomReached;
-        onRowInViewportRef.current = onRowInViewport;
-    }, [onBottomReached, 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 === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keydown', disableUserSelect);
-        ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keyup', enableUserSelect);
-        return () => {
-            ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keydown', disableUserSelect);
-            ownerDoc === null || ownerDoc === void 0 ? void 0 : 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 === null || onSort === void 0 ? void 0 : 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);
-        if (isDev && !didLogWarning) {
-            console.warn(`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`);
-            didLogWarning = true;
-        }
+  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,
+    }),
+    [],
+  );
+  // useRef prevents from rerendering when one of these callbacks changes
+  const onBottomReachedRef = React.useRef(onBottomReached);
+  const onRowInViewportRef = React.useRef(onRowInViewport);
+  React.useEffect(() => {
+    onBottomReachedRef.current = onBottomReached;
+    onRowInViewportRef.current = onRowInViewport;
+  }, [onBottomReached, 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;
-    const showSortButton = (column) => data.length !== 0 && column.canSort;
-    const onRowClickHandler = React.useCallback((event, row) => {
-        const isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
-        const ctrlPressed = event.ctrlKey || event.metaKey;
-        if (!isDisabled) {
-            onRowClick === null || onRowClick === void 0 ? void 0 : 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 === null || onFilter === void 0 ? void 0 : 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 (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 { scrollToIndex, tableRowRef } = useScrollToRow({ ...props, page });
-    const columnRefs = React.useRef({});
-    const previousTableWidth = React.useRef(0);
-    const onTableResize = React.useCallback(({ width }) => {
-        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,
+            // If it has manual selection column, then we can't check whether row is disabled
+            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,
+            // If it has manual selection column, then we can't check whether row is disabled
+            hasManualSelectionColumn ? undefined : isRowDisabled,
+          );
+          break;
         }
-        dispatch({ type: tableResizeStartAction });
-    }, [dispatch, state.columnResizing.columnWidths, flatHeaders, instance]);
-    const [resizeRef] = useResizeObserver(onTableResize);
-    // Flexbox handles columns resize so we take new column widths before browser repaints.
-    useIsomorphicLayoutEffect(() => {
-        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,
+            // If it has manual selection column, then we can't check whether row is disabled
+            hasManualSelectionColumn ? undefined : isRowDisabled,
+          );
+          break;
         }
-    });
-    const headerRef = React.useRef(null);
-    const bodyRef = React.useRef(null);
-    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 === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row), density: density }));
-    }, [
-        page,
-        prepareRow,
-        rowProps,
-        intersectionMargin,
-        state,
-        onRowClickHandler,
-        subComponent,
-        isRowDisabled,
-        hasAnySubRows,
-        instance,
-        expanderCell,
-        enableVirtualization,
-        tableRowRef,
-        density,
-    ]);
-    const virtualizedItemRenderer = React.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
-    const updateStickyState = () => {
-        if (!bodyRef.current || flatHeaders.every((header) => !header.sticky)) {
-            return;
+        case tableResizeStartAction: {
+          newState = onTableResizeStart(newState);
+          break;
         }
-        if (bodyRef.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 (bodyRef.current.scrollLeft !==
-            bodyRef.current.scrollWidth - bodyRef.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([]);
+  // 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 (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 { scrollToIndex, tableRowRef } = useScrollToRow({ ...props, page });
+  const columnRefs = React.useRef({});
+  const previousTableWidth = React.useRef(0);
+  const onTableResize = React.useCallback(
+    ({ width }) => {
+      instance.tableWidth = width;
+      if (width === previousTableWidth.current) {
+        return;
+      }
+      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;
         }
-        else {
-            dispatch({ type: TableActions.setScrolledLeft, value: false });
+      });
+      // If no column was resized then leave table resize handling to the flexbox
+      if (Object.keys(state.columnResizing.columnWidths).length === 0) {
+        return;
+      }
+      dispatch({ type: tableResizeStartAction });
+    },
+    [dispatch, state.columnResizing.columnWidths, flatHeaders, instance],
+  );
+  const [resizeRef] = useResizeObserver(onTableResize);
+  // Flexbox handles columns resize so we take new column widths before browser repaints.
+  useIsomorphicLayoutEffect(() => {
+    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(React.Fragment, null,
-        React.createElement("div", { ref: (element) => {
-                ownerDocument.current = element === null || element === void 0 ? void 0 : element.ownerDocument;
-                if (isResizable) {
-                    resizeRef(element);
-                }
-            }, id: id, ...getTableProps({
-                className: cx('iui-table', className),
-                style: {
-                    minWidth: 0,
-                    ...style,
-                },
-            }), "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',
+      });
+      dispatch({ type: tableResizeEndAction, columnWidths: newColumnWidths });
+    }
+  });
+  const headerRef = React.useRef(null);
+  const bodyRef = React.useRef(null);
+  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,
+        bodyRef: bodyRef.current,
+        tableRowRef: enableVirtualization ? undefined : tableRowRef(row),
+        density: density,
+      });
+    },
+    [
+      page,
+      prepareRow,
+      rowProps,
+      intersectionMargin,
+      state,
+      onRowClickHandler,
+      subComponent,
+      isRowDisabled,
+      hasAnySubRows,
+      instance,
+      expanderCell,
+      enableVirtualization,
+      tableRowRef,
+      density,
+    ],
+  );
+  const virtualizedItemRenderer = React.useCallback(
+    (index) => getPreparedRow(index),
+    [getPreparedRow],
+  );
+  const updateStickyState = () => {
+    if (!bodyRef.current || flatHeaders.every((header) => !header.sticky)) {
+      return;
+    }
+    if (bodyRef.current.scrollLeft !== 0) {
+      dispatch({ type: TableActions.setScrolledRight, value: true });
+    } else {
+      dispatch({ type: TableActions.setScrolledRight, value: false });
+    }
+    // If scrolled a bit to the left looking from the right side
+    if (
+      bodyRef.current.scrollLeft !==
+      bodyRef.current.scrollWidth - bodyRef.current.clientWidth
+    ) {
+      dispatch({ type: TableActions.setScrolledLeft, value: true });
+    } else {
+      dispatch({ type: TableActions.setScrolledLeft, value: false });
+    }
+  };
+  React.useEffect(() => {
+    updateStickyState();
+    // Call only on init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const isHeaderDirectClick = React.useRef(false);
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Box,
+      {
+        ref: (element) => {
+          ownerDocument.current = element?.ownerDocument;
+          if (isResizable) {
+            resizeRef(element);
+          }
+        },
+        id: id,
+        ...getTableProps({
+          className: cx('iui-table', className),
+          style: {
+            minWidth: 0,
+            ...style,
+          },
+        }),
+        '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',
+            ref: headerRef,
+            onScroll: () => {
+              if (headerRef.current && bodyRef.current) {
+                bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+                updateStickyState();
+              }
+            },
+            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 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),
+                    ...getStickyStyle(column, visibleColumns),
+                    flexWrap: 'unset',
+                  },
                 });
-                return (React.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: () => {
-                        if (headerRef.current && bodyRef.current) {
-                            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
-                            updateStickyState();
-                        }
-                    }, key: headerGroupProps.key },
-                    React.createElement("div", { className: 'iui-table-header' },
-                        React.createElement("div", { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
-                            const { onClick, ...restSortProps } = column.getSortByToggleProps();
-                            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),
-                                    ...getStickyStyle(column, visibleColumns),
-                                    flexWrap: 'unset',
-                                },
-                            });
-                            return (React.createElement("div", { ...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 === null || onClick === void 0 ? void 0 : onClick(e);
-                                        isHeaderDirectClick.current = false;
-                                    }
-                                }, tabIndex: showSortButton(column) ? 0 : undefined, onKeyDown: (e) => {
-                                    if (e.key == 'Enter' && showSortButton(column)) {
-                                        column.toggleSortBy();
-                                    }
-                                } },
-                                column.render('Header'),
-                                (showFilterButton(column) ||
-                                    showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
-                                    showFilterButton(column) && (React.createElement(FilterToggle, { column: column })),
-                                    showSortButton(column) && (React.createElement("div", { 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("div", { ...column.getResizerProps(), className: 'iui-table-resizer' },
-                                    React.createElement("div", { className: 'iui-table-resizer-bar' }))),
-                                enableColumnReordering &&
-                                    !column.disableReordering && (React.createElement("div", { className: 'iui-table-reorder-bar' })),
-                                column.sticky === 'left' &&
-                                    state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
-                                column.sticky === 'right' &&
-                                    state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' }))));
-                        })))));
-            }),
-            React.createElement("div", { ...getTableBodyProps({
-                    className: cx('iui-table-body', {
-                        'iui-zebra-striping': styleType === 'zebra-rows',
+                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();
+                      }
+                    },
+                  },
+                  column.render('Header'),
+                  (showFilterButton(column) || showSortButton(column)) &&
+                    React.createElement(
+                      Box,
+                      { className: 'iui-table-header-actions-container' },
+                      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',
+                      },
+                      React.createElement(Box, {
+                        className: 'iui-table-resizer-bar',
+                      }),
+                    ),
+                  enableColumnReordering &&
+                    !column.disableReordering &&
+                    React.createElement(Box, {
+                      className: 'iui-table-reorder-bar',
+                    }),
+                  column.sticky === 'left' &&
+                    state.sticky.isScrolledToRight &&
+                    React.createElement(Box, {
+                      className: 'iui-table-cell-shadow-right',
                     }),
-                    style: { outline: 0 },
-                }), ref: bodyRef, onScroll: () => {
-                    if (headerRef.current && bodyRef.current) {
-                        headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
-                        updateStickyState();
-                    }
-                }, 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("div", { className: 'iui-table-empty' },
-                    React.createElement(ProgressRadial, { indeterminate: true }))),
-                isLoading && data.length !== 0 && (React.createElement("div", { className: 'iui-table-row' },
-                    React.createElement("div", { className: 'iui-table-cell', style: { justifyContent: 'center' } },
-                        React.createElement(ProgressRadial, { indeterminate: true, size: 'small', style: { float: 'none', marginLeft: 0 } })))),
-                !isLoading && data.length === 0 && !areFiltersSet && (React.createElement("div", { className: 'iui-table-empty' },
-                    React.createElement("div", null, emptyTableContent))),
-                !isLoading &&
-                    (data.length === 0 || rows.length === 0) &&
-                    areFiltersSet && (React.createElement("div", { className: 'iui-table-empty' },
-                    React.createElement("div", null, emptyFilteredTableContent)))), paginatorRenderer === null || paginatorRenderer === void 0 ? void 0 :
-            paginatorRenderer(paginatorRendererProps))));
+                  column.sticky === 'right' &&
+                    state.sticky.isScrolledToLeft &&
+                    React.createElement(Box, {
+                      className: 'iui-table-cell-shadow-left',
+                    }),
+                );
+              }),
+            ),
+          ),
+        );
+      }),
+      React.createElement(
+        Box,
+        {
+          ...bodyProps,
+          ...getTableBodyProps({
+            className: cx(
+              'iui-table-body',
+              {
+                'iui-zebra-striping': styleType === 'zebra-rows',
+              },
+              bodyProps?.className,
+            ),
+            style: { outline: 0 },
+          }),
+          ref: bodyRef,
+          onScroll: () => {
+            if (headerRef.current && bodyRef.current) {
+              headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
+              updateStickyState();
+            }
+          },
+          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 &&
+          React.createElement(
+            Box,
+            { className: 'iui-table-row' },
+            React.createElement(
+              Box,
+              {
+                className: 'iui-table-cell',
+                style: { justifyContent: 'center' },
+              },
+              React.createElement(ProgressRadial, {
+                indeterminate: true,
+                size: 'small',
+              }),
+            ),
+          ),
+        !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),
+          ),
+      ),
+      paginatorRenderer?.(paginatorRendererProps),
+    ),
+  );
 };
 export default Table;