@servicetitan/anvil2 2.9.0 → 2.9.1

package/dist/{DataTable-BCV_mtSy.js → DataTable-JRxu2yTP.js}

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { C as Chip } from './Chip-Ce0WGKAc.js';
 import { F as Flex } from './Flex-WyyZm1bf.js';
 import * as React from 'react';
-import { useRef, useState, useLayoutEffect, createContext, useContext, useCallback, forwardRef, useMemo, useImperativeHandle, useEffect, useId, Fragment as Fragment$1, isValidElement, useReducer } from 'react';
+import { useRef, useState, useLayoutEffect, createContext, useContext, useCallback, forwardRef, useMemo, useImperativeHandle, useEffect, useId, memo as memo$1, Fragment as Fragment$1, isValidElement } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
 import { D as DateTime } from './luxon-wpz4A-OQ.js';
 import { C as Checkbox } from './Checkbox-Cw1-KFvq.js';
@@ -21,8 +21,9 @@ import { S as SvgWarning } from './warning-c4Wj1rI4.js';
 import { T as Tooltip } from './Tooltip-C1PBRnJv.js';
 import { flushSync } from 'react-dom';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
-import { P as Pagination } from './Pagination-DecGSuW4.js';
+import { P as Pagination } from './Pagination-B5jqHYG3.js';
 import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
