@itwin/itwinui-react 3.11.3 → 3.12.0

package/cjs/core/Table/Table.js

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