@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/Table/Table.js

@@ -25,6 +25,7 @@ import {
   LineClamp,
   useMergedRefs,
   useLatestRef,
+  useVirtualScroll,
 } from '../../utils/index.js';
 import {
   TableColumnsContext,
@@ -54,29 +55,27 @@ import {
   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';
+let singleRowSelectedAction = 'singleRowSelected';
+let shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
-const tableResizeEndAction = 'tableResizeEnd';
-const COLUMN_MIN_WIDTHS = {
+let tableResizeEndAction = 'tableResizeEnd';
+let COLUMN_MIN_WIDTHS = {
   default: 72,
   withExpander: 108,
 };
-const logWarningInDev = createWarningLogger();
-const flattenColumns = (columns) => {
-  const flatColumns = [];
+let logWarning = createWarningLogger();
+let flattenColumns = (columns) => {
+  let flatColumns = [];
   columns.forEach((column) => {
     flatColumns.push(column);
-    if ('columns' in column) {
+    if ('columns' in column)
       flatColumns.push(...flattenColumns(column.columns));
-    }
   });
   return flatColumns;
 };
 export const Table = (props) => {
-  const {
+  let {
     data,
     columns,
     isLoading = false,
@@ -121,8 +120,8 @@ export const Table = (props) => {
     ...rest
   } = props;
   useGlobals();
-  const ownerDocument = React.useRef();
-  const defaultColumn = React.useMemo(
+  let ownerDocument = React.useRef();
+  let defaultColumn = React.useMemo(
     () => ({
       maxWidth: 0,
       minWidth: 0,
@@ -130,29 +129,30 @@ export const Table = (props) => {
     }),
     [],
   );
-  const onBottomReachedRef = useLatestRef(onBottomReached);
-  const onRowInViewportRef = 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 = useLatestRef(onBottomReached);
+  let onRowInViewportRef = useLatestRef(onRowInViewport);
+  let hasManualSelectionColumn = React.useMemo(() => {
+    let flatColumns = flattenColumns(columns);
     return flatColumns.some((column) => column.id === 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 () => {
@@ -166,9 +166,9 @@ export 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 TableActions.toggleSortBy:
@@ -187,46 +187,41 @@ export const Table = (props) => {
         case TableActions.toggleAllRowsExpanded:
           onExpandHandler(newState, instance, onExpand);
           break;
-        case singleRowSelectedAction: {
+        case singleRowSelectedAction:
           newState = onSingleSelectHandler(
             newState,
             action,
             instance,
             onSelect,
-            hasManualSelectionColumn ? undefined : isRowDisabled,
+            hasManualSelectionColumn ? void 0 : isRowDisabled,
           );
           break;
-        }
-        case shiftRowSelectedAction: {
+        case shiftRowSelectedAction:
           newState = onShiftSelectHandler(
             newState,
             action,
             instance,
             onSelect,
-            hasManualSelectionColumn ? undefined : isRowDisabled,
+            hasManualSelectionColumn ? void 0 : isRowDisabled,
           );
           break;
-        }
         case TableActions.toggleRowSelected:
         case TableActions.toggleAllRowsSelected:
-        case TableActions.toggleAllPageRowsSelected: {
+        case TableActions.toggleAllPageRowsSelected:
           onToggleHandler(
             newState,
             action,
             instance,
             onSelect,
-            hasManualSelectionColumn ? undefined : isRowDisabled,
+            hasManualSelectionColumn ? void 0 : isRowDisabled,
           );
           break;
-        }
-        case tableResizeStartAction: {
+        case tableResizeStartAction:
           newState = onTableResizeStart(newState);
           break;
-        }
-        case tableResizeEndAction: {
+        case tableResizeEndAction:
           newState = onTableResizeEnd(newState, action);
           break;
-        }
         default:
           break;
       }
@@ -243,19 +238,21 @@ export const Table = (props) => {
       stateReducer,
     ],
   );
-  const filterTypes = React.useMemo(
+  let 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(
+  let hasAnySubRows = React.useMemo(
+    () =>
+      data.some((item, index) =>
+        getSubRows ? getSubRows(item, index) : item.subRows,
+      ),
+    [data, getSubRows],
+  );
+  let instance = useTable(
     {
       manualPagination: !paginatorRenderer,
       paginateExpandedRows: false,
@@ -290,7 +287,7 @@ export const Table = (props) => {
     useColumnDragAndDrop(enableColumnReordering),
     useStickyColumns,
   );
-  const {
+  let {
     getTableProps,
     rows,
     headerGroups: _headerGroups,
@@ -307,58 +304,47 @@ export 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);
-        }
       }
     },
     [
@@ -382,27 +368,26 @@ export 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,
@@ -416,32 +401,25 @@ export const Table = (props) => {
       selectionMode,
     ],
   );
-  const tableRef = React.useRef(null);
-  const { scrollToIndex, tableRowRef } = useScrollToRow({
+  let tableRef = React.useRef(null);
+  let { scrollToIndex, tableRowRef } = 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,
       });
@@ -454,15 +432,14 @@ export const Table = (props) => {
       isResizable,
     ],
   );
-  const [resizeRef] = useResizeObserver(onTableResize);
+  let [resizeRef] = useResizeObserver(onTableResize);
   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,
@@ -470,9 +447,22 @@ export const Table = (props) => {
       });
     }
   });
-  const getPreparedRow = React.useCallback(
-    (index) => {
-      const row = page[index];
+  let virtualizer = useVirtualScroll({
+    count: page.length,
+    getScrollElement: () => tableRef.current,
+    estimateSize: () => rowHeight,
+    getItemKey: (index) => page[index].id,
+    overscan: 1,
+  });
+  useLayoutEffect(() => {
+    if (scrollToIndex)
+      virtualizer.scrollToIndex(scrollToIndex, {
+        align: 'center',
+      });
+  }, [virtualizer, scrollToIndex]);
+  let getPreparedRow = React.useCallback(
+    (index, virtualItem, virtualizer) => {
+      let row = page[index];
       prepareRow(row);
       return React.createElement(TableRowMemoized, {
         row: row,
@@ -490,8 +480,10 @@ export 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,
       });
     },
     [
@@ -513,44 +505,39 @@ export 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: TableActions.setScrolledRight,
-        value: true,
-      });
-    } else {
-      dispatch({
-        type: TableActions.setScrolledRight,
-        value: false,
-      });
-    }
-    if (
-      tableRef.current.scrollLeft !==
-      tableRef.current.scrollWidth - tableRef.current.clientWidth
-    ) {
-      dispatch({
-        type: TableActions.setScrolledLeft,
-        value: true,
-      });
-    } else {
-      dispatch({
-        type: TableActions.setScrolledLeft,
-        value: false,
-      });
-    }
+    0 !== tableRef.current.scrollLeft
+      ? dispatch({
+          type: TableActions.setScrolledRight,
+          value: true,
+        })
+      : dispatch({
+          type: TableActions.setScrolledRight,
+          value: false,
+        });
+    tableRef.current.scrollLeft !==
+    tableRef.current.scrollWidth - tableRef.current.clientWidth
+      ? dispatch({
+          type: TableActions.setScrolledLeft,
+          value: true,
+        })
+      : dispatch({
+          type: TableActions.setScrolledLeft,
+          value: false,
+        });
   };
   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(
     TableColumnsContext.Provider,
     {
@@ -559,10 +546,13 @@ export const Table = (props) => {
     React.createElement(
       Box,
       {
-        ref: useMergedRefs(tableRef, (element) => {
-          ownerDocument.current = element?.ownerDocument;
-          resizeRef(element);
-        }),
+        ref: useMergedRefs(
+          tableRef,
+          resizeRef,
+          React.useCallback((element) => {
+            ownerDocument.current = element?.ownerDocument;
+          }, []),
+        ),
         id: id,
         ...getTableProps({
           className: cx('iui-table', className),
@@ -572,7 +562,7 @@ export const Table = (props) => {
           },
         }),
         onScroll: () => updateStickyState(),
-        'data-iui-size': density === 'default' ? undefined : density,
+        'data-iui-size': 'default' === density ? void 0 : density,
         ...ariaDataAttributes,
       },
       headerGroups.map((headerGroup) => {
@@ -581,7 +571,7 @@ export 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(
@@ -606,20 +596,19 @@ export const Table = (props) => {
               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 !== 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: cx(
                     'iui-table-cell',
@@ -647,12 +636,9 @@ export 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;
@@ -663,97 +649,100 @@ export 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(
-                    ShadowRoot,
+                    React.Fragment,
                     null,
-                    typeof column.Header === 'string'
-                      ? React.createElement(
-                          LineClamp,
-                          null,
-                          React.createElement('slot', null),
-                        )
-                      : React.createElement('slot', null),
-                    React.createElement('slot', {
-                      name: 'actions',
-                    }),
-                    React.createElement('slot', {
-                      name: 'resizers',
-                    }),
-                    React.createElement('slot', {
-                      name: 'shadows',
-                    }),
-                  ),
-                  column.render('Header'),
-                  (showFilterButton(column) || showSortButton(column)) &&
                     React.createElement(
-                      Box,
-                      {
-                        className: 'iui-table-header-actions-container',
-                        onKeyDown: (e) => e.stopPropagation(),
-                        slot: 'actions',
-                      },
-                      showFilterButton(column) &&
-                        React.createElement(FilterToggle, {
-                          column: column,
-                        }),
-                      showSortButton(column) &&
-                        React.createElement(
-                          Box,
-                          {
-                            className: 'iui-table-cell-end-icon',
-                          },
-                          column.isSortedDesc ||
-                            (!column.isSorted && column.sortDescFirst)
-                            ? React.createElement(SvgSortDown, {
-                                className: 'iui-table-sort',
-                                'aria-hidden': true,
-                              })
-                            : React.createElement(SvgSortUp, {
-                                className: 'iui-table-sort',
-                                'aria-hidden': true,
-                              }),
-                        ),
+                      ShadowRoot,
+                      null,
+                      'string' == typeof column.Header
+                        ? React.createElement(
+                            LineClamp,
+                            null,
+                            React.createElement('slot', null),
+                          )
+                        : React.createElement('slot', null),
+                      React.createElement('slot', {
+                        name: 'actions',
+                      }),
+                      React.createElement('slot', {
+                        name: 'resizers',
+                      }),
+                      React.createElement('slot', {
+                        name: 'shadows',
+                      }),
                     ),
-                  isResizable &&
-                    column.isResizerVisible &&
-                    (index !== headerGroup.headers.length - 1 ||
-                      columnResizeMode === 'expand') &&
-                    React.createElement(
-                      Box,
-                      {
-                        ...column.getResizerProps(),
-                        className: 'iui-table-resizer',
+                    column.render('Header'),
+                    (showFilterButton(column) || showSortButton(column)) &&
+                      React.createElement(
+                        Box,
+                        {
+                          className: 'iui-table-header-actions-container',
+                          onKeyDown: (e) => e.stopPropagation(),
+                          slot: 'actions',
+                        },
+                        showFilterButton(column) &&
+                          React.createElement(FilterToggle, {
+                            column: column,
+                          }),
+                        showSortButton(column) &&
+                          React.createElement(
+                            Box,
+                            {
+                              className: 'iui-table-cell-end-icon',
+                            },
+                            column.isSortedDesc ||
+                              (!column.isSorted && column.sortDescFirst)
+                              ? React.createElement(SvgSortDown, {
+                                  className: 'iui-table-sort',
+                                  'aria-hidden': true,
+                                })
+                              : React.createElement(SvgSortUp, {
+                                  className: 'iui-table-sort',
+                                  'aria-hidden': true,
+                                }),
+                          ),
+                      ),
+                    isResizable &&
+                      column.isResizerVisible &&
+                      (index !== headerGroup.headers.length - 1 ||
+                        'expand' === columnResizeMode) &&
+                      React.createElement(
+                        Box,
+                        {
+                          ...column.getResizerProps(),
+                          className: 'iui-table-resizer',
+                          slot: 'resizers',
+                        },
+                        React.createElement(Box, {
+                          className: 'iui-table-resizer-bar',
+                        }),
+                      ),
+                    enableColumnReordering &&
+                      !column.disableReordering &&
+                      React.createElement(Box, {
+                        className: 'iui-table-reorder-bar',
                         slot: 'resizers',
-                      },
+                      }),
+                    'left' === column.sticky &&
+                      state.sticky.isScrolledToRight &&
                       React.createElement(Box, {
-                        className: 'iui-table-resizer-bar',
+                        className: 'iui-table-cell-shadow-right',
+                        slot: 'shadows',
                       }),
-                    ),
-                  enableColumnReordering &&
-                    !column.disableReordering &&
-                    React.createElement(Box, {
-                      className: 'iui-table-reorder-bar',
-                      slot: 'resizers',
-                    }),
-                  column.sticky === 'left' &&
-                    state.sticky.isScrolledToRight &&
-                    React.createElement(Box, {
-                      className: 'iui-table-cell-shadow-right',
-                      slot: 'shadows',
-                    }),
-                  column.sticky === 'right' &&
-                    state.sticky.isScrolledToLeft &&
-                    React.createElement(Box, {
-                      className: 'iui-table-cell-shadow-left',
-                      slot: 'shadows',
-                    }),
+                    'right' === column.sticky &&
+                      state.sticky.isScrolledToLeft &&
+                      React.createElement(Box, {
+                        className: 'iui-table-cell-shadow-left',
+                        slot: 'shadows',
+                      }),
+                  ),
                 );
               }),
             ),
@@ -769,7 +758,7 @@ export const Table = (props) => {
             className: cx(
               'iui-table-body',
               {
-                'iui-zebra-striping': styleType === 'zebra-rows',
+                'iui-zebra-striping': 'zebra-rows' === styleType,
               },
               bodyProps?.className,
             ),
@@ -779,22 +768,46 @@ export const Table = (props) => {
           }),
           tabIndex: -1,
           'aria-multiselectable':
-            (isSelectable && selectionMode === 'multi') || undefined,
+            (isSelectable && 'multi' === selectionMode) || void 0,
         },
-        data.length !== 0 &&
+        React.createElement(
+          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, {
-                  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(
             Box,
             {
@@ -810,7 +823,7 @@ export const Table = (props) => {
             }),
           ),
         !isLoading &&
-          data.length === 0 &&
+          0 === data.length &&
           !areFiltersSet &&
           React.createElement(
             Box,
@@ -825,7 +838,7 @@ export const Table = (props) => {
             React.createElement('div', null, emptyTableContent),
           ),
         !isLoading &&
-          (data.length === 0 || rows.length === 0) &&
+          (0 === data.length || 0 === rows.length) &&
           areFiltersSet &&
           React.createElement(
             Box,
@@ -841,7 +854,7 @@ export const Table = (props) => {
           ),
       ),
       isLoading &&
-        data.length !== 0 &&
+        0 !== data.length &&
         React.createElement(
           Box,
           {