+import { u as useVirtualizer } from './index-DXeGMe23.js';
 import { S as Spinner } from './Spinner-BqmcE2pb.js';
 import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
 import { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
@@ -1192,7 +1193,7 @@ const createRow = (table, id, original, rowIndex, depth, subRows, parentId) => {
       var _row$getValue;
       return (_row$getValue = row.getValue(columnId)) != null ? _row$getValue : table.options.renderFallbackValue;
     },
-    subRows: subRows != null ? subRows : [],
+    subRows: [],
     getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
     getParentRow: () => row.parentId ? table.getRow(row.parentId, true) : undefined,
     getParentRows: () => {
@@ -3657,146 +3658,6 @@ function expandRows(rowModel) {
   };
 }
 
-function getGroupedRowModel() {
-  return table => memo(() => [table.getState().grouping, table.getPreGroupedRowModel()], (grouping, rowModel) => {
-    if (!rowModel.rows.length || !grouping.length) {
-      rowModel.rows.forEach(row => {
-        row.depth = 0;
-        row.parentId = undefined;
-      });
-      return rowModel;
-    }
-
-    // Filter the grouping list down to columns that exist
-    const existingGrouping = grouping.filter(columnId => table.getColumn(columnId));
-    const groupedFlatRows = [];
-    const groupedRowsById = {};
-    // const onlyGroupedFlatRows: Row[] = [];
-    // const onlyGroupedRowsById: Record<RowId, Row> = {};
-    // const nonGroupedFlatRows: Row[] = [];
-    // const nonGroupedRowsById: Record<RowId, Row> = {};
-
-    // Recursively group the data
-    const groupUpRecursively = function (rows, depth, parentId) {
-      if (depth === void 0) {
-        depth = 0;
-      }
-      // Grouping depth has been been met
-      // Stop grouping and simply rewrite thd depth and row relationships
-      if (depth >= existingGrouping.length) {
-        return rows.map(row => {
-          row.depth = depth;
-          groupedFlatRows.push(row);
-          groupedRowsById[row.id] = row;
-          if (row.subRows) {
-            row.subRows = groupUpRecursively(row.subRows, depth + 1, row.id);
-          }
-          return row;
-        });
-      }
-      const columnId = existingGrouping[depth];
-
-      // Group the rows together for this level
-      const rowGroupsMap = groupBy(rows, columnId);
-
-      // Perform aggregations for each group
-      const aggregatedGroupedRows = Array.from(rowGroupsMap.entries()).map((_ref, index) => {
-        let [groupingValue, groupedRows] = _ref;
-        let id = `${columnId}:${groupingValue}`;
-        id = parentId ? `${parentId}>${id}` : id;
-
-        // First, Recurse to group sub rows before aggregation
-        const subRows = groupUpRecursively(groupedRows, depth + 1, id);
-        subRows.forEach(subRow => {
-          subRow.parentId = id;
-        });
-
-        // Flatten the leaf rows of the rows in this group
-        const leafRows = depth ? flattenBy(groupedRows, row => row.subRows) : groupedRows;
-        const row = createRow(table, id, leafRows[0].original, index, depth, undefined, parentId);
-        Object.assign(row, {
-          groupingColumnId: columnId,
-          groupingValue,
-          subRows,
-          leafRows,
-          getValue: columnId => {
-            // Don't aggregate columns that are in the grouping
-            if (existingGrouping.includes(columnId)) {
-              if (row._valuesCache.hasOwnProperty(columnId)) {
-                return row._valuesCache[columnId];
-              }
-              if (groupedRows[0]) {
-                var _groupedRows$0$getVal;
-                row._valuesCache[columnId] = (_groupedRows$0$getVal = groupedRows[0].getValue(columnId)) != null ? _groupedRows$0$getVal : undefined;
-              }
-              return row._valuesCache[columnId];
-            }
-            if (row._groupingValuesCache.hasOwnProperty(columnId)) {
-              return row._groupingValuesCache[columnId];
-            }
-
-            // Aggregate the values
-            const column = table.getColumn(columnId);
-            const aggregateFn = column == null ? void 0 : column.getAggregationFn();
-            if (aggregateFn) {
-              row._groupingValuesCache[columnId] = aggregateFn(columnId, leafRows, groupedRows);
-              return row._groupingValuesCache[columnId];
-            }
-          }
-        });
-        subRows.forEach(subRow => {
-          groupedFlatRows.push(subRow);
-          groupedRowsById[subRow.id] = subRow;
-          // if (subRow.getIsGrouped?.()) {
-          //   onlyGroupedFlatRows.push(subRow);
-          //   onlyGroupedRowsById[subRow.id] = subRow;
-          // } else {
-          //   nonGroupedFlatRows.push(subRow);
-          //   nonGroupedRowsById[subRow.id] = subRow;
-          // }
-        });
-        return row;
-      });
-      return aggregatedGroupedRows;
-    };
-    const groupedRows = groupUpRecursively(rowModel.rows, 0);
-    groupedRows.forEach(subRow => {
-      groupedFlatRows.push(subRow);
-      groupedRowsById[subRow.id] = subRow;
-      // if (subRow.getIsGrouped?.()) {
-      //   onlyGroupedFlatRows.push(subRow);
-      //   onlyGroupedRowsById[subRow.id] = subRow;
-      // } else {
-      //   nonGroupedFlatRows.push(subRow);
-      //   nonGroupedRowsById[subRow.id] = subRow;
-      // }
-    });
-    return {
-      rows: groupedRows,
-      flatRows: groupedFlatRows,
-      rowsById: groupedRowsById
-    };
-  }, getMemoOptions(table.options, 'debugTable', 'getGroupedRowModel', () => {
-    table._queue(() => {
-      table._autoResetExpanded();
-      table._autoResetPageIndex();
-    });
-  }));
-}
-function groupBy(rows, columnId) {
-  const groupMap = new Map();
-  return rows.reduce((map, row) => {
-    const resKey = `${row.getGroupingValue(columnId)}`;
-    const previous = map.get(resKey);
-    if (!previous) {
-      map.set(resKey, [row]);
-    } else {
-      previous.push(row);
-    }
-    return map;
-  }, groupMap);
-}
-
 function getPaginationRowModel(opts) {
   return table => memo(() => [table.getState().pagination, table.getPrePaginationRowModel(), table.options.paginateExpandedRows ? undefined : table.getState().expanded], (pagination, rowModel) => {
     if (!rowModel.rows.length) {
@@ -4059,8 +3920,8 @@ function useDTFocusDispatchContext() {
 }
 
 const styles$c = {
-	"table-base": "_table-base_11xh7_2",
-	"data-table-base": "_data-table-base_11xh7_15"
+	"table-base": "_table-base_1ihr3_2",
+	"data-table-base": "_data-table-base_1ihr3_15"
 };
 
 const SimpleTableBase = ({
@@ -4088,7 +3949,7 @@ const DataTableBase = ({
   ...rest
 }) => {
   const tableBaseClassNames = cx(className, styles$c["data-table-base"]);
-  const { focusTableGenerally, blur } = useDTFocusDispatchContext();
+  const { focusTableGenerally, blur, moveFocusToCell } = useDTFocusDispatchContext();
   const handleBlur = (event) => {
     if (!event.currentTarget.contains(event.relatedTarget)) {
       blur();
@@ -4097,6 +3958,16 @@ const DataTableBase = ({
   const handleFocus = (event) => {
     if (event.target === event.currentTarget) {
       focusTableGenerally();
+      return;
+    }
+    const targetEl = event.target;
+    const cellEl = targetEl.closest("[data-cell-pos]");
+    const cellPosAttr = cellEl?.getAttribute("data-cell-pos");
+    if (cellPosAttr) {
+      const [rowIndex, columnIndex] = cellPosAttr.split(",").map(Number);
+      if (!Number.isNaN(rowIndex) && !Number.isNaN(columnIndex)) {
+        moveFocusToCell({ rowIndex, columnIndex });
+      }
     }
   };
   return /* @__PURE__ */ jsx(
@@ -4200,19 +4071,19 @@ const TableBodyCell = forwardRef(({ type, children, className, isExpandCell, isS
 TableBodyCell.displayName = "TableBodyCell";
 
 const styles$9 = {
-	"data-table-body-cell": "_data-table-body-cell_l8lyo_2",
-	"data-table-body-cell-input": "_data-table-body-cell-input_l8lyo_3",
-	"table-body-cell": "_table-body-cell_l8lyo_18",
-	"table-header-cell": "_table-header-cell_l8lyo_19",
-	"table-footer-cell": "_table-footer-cell_l8lyo_20",
-	"data-table-body-cell-editing": "_data-table-body-cell-editing_l8lyo_32",
-	"data-table-header-cell": "_data-table-header-cell_l8lyo_33",
-	"data-table-footer-cell": "_data-table-footer-cell_l8lyo_36",
-	"data-table-body-cell-hovered": "_data-table-body-cell-hovered_l8lyo_82",
-	"data-table-body-cell-error": "_data-table-body-cell-error_l8lyo_85",
-	"data-table-body-cell-warning": "_data-table-body-cell-warning_l8lyo_102",
-	"cell-error-icon": "_cell-error-icon_l8lyo_111",
-	"cell-warning-icon": "_cell-warning-icon_l8lyo_112"
+	"data-table-body-cell": "_data-table-body-cell_ab20z_2",
+	"data-table-body-cell-input": "_data-table-body-cell-input_ab20z_3",
+	"table-body-cell": "_table-body-cell_ab20z_18",
+	"table-header-cell": "_table-header-cell_ab20z_19",
+	"table-footer-cell": "_table-footer-cell_ab20z_20",
+	"data-table-cell-content": "_data-table-cell-content_ab20z_30",
+	"data-table-body-cell-editing": "_data-table-body-cell-editing_ab20z_51",
+	"data-table-header-cell": "_data-table-header-cell_ab20z_52",
+	"data-table-footer-cell": "_data-table-footer-cell_ab20z_55",
+	"data-table-body-cell-error": "_data-table-body-cell-error_ab20z_104",
+	"data-table-body-cell-warning": "_data-table-body-cell-warning_ab20z_121",
+	"cell-error-icon": "_cell-error-icon_ab20z_130",
+	"cell-warning-icon": "_cell-warning-icon_ab20z_131"
 };
 
 function formatCellPositionString(cellPosition) {
@@ -4259,37 +4130,33 @@ const getCommonPinningStyles = (column) => {
     zIndex: isPinned ? 1 : 0
   };
 };
+const EMPTY_PINNING_STYLES = Object.freeze({
+  left: void 0,
+  right: void 0,
+  position: "relative",
+  zIndex: 0
+});
 const useCommonPinningStyles = (column) => {
+  const isPinned = column.getIsPinned();
   const left = column.getStart("left");
   const right = column.getAfter("right");
-  const isPinned = column.getIsPinned();
-  return useMemo(
-    () => ({
+  return useMemo(() => {
+    if (!isPinned) return EMPTY_PINNING_STYLES;
+    return {
       left: isPinned === "left" ? `${left}px` : void 0,
       right: isPinned === "right" ? `${right}px` : void 0,
-      position: isPinned ? "sticky" : "relative",
-      zIndex: isPinned ? 1 : 0
-    }),
-    [left, right, isPinned]
-  );
+      position: "sticky",
+      zIndex: 1
+    };
+  }, [left, right, isPinned]);
 };
 
 const INTERNAL_ROW_ACTION_PRIMARY_COLUMN_ID = "a2-table-internal-row-action-primary";
 const INTERNAL_ROW_ACTION_SECONDARY_COLUMN_ID = "a2-table-internal-row-action-secondary";
 
-const CellFocusContext = createContext(
-  null
-);
-function useCellFocusContext() {
-  return useContext(CellFocusContext);
-}
-
 function DataTableBodyImmutableCell(props) {
-  const { cell, cellPosition, children, isHovered, ...rest } = props;
+  const { cell, cellPosition, children, ...rest } = props;
   const cellRef = useRef(null);
-  const [tabIndex, setTabIndex] = useState(-1);
-  const [isFocused, setIsFocused] = useState(false);
-  const { moveFocusToCell } = useDTFocusDispatchContext();
   const column = cell.column;
   const rowCanExpand = cell.row.getCanExpand();
   const rowIsExpanded = cell.row.getIsExpanded();
@@ -4304,7 +4171,6 @@ function DataTableBodyImmutableCell(props) {
   const cellError = meta?.errors?.[column.id];
   const cellWarning = meta?.warnings?.[column.id];
   const classes = cx(styles$9["data-table-body-cell"], rest.className, {
-    [styles$9["data-table-body-cell-hovered"]]: isHovered,
     [styles$9["data-table-body-cell-error"]]: !!cellError,
     [styles$9["data-table-body-cell-warning"]]: !cellError && !!cellWarning,
     [styles$f["table-cell-internal-expand"]]: isExpandCell,
@@ -4376,19 +4242,6 @@ function DataTableBodyImmutableCell(props) {
       toggleRowExpanded
     ]
   );
-  const handleFocus = useCallback(() => {
-    setTabIndex(0);
-    setIsFocused(true);
-    moveFocusToCell(cellPosition);
-  }, [moveFocusToCell, cellPosition]);
-  const handleBlur = useCallback(() => {
-    setTabIndex(-1);
-    setIsFocused(false);
-  }, []);
-  const cellFocusContextValue = useMemo(
-    () => ({ isCellFocused: isFocused }),
-    [isFocused]
-  );
   return /* @__PURE__ */ jsx(
     TableBodyCell,
     {
@@ -4396,13 +4249,11 @@ function DataTableBodyImmutableCell(props) {
       ...rest,
       className: classes,
       ref: cellRef,
-      tabIndex,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
+      tabIndex: -1,
       style: commonPinningStyles,
       onKeyDown: handleKeyDown,
       "data-cell-pos": formatCellPositionString(cellPosition),
-      children: /* @__PURE__ */ jsx(CellFocusContext.Provider, { value: cellFocusContextValue, children })
+      children
     }
   );
 }
@@ -4531,10 +4382,6 @@ function DataTableEditableTextCellInner(props, ref) {
     },
     [beginEditing, cellPosition, moveFocusToCell]
   );
-  const cellFocusContextValue = useMemo(
-    () => ({ isCellFocused: tabIndex === 0 && !isEditing }),
-    [tabIndex, isEditing]
-  );
   useEffect(() => {
     if (isEditing) {
       inputRef.current?.focus();
@@ -4570,7 +4417,7 @@ function DataTableEditableTextCellInner(props, ref) {
             onBlur: handleInputBlur,
             onKeyDown: handleInputKeyDown
           }
-        ) }) : /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
+        ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           children,
           !isEditing && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
         ] }),
@@ -4729,10 +4576,6 @@ function DataTableEditableNumberCellInner(props, ref) {
     },
     [beginEditing, cellPosition, moveFocusToCell]
   );
-  const cellFocusContextValue = useMemo(
-    () => ({ isCellFocused: tabIndex === 0 && !isEditing }),
-    [tabIndex, isEditing]
-  );
   useEffect(() => {
     if (isEditing) {
       localInputRef.current?.focus();
@@ -4768,7 +4611,7 @@ function DataTableEditableNumberCellInner(props, ref) {
             onBlur: handleInputBlur,
             onKeyDown: handleInputKeyDown
           }
-        ) }) : /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
+        ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           children,
           !isEditing && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
         ] }),
@@ -4846,10 +4689,6 @@ function useEditableMenuCell({
     },
     []
   );
-  const cellFocusContextValue = useMemo(
-    () => ({ isCellFocused: tabIndex === 0 }),
-    [tabIndex]
-  );
   return {
     tabIndex,
     cellRef,
@@ -4859,8 +4698,7 @@ function useEditableMenuCell({
     handleImplicitClose,
     handleCellMouseDown,
     handleCellBlur,
-    handleCellFocus,
-    cellFocusContextValue
+    handleCellFocus
   };
 }
 
@@ -4897,8 +4735,7 @@ function DataTableEditableSelectCellInner(props, ref) {
     handleImplicitClose,
     handleCellMouseDown,
     handleCellBlur,
-    handleCellFocus,
-    cellFocusContextValue
+    handleCellFocus
   } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
   const selectedOption = useMemo(() => {
     if (cellValue === void 0 || cellValue === null) return null;
@@ -4944,10 +4781,8 @@ function DataTableEditableSelectCellInner(props, ref) {
             "data-state": dataState,
             onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
             children: [
-              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
-                children,
-                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
-              ] }),
+              children,
+              !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {}),
               /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select a cell value. Press Escape or F2 to cancel." : "Press Enter or F2 to edit cell value." })
             ]
           }
@@ -5041,8 +4876,7 @@ function DataTableEditableSelectAsyncCellInner(props, ref) {
     handleImplicitClose,
     handleCellMouseDown,
     handleCellBlur,
-    handleCellFocus,
-    cellFocusContextValue
+    handleCellFocus
   } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
   const selectedOption = useMemo(() => {
     if (cellValue === void 0 || cellValue === null) return null;
@@ -5093,10 +4927,8 @@ function DataTableEditableSelectAsyncCellInner(props, ref) {
             "data-state": dataState,
             onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
             children: [
-              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
-                children,
-                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
-              ] }),
+              children,
+              !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {}),
               /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select a cell value. Press Escape or F2 to cancel." : "Press Enter or F2 to edit cell value." })
             ]
           }
@@ -5159,8 +4991,7 @@ function DataTableEditableMultiselectCellInner(props, ref) {
     handleImplicitClose,
     handleCellMouseDown,
     handleCellBlur,
-    handleCellFocus,
-    cellFocusContextValue
+    handleCellFocus
   } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
   const selectedOptions = useMemo(() => {
     if (!Array.isArray(cellValue)) return [];
@@ -5207,10 +5038,8 @@ function DataTableEditableMultiselectCellInner(props, ref) {
             "data-state": dataState,
             onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
             children: [
-              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
-                children,
-                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
-              ] }),
+              children,
+              !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {}),
               /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select cell values. Press Escape or F2 to close." : "Press Enter or F2 to edit cell value." })
             ]
           }
@@ -5305,8 +5134,7 @@ function DataTableEditableMultiselectAsyncCellInner(props, ref) {
     handleImplicitClose,
     handleCellMouseDown,
     handleCellBlur,
-    handleCellFocus,
-    cellFocusContextValue
+    handleCellFocus
   } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
   const selectedOptions = useMemo(() => {
     if (!Array.isArray(cellValue)) return [];
@@ -5356,10 +5184,8 @@ function DataTableEditableMultiselectAsyncCellInner(props, ref) {
             "data-state": dataState,
             onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
             children: [
-              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
-                children,
-                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
-              ] }),
+              children,
+              !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {}),
               /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select cell values. Press Escape or F2 to close." : "Press Enter or F2 to edit cell value." })
             ]
           }
@@ -5450,8 +5276,7 @@ function DataTableEditableBooleanCellInner(props, ref) {
     handleImplicitClose,
     handleCellMouseDown,
     handleCellBlur,
-    handleCellFocus,
-    cellFocusContextValue
+    handleCellFocus
   } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
   const selectedOption = useMemo(() => {
     if (cellValue === void 0) return null;
@@ -5496,10 +5321,8 @@ function DataTableEditableBooleanCellInner(props, ref) {
             "data-state": dataState,
             onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
             children: [
-              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
-                children,
-                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
-              ] }),
+              children,
+              !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {}),
               /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select a cell value. Press Escape or F2 to cancel." : "Press Enter or F2 to edit cell value." })
             ]
           }
@@ -5529,7 +5352,7 @@ const DataTableEditableBooleanCell = Object.assign(
 );
 
 function DataTableBodyMutableCell(props) {
-  const { cell, cellPosition, children, isHovered, ...rest } = props;
+  const { cell, cellPosition, children, ...rest } = props;
   const editableCellRef = useRef(null);
   const column = cell.column;
   const rowCanExpand = cell.row.getCanExpand();
@@ -5539,7 +5362,6 @@ function DataTableBodyMutableCell(props) {
   const cellError = meta?.errors?.[column.id];
   const cellWarning = meta?.warnings?.[column.id];
   const classes = cx(styles$9["data-table-body-cell"], rest.className, {
-    [styles$9["data-table-body-cell-hovered"]]: isHovered,
     [styles$9["data-table-body-cell-error"]]: !!cellError,
     [styles$9["data-table-body-cell-warning"]]: !cellError && !!cellWarning
   });
@@ -5632,14 +5454,13 @@ function DataTableBodyMutableCell(props) {
         onKeyDown: handleKeyDown,
         style: commonPinningStyles
       },
-      isHovered,
       children
     }
   );
 }
 
 function DataTableBodyCell(props) {
-  const { cell, cellPosition, children, isHovered, ...rest } = props;
+  const { cell, cellPosition, children, ...rest } = props;
   const column = cell.column;
   const editMode = column.columnDef.meta?.editMode;
   const Component = editMode ? DataTableBodyMutableCell : DataTableBodyImmutableCell;
@@ -5650,51 +5471,34 @@ function DataTableBodyCell(props) {
       cellPosition,
       ...rest,
       "data-cell-pos": formatCellPositionString(cellPosition),
-      isHovered,
       children
     }
   );
 }
 
 const styles$8 = {
-	"data-table-body-row": "_data-table-body-row_3jgem_2",
-	"data-table-body-sub-component-row": "_data-table-body-sub-component-row_3jgem_22",
-	"data-table-body-sub-component-container": "_data-table-body-sub-component-container_3jgem_26",
-	"data-table-body-sub-component-content": "_data-table-body-sub-component-content_3jgem_31",
-	"data-table-body-cell-group": "_data-table-body-cell-group_3jgem_37"
+	"data-table-body-row": "_data-table-body-row_1lv2u_2",
+	"data-table-body-sub-component-row": "_data-table-body-sub-component-row_1lv2u_22",
+	"data-table-body-sub-component-container": "_data-table-body-sub-component-container_1lv2u_26",
+	"data-table-body-sub-component-content": "_data-table-body-sub-component-content_1lv2u_31",
+	"data-table-body-virtualized": "_data-table-body-virtualized_1lv2u_35",
+	"data-table-body-row-virtualized": "_data-table-body-row-virtualized_1lv2u_40",
+	"data-table-body-cell-group": "_data-table-body-cell-group_1lv2u_50"
 };
 
