@itwin/itwinui-react 3.12.1 → 3.13.0

package/cjs/core/Table/Table.js

@@ -30,7 +30,6 @@ 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';
@@ -40,19 +39,18 @@ const COLUMN_MIN_WIDTHS = {
   default: 72,
   withExpander: 108,
 };
-const logWarningInDev = (0, _index.createWarningLogger)();
+const logWarning = (0, _index.createWarningLogger)();
 const flattenColumns = (columns) => {
-  const flatColumns = [];
+  let flatColumns = [];
   columns.forEach((column) => {
     flatColumns.push(column);
-    if ('columns' in column) {
+    if ('columns' in column)
       flatColumns.push(...flattenColumns(column.columns));
-    }
   });
   return flatColumns;
 };
 const Table = (props) => {
-  const {
+  let {
     data,
     columns,
     isLoading = false,
@@ -97,8 +95,8 @@ const Table = (props) => {
     ...rest
   } = props;
   (0, _index.useGlobals)();
-  const ownerDocument = _react.useRef();
-  const defaultColumn = _react.useMemo(
+  let ownerDocument = _react.useRef();
+  let defaultColumn = _react.useMemo(
     () => ({
       maxWidth: 0,
       minWidth: 0,
@@ -106,31 +104,32 @@ const Table = (props) => {
     }),
     [],
   );
-  const onBottomReachedRef = (0, _index.useLatestRef)(onBottomReached);
-  const onRowInViewportRef = (0, _index.useLatestRef)(onRowInViewport);
-  const hasManualSelectionColumn = _react.useMemo(() => {
-    const flatColumns = flattenColumns(columns);
+  let rowHeight = _react.useMemo(() => {
+    if ('condensed' === density) return 50;
+    if ('extra-condensed' === density) return 38;
+    return 62;
+  }, [density]);
+  let onBottomReachedRef = (0, _index.useLatestRef)(onBottomReached);
+  let onRowInViewportRef = (0, _index.useLatestRef)(onRowInViewport);
+  let hasManualSelectionColumn = _react.useMemo(() => {
+    let flatColumns = flattenColumns(columns);
     return flatColumns.some(
       (column) => column.id === _index4.SELECTION_CELL_ID,
     );
   }, [columns]);
-  const disableUserSelect = _react.useCallback((e) => {
-    if (e.key === 'Shift') {
+  let disableUserSelect = _react.useCallback((e) => {
+    if ('Shift' === e.key)
       ownerDocument.current &&
         (ownerDocument.current.documentElement.style.userSelect = 'none');
-    }
   }, []);
-  const enableUserSelect = _react.useCallback((e) => {
-    if (e.key === 'Shift') {
+  let enableUserSelect = _react.useCallback((e) => {
+    if ('Shift' === e.key)
       ownerDocument.current &&
         (ownerDocument.current.documentElement.style.userSelect = '');
-    }
   }, []);
   _react.useEffect(() => {
-    if (!isSelectable || selectionMode !== 'multi') {
-      return;
-    }
-    const ownerDoc = ownerDocument.current;
+    if (!isSelectable || 'multi' !== selectionMode) return;
+    let ownerDoc = ownerDocument.current;
     ownerDoc?.addEventListener('keydown', disableUserSelect);
     ownerDoc?.addEventListener('keyup', enableUserSelect);
     return () => {
@@ -144,9 +143,9 @@ const Table = (props) => {
     disableUserSelect,
     enableUserSelect,
   ]);
-  const previousFilter = _react.useRef([]);
-  const currentFilter = _react.useRef(previousFilter.current);
-  const tableStateReducer = _react.useCallback(
+  let previousFilter = _react.useRef([]);
+  let currentFilter = _react.useRef(previousFilter.current);
+  let tableStateReducer = _react.useCallback(
     (newState, action, previousState, instance) => {
       switch (action.type) {
         case _reacttable.actions.toggleSortBy:
@@ -165,46 +164,41 @@ const Table = (props) => {
         case _reacttable.actions.toggleAllRowsExpanded:
           (0, _index3.onExpandHandler)(newState, instance, onExpand);
           break;
-        case singleRowSelectedAction: {
+        case singleRowSelectedAction:
           newState = (0, _index3.onSingleSelectHandler)(
             newState,
             action,
             instance,
             onSelect,
-            hasManualSelectionColumn ? undefined : isRowDisabled,
+            hasManualSelectionColumn ? void 0 : isRowDisabled,
           );
           break;
-        }
-        case shiftRowSelectedAction: {
+        case shiftRowSelectedAction:
           newState = (0, _index3.onShiftSelectHandler)(
             newState,
             action,
             instance,
             onSelect,
-            hasManualSelectionColumn ? undefined : isRowDisabled,
+            hasManualSelectionColumn ? void 0 : isRowDisabled,
           );
           break;
-        }
         case _reacttable.actions.toggleRowSelected:
         case _reacttable.actions.toggleAllRowsSelected:
-        case _reacttable.actions.toggleAllPageRowsSelected: {
+        case _reacttable.actions.toggleAllPageRowsSelected:
           (0, _index3.onToggleHandler)(
             newState,
             action,
             instance,
             onSelect,
-            hasManualSelectionColumn ? undefined : isRowDisabled,
+            hasManualSelectionColumn ? void 0 : isRowDisabled,
           );
           break;
-        }
-        case tableResizeStartAction: {
+        case tableResizeStartAction:
           newState = (0, _index3.onTableResizeStart)(newState);
           break;
-        }
-        case tableResizeEndAction: {
+        case tableResizeEndAction:
           newState = (0, _index3.onTableResizeEnd)(newState, action);
           break;
-        }
         default:
           break;
       }
@@ -221,19 +215,21 @@ const Table = (props) => {
       stateReducer,
     ],
   );
-  const filterTypes = _react.useMemo(
+  let 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)(
+  let hasAnySubRows = _react.useMemo(
+    () =>
+      data.some((item, index) =>
+        getSubRows ? getSubRows(item, index) : item.subRows,
+      ),
+    [data, getSubRows],
+  );
+  let instance = (0, _reacttable.useTable)(
     {
       manualPagination: !paginatorRenderer,
       paginateExpandedRows: false,
@@ -273,7 +269,7 @@ const Table = (props) => {
     (0, _index2.useColumnDragAndDrop)(enableColumnReordering),
     _index2.useStickyColumns,
   );
-  const {
+  let {
     getTableProps,
     rows,
     headerGroups: _headerGroups,
@@ -290,58 +286,47 @@ const Table = (props) => {
     setGlobalFilter,
   } = instance;
   let headerGroups = _headerGroups;
-  if (columns.length === 1 && 'columns' in columns[0]) {
+  if (1 === columns.length && '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(
+  let ariaDataAttributes = Object.entries(rest).reduce(
     (result, [key, value]) => {
-      if (key.startsWith('data-') || key.startsWith('aria-')) {
+      if (key.startsWith('data-') || key.startsWith('aria-'))
         result[key] = value;
-      }
       return result;
     },
     {},
   );
-  const areFiltersSet =
+  let areFiltersSet =
     allColumns.some(
-      (column) => column.filterValue != null && column.filterValue !== '',
+      (column) => null != column.filterValue && '' !== 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(
+  let showFilterButton = (column) =>
+    (0 !== data.length || areFiltersSet) && column.canFilter && !!column.Filter;
+  let showSortButton = (column) => 0 !== data.length && column.canSort;
+  let onRowClickHandler = _react.useCallback(
     (event, row) => {
-      const isDisabled = isRowDisabled?.(row.original);
-      const ctrlPressed = event.ctrlKey || event.metaKey;
-      if (!isDisabled) {
-        onRowClick?.(event, row);
-      }
+      let isDisabled = isRowDisabled?.(row.original);
+      let ctrlPressed = event.ctrlKey || event.metaKey;
+      if (!isDisabled) onRowClick?.(event, row);
       if (
         isSelectable &&
         !isDisabled &&
         selectRowOnClick &&
         !event.isDefaultPrevented()
       ) {
-        if (selectionMode === 'multi' && event.shiftKey) {
+        if ('multi' === selectionMode && event.shiftKey)
           dispatch({
             type: shiftRowSelectedAction,
             id: row.id,
             ctrlPressed: ctrlPressed,
           });
-        } else if (
-          !row.isSelected &&
-          (selectionMode === 'single' || !ctrlPressed)
-        ) {
+        else if (row.isSelected || ('single' !== selectionMode && ctrlPressed))
+          row.toggleRowSelected(!row.isSelected);
+        else
           dispatch({
             type: singleRowSelectedAction,
             id: row.id,
           });
-        } else {
-          row.toggleRowSelected(!row.isSelected);
-        }
       }
     },
     [
@@ -365,27 +350,26 @@ const Table = (props) => {
       onFilter?.(currentFilter.current, state, instance.filteredRows);
     }
   }, [state, instance.filteredRows, onFilter]);
-  const lastPassedColumns = _react.useRef([]);
+  let lastPassedColumns = _react.useRef([]);
   _react.useEffect(() => {
     if (
       lastPassedColumns.current.length > 0 &&
       JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)
-    ) {
+    )
       instance.setColumnOrder([]);
-    }
     lastPassedColumns.current = columns;
   }, [columns, instance]);
-  const paginatorRendererProps = _react.useMemo(
+  let paginatorRendererProps = _react.useMemo(
     () => ({
       currentPage: state.pageIndex,
       pageSize: state.pageSize,
       totalRowsCount: rows.length,
-      size: density !== 'default' ? 'small' : 'default',
+      size: 'default' !== density ? 'small' : 'default',
       isLoading,
       onPageChange: gotoPage,
       onPageSizeChange: setPageSize,
       totalSelectedRowsCount:
-        selectionMode === 'single' ? 0 : instance.selectedFlatRows.length,
+        'single' === selectionMode ? 0 : instance.selectedFlatRows.length,
     }),
     [
       density,
@@ -399,32 +383,25 @@ const Table = (props) => {
       selectionMode,
     ],
   );
-  const tableRef = _react.useRef(null);
-  const { scrollToIndex, tableRowRef } = (0, _index2.useScrollToRow)({
+  let tableRef = _react.useRef(null);
+  let { scrollToIndex, tableRowRef } = (0, _index2.useScrollToRow)({
     ...props,
     page,
   });
-  const columnRefs = _react.useRef({});
-  const previousTableWidth = _react.useRef(0);
-  const onTableResize = _react.useCallback(
+  let columnRefs = _react.useRef({});
+  let previousTableWidth = _react.useRef(0);
+  let onTableResize = _react.useCallback(
     ({ width }) => {
-      if (!isResizable) {
-        return;
-      }
+      if (!isResizable) return;
       instance.tableWidth = width;
-      if (width === previousTableWidth.current) {
-        return;
-      }
+      if (width === previousTableWidth.current) return;
       previousTableWidth.current = width;
       flatHeaders.forEach((header) => {
-        if (columnRefs.current[header.id]) {
+        if (columnRefs.current[header.id])
           header.resizeWidth =
             columnRefs.current[header.id].getBoundingClientRect().width;
-        }
       });
-      if (Object.keys(state.columnResizing.columnWidths).length === 0) {
-        return;
-      }
+      if (0 === Object.keys(state.columnResizing.columnWidths).length) return;
       dispatch({
         type: tableResizeStartAction,
       });
@@ -437,15 +414,14 @@ const Table = (props) => {
       isResizable,
     ],
   );
-  const [resizeRef] = (0, _index.useResizeObserver)(onTableResize);
+  let [resizeRef] = (0, _index.useResizeObserver)(onTableResize);
   (0, _index.useLayoutEffect)(() => {
     if (state.isTableResizing) {
-      const newColumnWidths = {};
+      let newColumnWidths = {};
       flatHeaders.forEach((column) => {
-        if (columnRefs.current[column.id]) {
+        if (columnRefs.current[column.id])
           newColumnWidths[column.id] =
             columnRefs.current[column.id].getBoundingClientRect().width;
-        }
       });
       dispatch({
         type: tableResizeEndAction,
@@ -453,9 +429,22 @@ const Table = (props) => {
       });
     }
   });
-  const getPreparedRow = _react.useCallback(
-    (index) => {
-      const row = page[index];
+  let virtualizer = (0, _index.useVirtualScroll)({
+    count: page.length,
+    getScrollElement: () => tableRef.current,
+    estimateSize: () => rowHeight,
+    getItemKey: (index) => page[index].id,
+    overscan: 1,
+  });
+  (0, _index.useLayoutEffect)(() => {
+    if (scrollToIndex)
+      virtualizer.scrollToIndex(scrollToIndex, {
+        align: 'center',
+      });
+  }, [virtualizer, scrollToIndex]);
+  let getPreparedRow = _react.useCallback(
+    (index, virtualItem, virtualizer) => {
+      let row = page[index];
       prepareRow(row);
       return _react.createElement(_TableRowMemoized.TableRowMemoized, {
         row: row,
@@ -473,8 +462,10 @@ const Table = (props) => {
         tableInstance: instance,
         expanderCell: expanderCell,
         scrollContainerRef: tableRef.current,
-        tableRowRef: enableVirtualization ? undefined : tableRowRef(row),
+        tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
         density: density,
+        virtualItem: virtualItem,
+        virtualizer: virtualizer,
       });
     },
     [
@@ -496,44 +487,39 @@ const Table = (props) => {
       onRowInViewportRef,
     ],
   );
-  const virtualizedItemRenderer = _react.useCallback(
-    (index) => getPreparedRow(index),
-    [getPreparedRow],
-  );
-  const updateStickyState = () => {
-    if (!tableRef.current || flatHeaders.every((header) => !header.sticky)) {
+  let 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,
-      });
-    }
+    0 !== tableRef.current.scrollLeft
+      ? dispatch({
+          type: _reacttable.actions.setScrolledRight,
+          value: true,
+        })
+      : dispatch({
+          type: _reacttable.actions.setScrolledRight,
+          value: false,
+        });
+    tableRef.current.scrollLeft !==
+    tableRef.current.scrollWidth - tableRef.current.clientWidth
+      ? dispatch({
+          type: _reacttable.actions.setScrolledLeft,
+          value: true,
+        })
+      : dispatch({
+          type: _reacttable.actions.setScrolledLeft,
+          value: false,
+        });
   };
   _react.useEffect(() => {
     updateStickyState();
   }, []);
-  const isHeaderDirectClick = _react.useRef(false);
+  let isHeaderDirectClick = _react.useRef(false);
+  let columnResizeRef = _react.useCallback((el, column) => {
+    if (el) {
+      columnRefs.current[column.id] = el;
+      column.resizeWidth = el.getBoundingClientRect().width;
+    }
+  }, []);
   return _react.createElement(
     _utils.TableColumnsContext.Provider,
     {
@@ -542,10 +528,13 @@ const Table = (props) => {
     _react.createElement(
       _index.Box,
       {
-        ref: (0, _index.useMergedRefs)(tableRef, (element) => {
-          ownerDocument.current = element?.ownerDocument;
-          resizeRef(element);
-        }),
+        ref: (0, _index.useMergedRefs)(
+          tableRef,
+          resizeRef,
+          _react.useCallback((element) => {
+            ownerDocument.current = element?.ownerDocument;
+          }, []),
+        ),
         id: id,
         ...getTableProps({
           className: (0, _classnames.default)('iui-table', className),
@@ -555,7 +544,7 @@ const Table = (props) => {
           },
         }),
         onScroll: () => updateStickyState(),
-        'data-iui-size': density === 'default' ? undefined : density,
+        'data-iui-size': 'default' === density ? void 0 : density,
         ...ariaDataAttributes,
       },
       headerGroups.map((headerGroup) => {
@@ -564,7 +553,7 @@ const Table = (props) => {
             !header.id.includes('iui-table-checkbox-selector_placeholder') &&
             !header.id.includes('iui-table-expander_placeholder'),
         );
-        const headerGroupProps = headerGroup.getHeaderGroupProps({
+        let headerGroupProps = headerGroup.getHeaderGroupProps({
           className: 'iui-table-row',
         });
         return _react.createElement(
@@ -592,20 +581,19 @@ const Table = (props) => {
               _index.Box,
               headerGroupProps,
               headerGroup.headers.map((column, index) => {
-                const { onClick, ...restSortProps } =
+                let { onClick, ...restSortProps } =
                   column.getSortByToggleProps();
-                const columnHasExpanders =
+                let columnHasExpanders =
                   hasAnySubRows &&
                   index ===
                     headerGroup.headers.findIndex(
                       (c) => c.id !== _index4.SELECTION_CELL_ID,
                     );
-                if ([undefined, 0].includes(column.minWidth)) {
+                if ([void 0, 0].includes(column.minWidth))
                   column.minWidth = columnHasExpanders
                     ? COLUMN_MIN_WIDTHS.withExpander
                     : COLUMN_MIN_WIDTHS.default;
-                }
-                const columnProps = column.getHeaderProps({
+                let columnProps = column.getHeaderProps({
                   ...restSortProps,
                   className: (0, _classnames.default)(
                     'iui-table-cell',
@@ -636,12 +624,9 @@ const Table = (props) => {
                     ...columnProps,
                     ...column.getDragAndDropProps(),
                     key: columnProps.key,
-                    title: undefined,
+                    title: void 0,
                     ref: (el) => {
-                      if (el) {
-                        columnRefs.current[column.id] = el;
-                        column.resizeWidth = el.getBoundingClientRect().width;
-                      }
+                      columnResizeRef(el, column);
                     },
                     onMouseDown: () => {
                       isHeaderDirectClick.current = true;
@@ -652,97 +637,100 @@ const Table = (props) => {
                         isHeaderDirectClick.current = false;
                       }
                     },
-                    tabIndex: showSortButton(column) ? 0 : undefined,
+                    tabIndex: showSortButton(column) ? 0 : void 0,
                     onKeyDown: (e) => {
-                      if (e.key == 'Enter' && showSortButton(column)) {
+                      if ('Enter' == e.key && showSortButton(column))
                         column.toggleSortBy();
-                      }
                     },
                   },
                   _react.createElement(
-                    _index.ShadowRoot,
+                    _react.Fragment,
                     null,
-                    typeof column.Header === 'string'
-                      ? _react.createElement(
-                          _index.LineClamp,
-                          null,
-                          _react.createElement('slot', null),
-                        )
-                      : _react.createElement('slot', null),
-                    _react.createElement('slot', {
-                      name: 'actions',
-                    }),
-                    _react.createElement('slot', {
-                      name: 'resizers',
-                    }),
-                    _react.createElement('slot', {
-                      name: 'shadows',
-                    }),
-                  ),
-                  column.render('Header'),
-                  (showFilterButton(column) || showSortButton(column)) &&
                     _react.createElement(
-                      _index.Box,
-                      {
-                        className: 'iui-table-header-actions-container',
-                        onKeyDown: (e) => e.stopPropagation(),
-                        slot: 'actions',
-                      },
-                      showFilterButton(column) &&
-                        _react.createElement(_index1.FilterToggle, {
-                          column: column,
-                        }),
-                      showSortButton(column) &&
-                        _react.createElement(
-                          _index.Box,
-                          {
-                            className: 'iui-table-cell-end-icon',
-                          },
-                          column.isSortedDesc ||
-                            (!column.isSorted && column.sortDescFirst)
-                            ? _react.createElement(_index.SvgSortDown, {
-                                className: 'iui-table-sort',
-                                'aria-hidden': true,
-                              })
-                            : _react.createElement(_index.SvgSortUp, {
-                                className: 'iui-table-sort',
-                                'aria-hidden': true,
-                              }),
-                        ),
+                      _index.ShadowRoot,
+                      null,
+                      'string' == typeof column.Header
+                        ? _react.createElement(
+                            _index.LineClamp,
+                            null,
+                            _react.createElement('slot', null),
+                          )
+                        : _react.createElement('slot', null),
+                      _react.createElement('slot', {
+                        name: 'actions',
+                      }),
+                      _react.createElement('slot', {
+                        name: 'resizers',
+                      }),
+                      _react.createElement('slot', {
+                        name: 'shadows',
+                      }),
                     ),
-                  isResizable &&
-                    column.isResizerVisible &&
-                    (index !== headerGroup.headers.length - 1 ||
-                      columnResizeMode === 'expand') &&
-                    _react.createElement(
-                      _index.Box,
-                      {
-                        ...column.getResizerProps(),
-                        className: 'iui-table-resizer',
+                    column.render('Header'),
+                    (showFilterButton(column) || showSortButton(column)) &&
+                      _react.createElement(
+                        _index.Box,
+                        {
+                          className: 'iui-table-header-actions-container',
+                          onKeyDown: (e) => e.stopPropagation(),
+                          slot: 'actions',
+                        },
+                        showFilterButton(column) &&
+                          _react.createElement(_index1.FilterToggle, {
+                            column: column,
+                          }),
+                        showSortButton(column) &&
+                          _react.createElement(
+                            _index.Box,
+                            {
+                              className: 'iui-table-cell-end-icon',
+                            },
+                            column.isSortedDesc ||
+                              (!column.isSorted && column.sortDescFirst)
+                              ? _react.createElement(_index.SvgSortDown, {
+                                  className: 'iui-table-sort',
+                                  'aria-hidden': true,
+                                })
+                              : _react.createElement(_index.SvgSortUp, {
+                                  className: 'iui-table-sort',
+                                  'aria-hidden': true,
+                                }),
+                          ),
+                      ),
+                    isResizable &&
+                      column.isResizerVisible &&
+                      (index !== headerGroup.headers.length - 1 ||
+                        'expand' === columnResizeMode) &&
+                      _react.createElement(
+                        _index.Box,
+                        {
+                          ...column.getResizerProps(),
+                          className: 'iui-table-resizer',
+                          slot: 'resizers',
+                        },
+                        _react.createElement(_index.Box, {
+                          className: 'iui-table-resizer-bar',
+                        }),
+                      ),
+                    enableColumnReordering &&
+                      !column.disableReordering &&
+                      _react.createElement(_index.Box, {
+                        className: 'iui-table-reorder-bar',
                         slot: 'resizers',
-                      },
+                      }),
+                    'left' === column.sticky &&
+                      state.sticky.isScrolledToRight &&
                       _react.createElement(_index.Box, {
-                        className: 'iui-table-resizer-bar',
+                        className: 'iui-table-cell-shadow-right',
+                        slot: 'shadows',
                       }),
-                    ),
-                  enableColumnReordering &&
-                    !column.disableReordering &&
-                    _react.createElement(_index.Box, {
-                      className: 'iui-table-reorder-bar',
-                      slot: 'resizers',
-                    }),
-                  column.sticky === 'left' &&
-                    state.sticky.isScrolledToRight &&
-                    _react.createElement(_index.Box, {
-                      className: 'iui-table-cell-shadow-right',
-                      slot: 'shadows',
-                    }),
-                  column.sticky === 'right' &&
-                    state.sticky.isScrolledToLeft &&
-                    _react.createElement(_index.Box, {
-                      className: 'iui-table-cell-shadow-left',
-                      slot: 'shadows',
-                    }),
+                    'right' === column.sticky &&
+                      state.sticky.isScrolledToLeft &&
+                      _react.createElement(_index.Box, {
+                        className: 'iui-table-cell-shadow-left',
+                        slot: 'shadows',
+                      }),
+                  ),
                 );
               }),
             ),
@@ -758,7 +746,7 @@ const Table = (props) => {
             className: (0, _classnames.default)(
               'iui-table-body',
               {
-                'iui-zebra-striping': styleType === 'zebra-rows',
+                'iui-zebra-striping': 'zebra-rows' === styleType,
               },
               bodyProps?.className,
             ),
@@ -768,22 +756,46 @@ const Table = (props) => {
           }),
           tabIndex: -1,
           'aria-multiselectable':
-            (isSelectable && selectionMode === 'multi') || undefined,
+            (isSelectable && 'multi' === selectionMode) || void 0,
         },
-        data.length !== 0 &&
+        _react.createElement(
+          _index.ShadowRoot,
+          {
+            css: `
+              div,
+              slot {
+                border-radius: inherit;
+              }
+            `,
+          },
+          enableVirtualization
+            ? _react.createElement(
+                'div',
+                {
+                  style: {
+                    minBlockSize: virtualizer.getTotalSize(),
+                    minInlineSize: '100%',
+                    contain: 'strict',
+                  },
+                },
+                _react.createElement('slot', null),
+              )
+            : _react.createElement('slot', null),
+        ),
+        0 !== data.length &&
           _react.createElement(
             _react.Fragment,
             null,
             enableVirtualization
-              ? _react.createElement(_VirtualScroll.VirtualScroll, {
-                  itemsLength: page.length,
-                  itemRenderer: virtualizedItemRenderer,
-                  scrollToIndex: scrollToIndex,
-                })
+              ? virtualizer
+                  .getVirtualItems()
+                  .map((virtualItem) =>
+                    getPreparedRow(virtualItem.index, virtualItem, virtualizer),
+                  )
               : page.map((_, index) => getPreparedRow(index)),
           ),
         isLoading &&
-          data.length === 0 &&
+          0 === data.length &&
           _react.createElement(
             _index.Box,
             {
@@ -799,7 +811,7 @@ const Table = (props) => {
             }),
           ),
         !isLoading &&
-          data.length === 0 &&
+          0 === data.length &&
           !areFiltersSet &&
           _react.createElement(
             _index.Box,
@@ -814,7 +826,7 @@ const Table = (props) => {
             _react.createElement('div', null, emptyTableContent),
           ),
         !isLoading &&
-          (data.length === 0 || rows.length === 0) &&
+          (0 === data.length || 0 === rows.length) &&
           areFiltersSet &&
           _react.createElement(
             _index.Box,
@@ -830,7 +842,7 @@ const Table = (props) => {
           ),
       ),
       isLoading &&
-        data.length !== 0 &&
+        0 !== data.length &&
         _react.createElement(
           _index.Box,
           {