-const DTHoverStateContext = createContext({
-  hoveredColumnId: null,
-  resizingColumnId: null
-});
-const DTHoverDispatchContext = createContext(() => {
-});
-
-function useDTHoverStateContext() {
-  const state = useContext(DTHoverStateContext);
-  return {
-    getIsHovered: (columnId) => {
-      return state.hoveredColumnId === columnId && !state.resizingColumnId;
-    },
-    hoveredColumnId: state.hoveredColumnId
-  };
-}
-
-function DataTableBodyRow({
+function DataTableBodyRowInner({
   columnOrder,
   row,
   rowIndex,
-  tableHasSubRows
+  tableHasSubRows,
+  isExpanded,
+  canExpand,
+  depth,
+  parentRowCanExpand
 }) {
   const visibleCells = row.getVisibleCells();
-  const canExpand = row.getCanExpand();
-  const isExpanded = row.getIsExpanded();
-  const depth = row.depth;
   const id = row.id;
   const original = row.original;
-  const parentRowCanExpand = row.getParentRow()?.getCanExpand() ?? false;
-  const { hoveredColumnId } = useDTHoverStateContext();
   const { focusSubComponent, blurSubComponent } = useDTFocusDispatchContext();
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
@@ -5718,7 +5522,7 @@ function DataTableBodyRow({
               cellPosition: { rowIndex, columnIndex },
               "aria-colindex": columnIndex + 1,
               className: cellClasses,
-              isHovered: hoveredColumnId === cell.column.id,
+              "data-anv-column-id": cell.column.id,
               children: flexRender(cell.column.columnDef.cell, cell.getContext())
             },
             cell.id
@@ -5743,6 +5547,17 @@ function DataTableBodyRow({
     )
   ] }, row.id);
 }
+function areRowPropsEqual(prev, next) {
+  const getRowVersion = next.getRowVersion;
+  if (!getRowVersion) {
+    return false;
+  }
+  return prev.row.id === next.row.id && getRowVersion(prev.row.original) === getRowVersion(next.row.original) && prev.rowIndex === next.rowIndex && prev.isExpanded === next.isExpanded && prev.canExpand === next.canExpand && prev.depth === next.depth && prev.parentRowCanExpand === next.parentRowCanExpand && prev.tableHasSubRows === next.tableHasSubRows && prev.columnOrder === next.columnOrder && prev.isSelected === next.isSelected && prev.isSomeSelected === next.isSomeSelected;
+}
+const DataTableBodyRow = memo$1(
+  DataTableBodyRowInner,
+  areRowPropsEqual
+);
 
 const useColumnOrder = ({ table }) => {
   const getColumnIndexes = useCallback((column) => {
@@ -5771,25 +5586,104 @@ const useColumnOrder = ({ table }) => {
   };
 };
 
-const DataTableBodyContent = ({
+function NonVirtualizedContent({
   table,
-  hasSubRows
-}) => {
+  hasSubRows,
+  getRowVersion
+}) {
   const { columnOrder } = useColumnOrder({ table });
-  return table.getRowModel().rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+  const headerCount = table.getHeaderGroups().length;
+  return /* @__PURE__ */ jsx(Fragment, { children: table.getRowModel().rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
     DataTableBodyRow,
     {
       columnOrder,
       row,
-      rowIndex: rowIndex + table.getHeaderGroups().length,
-      tableHasSubRows: hasSubRows
+      rowIndex: rowIndex + headerCount,
+      tableHasSubRows: hasSubRows,
+      isExpanded: row.getIsExpanded(),
+      canExpand: row.getCanExpand(),
+      depth: row.depth,
+      parentRowCanExpand: row.getParentRow()?.getCanExpand() ?? false,
+      isSelected: row.getIsSelected(),
+      isSomeSelected: row.getIsSomeSelected(),
+      getRowVersion
     },
     row.id
-  ));
-};
+  )) });
+}
+function VirtualizedContent({
+  table,
+  hasSubRows,
+  virtualizer,
+  getRowVersion
+}) {
+  const { columnOrder } = useColumnOrder({ table });
+  const headerCount = table.getHeaderGroups().length;
+  const rows = table.getRowModel().rows;
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const measureRef = useMemo(
+    () => (el) => {
+      if (el) virtualizer.measureElement(el);
+    },
+    [virtualizer]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles$8["data-table-body-virtualized"],
+      "data-virtualized-body": "true",
+      style: { height: `${totalSize}px` },
+      children: virtualItems.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: measureRef,
+            "data-index": virtualRow.index,
+            className: styles$8["data-table-body-row-virtualized"],
+            style: { transform: `translateY(${virtualRow.start}px)` },
+            children: /* @__PURE__ */ jsx(
+              DataTableBodyRow,
+              {
+                columnOrder,
+                row,
+                rowIndex: virtualRow.index + headerCount,
+                tableHasSubRows: hasSubRows,
+                isExpanded: row.getIsExpanded(),
+                canExpand: row.getCanExpand(),
+                depth: row.depth,
+                parentRowCanExpand: row.getParentRow()?.getCanExpand() ?? false,
+                isSelected: row.getIsSelected(),
+                isSomeSelected: row.getIsSomeSelected(),
+                getRowVersion
+              }
+            )
+          },
+          row.id
+        );
+      })
+    }
+  );
+}
 function DataTableBody(props) {
-  const { table, hasSubRows, ...rest } = props;
-  return /* @__PURE__ */ jsx(TableBody, { type: "data-table", ...rest, children: /* @__PURE__ */ jsx(DataTableBodyContent, { table, hasSubRows }) });
+  const { table, hasSubRows, virtualizer, getRowVersion, ...rest } = props;
+  return /* @__PURE__ */ jsx(TableBody, { type: "data-table", ...rest, children: virtualizer ? /* @__PURE__ */ jsx(
+    VirtualizedContent,
+    {
+      table,
+      hasSubRows,
+      virtualizer,
+      getRowVersion
+    }
+  ) : /* @__PURE__ */ jsx(
+    NonVirtualizedContent,
+    {
+      table,
+      hasSubRows,
+      getRowVersion
+    }
+  ) });
 }
 
 const styles$7 = {
@@ -5829,16 +5723,7 @@ TableFooterCell.displayName = "TableFooterCell";
 
 function DataTableFooterCell(props) {
   const { cellPosition, children, className, ...rest } = props;
-  const [tabIndex, setTabIndex] = useState(-1);
   const footerCellRef = useRef(null);
-  const { moveFocusToCell } = useDTFocusDispatchContext();
-  const handleFocus = useCallback(() => {
-    moveFocusToCell(cellPosition);
-    setTabIndex(0);
-  }, [moveFocusToCell, cellPosition, setTabIndex]);
-  const handleBlur = useCallback(() => {
-    setTabIndex(-1);
-  }, [setTabIndex]);
   const { jumpFocus, moveFocus } = useDTFocusDispatchContext();
   const handleKeyDown = useCallback(
     (event) => {
@@ -5879,9 +5764,7 @@ function DataTableFooterCell(props) {
       type: "data-table",
       ...rest,
       ref: footerCellRef,
-      tabIndex,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
+      tabIndex: -1,
       onKeyDown: handleKeyDown,
       className: cx(styles$9["data-table-footer-cell"], className),
       "data-cell-pos": formatCellPositionString(cellPosition),
@@ -6036,6 +5919,27 @@ function DataTableFooter({
   ) : /* @__PURE__ */ jsx(DefaultTableFooterRows, { table, columns }) });
 }
 
+function useCellFocusListener(elementRef) {
+  const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
+    const el = elementRef.current;
+    if (!el) return;
+    const cell = el.closest('[data-anv="table-body-cell"]');
+    if (!cell) return;
+    const onFocusIn = () => setIsFocused(true);
+    const onFocusOut = (e) => {
+      if (!cell.contains(e.relatedTarget)) setIsFocused(false);
+    };
+    cell.addEventListener("focusin", onFocusIn);
+    cell.addEventListener("focusout", onFocusOut);
+    return () => {
+      cell.removeEventListener("focusin", onFocusIn);
+      cell.removeEventListener("focusout", onFocusOut);
+    };
+  }, [elementRef]);
+  return isFocused;
+}
+
 const variantConfig = {
   error: {
     icon: SvgError,
@@ -6050,7 +5954,8 @@ const variantConfig = {
 };
 function CellStatus({ status, variant }) {
   const message = typeof status === "string" ? status : void 0;
-  const cellFocusContext = useCellFocusContext();
+  const ref = useRef(null);
+  const isCellFocused = useCellFocusListener(ref);
   const [isHovered, setIsHovered] = useState(false);
   const config = variantConfig[variant];
   const icon = /* @__PURE__ */ jsx(
@@ -6062,13 +5967,14 @@ function CellStatus({ status, variant }) {
     }
   );
   if (!message) {
-    return icon;
+    return /* @__PURE__ */ jsx("span", { ref, children: icon });
   }
-  const isTooltipOpen = cellFocusContext?.isCellFocused || isHovered;
+  const isTooltipOpen = isCellFocused || isHovered;
   return /* @__PURE__ */ jsxs(Tooltip, { open: isTooltipOpen, children: [
     /* @__PURE__ */ jsx(
       Tooltip.Trigger,
       {
+        ref,
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: icon
@@ -6078,6 +5984,7 @@ function CellStatus({ status, variant }) {
   ] });
 }
 
+const sharedColumnHelper = createColumnHelper();
 function resolveHeaderAlign(align, isGroup = false) {
   if (isGroup) {
     return "start";
@@ -6168,10 +6075,9 @@ function getTanStackColumnDef({
   columnDef,
   emptyCellContent
 }) {
-  const columnHelper = createColumnHelper();
   const normalizedHeader = normalizeColumnHeader(columnDef);
   if (columnDef.columns && columnDef.columns.length > 0) {
-    return columnHelper.group({
+    return sharedColumnHelper.group({
       id: columnDef.id,
       header: () => renderColumnHeader(normalizedHeader, {
         align: columnDef.align,
@@ -6213,7 +6119,7 @@ function getTanStackColumnDef({
     ...columnDef,
     headerLabel: normalizedHeader.label
   };
-  return columnHelper.accessor((row) => row[columnDef.id], {
+  return sharedColumnHelper.accessor((row) => row[columnDef.id], {
     id: columnDef.id,
     cell: (info) => {
       const rawCellValue = info.row.original[columnDef.id];
@@ -6233,16 +6139,10 @@ function getTanStackColumnDef({
       const cellError = meta?.errors?.[columnDef.id];
       const cellWarning = meta?.warnings?.[columnDef.id];
       return /* @__PURE__ */ jsxs(
-        Flex,
+        "div",
         {
-          justifyContent: resolvedAlign,
-          alignItems: "center",
-          wrap: "wrap",
-          gap: "1",
-          style: {
-            width: "100%",
-            textAlign: resolvedAlign
-          },
+          className: styles$9["data-table-cell-content"],
+          "data-align": resolvedAlign ?? "start",
           children: [
             cellError ? /* @__PURE__ */ jsx(CellStatus, { status: cellError, variant: "error" }) : cellWarning ? /* @__PURE__ */ jsx(CellStatus, { status: cellWarning, variant: "warning" }) : null,
             cellContent ?? resolvedEmptyContent
@@ -6256,6 +6156,10 @@ function getTanStackColumnDef({
     footer: columnDef.footerContent ? () => columnDef.footerContent : void 0,
     minSize: columnDef.minWidth,
     maxSize: columnDef.maxWidth,
+    // TanStack's `size` is the column's starting width — we use `defaultWidth`
+    // when provided and fall back to `minWidth` so the auto-sizing basis
+    // matches the manual-resize floor by default.
+    size: columnDef.defaultWidth ?? columnDef.minWidth,
     enableResizing: columnDef.resizable,
     enableSorting: !!columnDef.sortable,
     meta: {
@@ -6281,12 +6185,20 @@ function getTanStackColumnDef({
   });
 }
 
+function shallowSortingEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].id !== b[i].id || a[i].desc !== b[i].desc) return false;
+  }
+  return true;
+}
+
 const SvgArrowUpward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M13 19V7.83l4.88 4.88c.39.39 1.03.39 1.42 0a.996.996 0 0 0 0-1.41l-6.59-6.59a.996.996 0 0 0-1.41 0l-6.6 6.58a.996.996 0 1 0 1.41 1.41L11 7.83V19c0 .55.45 1 1 1s1-.45 1-1z" }));
 
 const SvgArrowDownward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M11 5v11.17l-4.88-4.88c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 1 0-1.41-1.41L13 16.17V5c0-.55-.45-1-1-1s-1 .45-1 1z" }));
 
 const styles$5 = {
-	"table-header": "_table-header_y7cb1_2"
+	"table-header": "_table-header_nz2nu_2"
 };
 
 function TableHeader({ type, children, ...rest }) {
@@ -6369,15 +6281,6 @@ function DataTableHeaderCellInner(props, forwardedRef) {
     },
     [forwardedRef]
   );
-  const { moveFocusToCell } = useDTFocusDispatchContext();
-  const [tabIndex, setTabIndex] = useState(-1);
-  const handleFocus = useCallback(() => {
-    moveFocusToCell(cellPosition);
-    setTabIndex(0);
-  }, [moveFocusToCell, cellPosition, setTabIndex]);
-  const handleBlur = useCallback(() => {
-    setTabIndex(-1);
-  }, [setTabIndex]);
   const { jumpFocus, moveFocus } = useDTFocusDispatchContext();
   const columnId = header.column.id;
   const isExpandCell = columnId === INTERNAL_ROW_ACTION_PRIMARY_COLUMN_ID;
@@ -6470,10 +6373,8 @@ function DataTableHeaderCellInner(props, forwardedRef) {
       type: "data-table",
       ...rest,
       ref: setRefs,
-      tabIndex,
-      onFocus: handleFocus,
+      tabIndex: -1,
       onClick: handleClick,
-      onBlur: handleBlur,
       onKeyDown: handleKeyDown,
       className: cx(styles$9["data-table-header-cell"], className),
       "data-cell-pos": formatCellPositionString(cellPosition),
@@ -6528,13 +6429,9 @@ function ResizeHandle({
 }
 
 const styles$3 = {
-	"data-table-header-row": "_data-table-header-row_6qs0u_17"
+	"data-table-header-row": "_data-table-header-row_w353z_17"
 };
 
-function useDTHoverDispatchContext() {
-  return useContext(DTHoverDispatchContext);
-}
-
 function getHeaderContentAlign(align) {
   if (align === "center") {
     return "center";
@@ -6544,25 +6441,36 @@ function getHeaderContentAlign(align) {
   }
   return "flex-start";
 }
-function DataTableHeader({ table }) {
-  const dispatch = useDTHoverDispatchContext();
+function DataTableHeader({
+  table,
+  tableRef
+}) {
+  const getTableBase = useCallback(
+    () => tableRef.current?.querySelector(
+      '[data-anv="data-table-base"]'
+    ) ?? null,
+    [tableRef]
+  );
   const handleHoverColumn = useCallback(
     (columnId) => {
-      dispatch({
-        type: "HOVER_START",
-        payload: { columnId }
-      });
+      const base = getTableBase();
+      if (!base) return;
+      base.setAttribute("data-anv-hover-col", columnId);
+      base.querySelectorAll(`[data-anv-column-id="${CSS.escape(columnId)}"]`).forEach((el) => el.setAttribute("data-anv-is-hovered-col", "true"));
     },
-    [dispatch]
+    [getTableBase]
   );
   const handleHoverColumnLeave = useCallback(
     (columnId) => {
-      dispatch({
-        type: "HOVER_END",
-        payload: { columnId }
-      });
+      const base = getTableBase();
+      if (!base) return;
+      if (base.getAttribute("data-anv-hover-col") !== columnId) return;
+      base.removeAttribute("data-anv-hover-col");
+      base.querySelectorAll(
+        `[data-anv-column-id="${CSS.escape(columnId)}"][data-anv-is-hovered-col="true"]`
+      ).forEach((el) => el.removeAttribute("data-anv-is-hovered-col"));
     },
-    [dispatch]
+    [getTableBase]
   );
   const cellRefs = useRef(/* @__PURE__ */ new Map());
   const createResizeStartHandler = useCallback(
@@ -6580,15 +6488,6 @@ function DataTableHeader({ table }) {
     },
     [table]
   );
-  const handleResizeEnd = useCallback(
-    (columnId) => {
-      dispatch({
-        type: "RESIZE_END",
-        payload: { columnId }
-      });
-    },
-    [dispatch]
-  );
   const { columnOrder } = useColumnOrder({ table });
   return /* @__PURE__ */ jsx(TableHeader, { type: "data-table", children: table.getHeaderGroups().map((headerGroup, index) => /* @__PURE__ */ jsx(
     "div",
@@ -6620,6 +6519,7 @@ function DataTableHeader({ table }) {
               }
             },
             className: getCommonPinningClasses(header.column),
+            "data-anv-column-id": header.column.id,
             style: {
               gridColumn,
               ...getCommonPinningStyles(header.column)
@@ -6686,8 +6586,7 @@ function DataTableHeader({ table }) {
                       header,
                       onResizeStart: createResizeStartHandler(
                         header.column.id
-                      ),
-                      onResizeEnd: () => handleResizeEnd(header.column.id)
+                      )
                     }
                   )
                 ]
@@ -6703,8 +6602,8 @@ function DataTableHeader({ table }) {
 }
 
 const styles$2 = {
-	"table-container": "_table-container_z7onx_2",
-	"table-scroll-container": "_table-scroll-container_z7onx_57"
+	"table-container": "_table-container_vqc6w_2",
+	"table-scroll-container": "_table-scroll-container_vqc6w_57"
 };
 
 const TableContainer = forwardRef(
@@ -6857,49 +6756,6 @@ function usePageDataCache(config) {
   return { getOrLoad, clearCache };
 }
 
-function DTHoverProvider({ children }) {
-  const [state, dispatch] = useReducer(reducer$1, initialState$1);
-  return /* @__PURE__ */ jsx(DTHoverStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(DTHoverDispatchContext.Provider, { value: dispatch, children }) });
-}
-function reducer$1(state, action) {
-  switch (action.type) {
-    case "HOVER_START": {
-      return {
-        ...state,
-        hoveredColumnId: action.payload.columnId
-      };
-    }
-    case "HOVER_END": {
-      if (state.hoveredColumnId !== action.payload.columnId) {
-        return state;
-      }
-      return {
-        ...state,
-        hoveredColumnId: null
-      };
-    }
-    case "RESIZE_START": {
-      return {
-        ...state,
-        resizingColumnId: action.payload.columnId
-      };
-    }
-    case "RESIZE_END": {
-      return {
-        ...state,
-        resizingColumnId: null
-      };
-    }
-    default: {
-      throw new Error("Unknown action");
-    }
-  }
-}
-const initialState$1 = {
-  hoveredColumnId: null,
-  resizingColumnId: null
-};
-
 function scrollCellIntoView(element, stickyDimensions) {
   const isBodyCell = element.getAttribute("data-anv") === "table-body-cell";
   const scrollContainer = element.closest(
@@ -7085,9 +6941,32 @@ function DTFocusProvider({
   columnCount,
   tableRef,
   leftPinnedWidth,
-  rightPinnedWidth
+  rightPinnedWidth,
+  virtualizer,
+  headerRowCount
 }) {
   const stateRef = useRef(initialState);
+  const lastTabbablePosRef = useRef(null);
+  const syncRovingTabindex = useCallback(() => {
+    const restorePoint = stateRef.current.focusRestorePoint;
+    const prev = lastTabbablePosRef.current;
+    const nextEl = tableRef.current?.querySelector(
+      `[data-cell-pos="${formatCellPositionString(restorePoint)}"]`
+    );
+    const restorePointUnchanged = prev && prev.rowIndex === restorePoint.rowIndex && prev.columnIndex === restorePoint.columnIndex;
+    if (restorePointUnchanged && nextEl?.tabIndex === 0) {
+      return;
+    }
+    const prevEl = prev && !restorePointUnchanged ? tableRef.current?.querySelector(
+      `[data-cell-pos="${formatCellPositionString(prev)}"]`
+    ) : null;
+    if (prevEl) prevEl.tabIndex = -1;
+    if (nextEl) nextEl.tabIndex = 0;
+    lastTabbablePosRef.current = restorePoint;
+  }, [tableRef]);
+  useLayoutEffect(() => {
+    syncRovingTabindex();
+  }, [syncRovingTabindex, rowCount, columnCount]);
   const dispatch = useCallback(
     (action) => {
       const newState = reducer(stateRef.current, action, rowCount, columnCount);
@@ -7102,26 +6981,55 @@ function DTFocusProvider({
         }
       }
       stateRef.current = newState;
+      syncRovingTabindex();
       if (!newState.focusedCell || shouldSkipFocusUpdate) {
         return;
       }
-      const element = tableRef.current?.querySelector(
-        `[data-cell-pos="${formatCellPositionString(newState.focusedCell)}"]`
-      );
-      if (element) {
-        element.focus();
-        scrollCellIntoView(element, {
-          leftWidth: leftPinnedWidth,
-          rightWidth: rightPinnedWidth
-        });
-      } else {
-        dispatch({
-          type: "FOCUS_CELL_MANUALLY",
-          payload: { cellPosition: { rowIndex: 0, columnIndex: 0 } }
-        });
+      const focusTargetCell = () => {
+        if (!newState.focusedCell) return;
+        if (!areCellPositionsEqual(
+          newState.focusedCell,
+          stateRef.current.focusedCell
+        )) {
+          return;
+        }
+        const element = tableRef.current?.querySelector(
+          `[data-cell-pos="${formatCellPositionString(newState.focusedCell)}"]`
+        );
+        if (element) {
+          element.focus();
+          scrollCellIntoView(element, {
+            leftWidth: leftPinnedWidth,
+            rightWidth: rightPinnedWidth
+          });
+        } else {
+          dispatch({
+            type: "FOCUS_CELL_MANUALLY",
+            payload: { cellPosition: { rowIndex: 0, columnIndex: 0 } }
+          });
+        }
+      };
+      if (virtualizer && newState.focusedCell) {
+        const virtualRowIndex = newState.focusedCell.rowIndex - headerRowCount;
+        const bodyRowCount = virtualizer.options.count;
+        if (virtualRowIndex >= 0 && virtualRowIndex < bodyRowCount) {
+          virtualizer.scrollToIndex(virtualRowIndex, { align: "auto" });
+          requestAnimationFrame(focusTargetCell);
+          return;
+        }
       }
+      focusTargetCell();
     },
-    [rowCount, columnCount, tableRef, leftPinnedWidth, rightPinnedWidth]
+    [
+      rowCount,
+      columnCount,
+      tableRef,
+      leftPinnedWidth,
+      rightPinnedWidth,
+      syncRovingTabindex,
+      virtualizer,
+      headerRowCount
+    ]
   );
   const state = useMemo(
     () => ({ getFocusedCell: () => stateRef.current.focusedCell }),
@@ -7130,6 +7038,38 @@ function DTFocusProvider({
   return /* @__PURE__ */ jsx(DTFocusStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(DTFocusDispatchContext.Provider, { value: dispatch, children }) });
 }
 
+const VIRTUALIZATION_THRESHOLD = 101;
+const DEFAULT_ESTIMATED_ROW_HEIGHT = 35;
+function useDataTableVirtualizer({
+  rowCount,
+  scrollRef,
+  disabled
+}) {
+  const shouldVirtualize = !disabled && rowCount >= VIRTUALIZATION_THRESHOLD;
+  const virtualizer = useVirtualizer({
+    count: shouldVirtualize ? rowCount : 0,
+    // `scrollRef` points at the outer TableContainer div, which does not
+    // itself scroll — the nested [data-anv="table-scroll-container"] child
+    // owns `overflow-y: auto`. Descend to that child so the virtualizer
+    // tracks the right element. Fall back to `scrollRef.current` for
+    // containers that one day collapse the scroll wrapper.
+    getScrollElement: () => {
+      const outer = scrollRef.current;
+      if (!outer) return null;
+      return outer.querySelector(
+        '[data-anv="table-scroll-container"]'
+      ) ?? outer;
+    },
+    estimateSize: () => DEFAULT_ESTIMATED_ROW_HEIGHT,
+    overscan: 5,
+    measureElement: typeof window !== "undefined" && typeof navigator !== "undefined" && navigator.userAgent.indexOf("jsdom") === -1 ? (el) => el?.getBoundingClientRect().height ?? DEFAULT_ESTIMATED_ROW_HEIGHT : void 0
+  });
+  return useMemo(
+    () => shouldVirtualize ? virtualizer : void 0,
+    [shouldVirtualize, virtualizer]
+  );
+}
+
 const EMPTY_DATA = [];
 function DataTableInner(props, ref) {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
@@ -7152,6 +7092,8 @@ function DataTableInner(props, ref) {
     sortedColumn,
     emptyState,
     emptyCellContent,
+    disableVirtualization,
+    getRowVersion,
     className,
     style,
     ...rest
@@ -7240,11 +7182,13 @@ function DataTableInner(props, ref) {
     isLoading
   } = useAsyncData(dataSource);
   const totalItemCount = paginationObject?.totalRowCount ?? resolvedData?.length ?? 0;
-  const hasSubRows = !!resolvedData?.some(
-    (row) => row?.subRows?.length ?? 0 > 0
+  const hasSubRows = useMemo(
+    () => !!resolvedData?.some((row) => (row?.subRows?.length ?? 0) > 0),
+    [resolvedData]
   );
-  const hasSubComponent = !!resolvedData?.some(
-    (row) => row?.subComponent != null
+  const hasSubComponent = useMemo(
+    () => !!resolvedData?.some((row) => row?.subComponent != null),
+    [resolvedData]
   );
   const isExpandable = hasSubRows || hasSubComponent;
   const [expanded, setExpanded] = useOptionallyControlledState({
@@ -7428,9 +7372,9 @@ function DataTableInner(props, ref) {
     columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    getGroupedRowModel: getGroupedRowModel(),
+    ...isPaginated && { getPaginationRowModel: getPaginationRowModel() },
+    ...isExpandable && { getExpandedRowModel: getExpandedRowModel() },
+    // Grouping row model is retained for future use; cheap to exclude now.
     getRowId: (row) => row.id.toString(),
     getSubRows: (row) => row.subRows ?? void 0,
     getRowCanExpand: (row) => {
@@ -7463,8 +7407,7 @@ function DataTableInner(props, ref) {
     },
     onSortingChange: (updaterOrValue) => {
       const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
-      const sortingChanged = JSON.stringify(newSorting) !== JSON.stringify(sorting);
-      if (!sortingChanged) {
+      if (shallowSortingEqual(newSorting, sorting ?? [])) {
         return;
       }
       setSorting(newSorting);
@@ -7473,6 +7416,11 @@ function DataTableInner(props, ref) {
       }
     }
   });
+  const rowVirtualizer = useDataTableVirtualizer({
+    rowCount: table.getRowModel().rows.length,
+    scrollRef: tableRef,
+    disabled: disableVirtualization
+  });
   const headers = table.getFlatHeaders();
   const headerRowCount = table.getHeaderGroups().length;
   const bodyRowCount = table.getRowModel().rows.length;
@@ -7529,15 +7477,14 @@ function DataTableInner(props, ref) {
       if (hasBeenResized) {
         return `${currentSize}px`;
       }
-      const minSize = header.column.columnDef.minSize ?? currentSize;
+      if (header.column.getIsPinned()) {
+        return `${currentSize}px`;
+      }
       const maxSize = header.column.columnDef.maxSize;
-      return `minmax(${minSize}px, ${maxSize ? `${maxSize}px` : "1fr"})`;
+      return `minmax(${currentSize}px, ${maxSize ? `${maxSize}px` : "1fr"})`;
     }).join(" ");
     vars["--a2-grid-template-columns"] = gridColumns;
     vars["--a2-table-width"] = allHaveMaxWidth ? "max-content" : "100%";
-    for (const header of headers) {
-      vars[`--a2-table-col-${header.column.getIndex()}-size`] = header.column.getSize();
-    }
     return vars;
   }, [headers, columnSizing]);
   const columnCount = useMemo(() => {
@@ -7551,7 +7498,9 @@ function DataTableInner(props, ref) {
       tableRef,
       leftPinnedWidth: table.getLeftTotalSize(),
       rightPinnedWidth: table.getRightTotalSize(),
-      children: /* @__PURE__ */ jsx(DTHoverProvider, { children: /* @__PURE__ */ jsxs(
+      virtualizer: rowVirtualizer,
+      headerRowCount,
+      children: /* @__PURE__ */ jsxs(
         TableContainer,
         {
           ...rest,
@@ -7573,8 +7522,16 @@ function DataTableInner(props, ref) {
                 colCount: columnCount,
                 hasSubRows,
                 children: [
-                  /* @__PURE__ */ jsx(DataTableHeader, { table }),
-                  /* @__PURE__ */ jsx(DataTableBody, { table, hasSubRows }),
+                  /* @__PURE__ */ jsx(DataTableHeader, { table, tableRef }),
+                  /* @__PURE__ */ jsx(
+                    DataTableBody,
+                    {
+                      table,
+                      hasSubRows,
+                      virtualizer: rowVirtualizer,
+                      getRowVersion
+                    }
+                  ),
                   isEmpty && emptyState && /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(SrOnly, { children: "No data to display." }),
                     /* @__PURE__ */ jsx("div", { className: styles["empty-state-container"], children: /* @__PURE__ */ jsxs(
@@ -7651,11 +7608,11 @@ function DataTableInner(props, ref) {
             )
           ]
         }
-      ) })
+      )
     }
   );
 }
 const DataTable = forwardRef(DataTableInner);
 
 export { COLUMN_TYPE_DEFAULTS as C, DataTable as D, chipsFormatter as a, booleanFormatter as b, createColumnHelper$1 as c, currencyFormatter as d, dateFormatter as e, dateTimeFormatter as f, getColumnTypeDefaults as g, htmlFormatter as h, dateFormatPresets as i, timeFormatter as j, markdownFormatter as m, numberFormatter as n, percentFormatter as p, resolveColumnTypeConfig as r, timeFormatPresets as t, yearlessDateFormatter as y };
-//# sourceMappingURL=DataTable-BCV_mtSy.js.map
+//# sourceMappingURL=DataTable-JRxu2yTP.js.map