@trackunit/react-table 0.0.74-alpha-8c607117a7.0 → 0.0.75

package/index.esm.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { useContainerProps, IconButton, Icon, Text, MoreMenu, MenuList, Button, Card, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
+import { useContainerProps, IconButton, Icon, Text, MoreMenu, MenuList, Button, Card, EmptyState, Spinner, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
 import * as React from 'react';
-import React__default, { useState, useEffect, useCallback, useRef, createContext, memo as memo$1, isValidElement, cloneElement, useLayoutEffect, useMemo, useContext } from 'react';
+import { useState, useEffect, useCallback, useRef, createContext, memo as memo$2, isValidElement, cloneElement, useLayoutEffect, useMemo, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { TableRoot, Thead, Tr, Th, SortIndicator, ResizeHandle, Tbody, Td } from '@trackunit/react-table-base-components';
+import { flushSync } from 'react-dom';
 import { Toggle, RadioGroup, RadioItem } from '@trackunit/react-form-components';
 import { SortOrder, validateStringAsAssetSortByProperty } from '@trackunit/react-core-contexts-api';
 
@@ -19,6 +20,7 @@ var defaultTranslations = {
 	"table.sorting.toolip": "Adjust sorting and direction",
 	"table.columnFilters.columns": "Columns",
 	"table.columnFilters.hiddenColumnCount": "{{count}} column hidden",
+	"table.columnFilters.hiddenColumnsCount": "{{count}} columns hidden",
 	"table.columnFilters.title": "Visible values",
 	"table.columnFilters.tooltip": "Customize visible values",
 	"table.exportFileName": "exported-data",
@@ -204,7 +206,7 @@ function flattenBy(arr, getChildren) {
   recurse(arr);
   return flat;
 }
-function memo(getDeps, fn, opts) {
+function memo$1(getDeps, fn, opts) {
   let deps = [];
   let result;
   return () => {
@@ -285,7 +287,7 @@ function createColumn(table, columnDef, depth, parent) {
     depth,
     columnDef: resolvedColumnDef,
     columns: [],
-    getFlatColumns: memo(() => [true], () => {
+    getFlatColumns: memo$1(() => [true], () => {
       var _column$columns;
       return [column, ...((_column$columns = column.columns) == null ? void 0 : _column$columns.flatMap(d => d.getFlatColumns()))];
     }, {
@@ -295,7 +297,7 @@ function createColumn(table, columnDef, depth, parent) {
         return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugColumns;
       }
     }),
-    getLeafColumns: memo(() => [table._getOrderColumnsFn()], orderColumns => {
+    getLeafColumns: memo$1(() => [table._getOrderColumnsFn()], orderColumns => {
       var _column$columns2;
       if ((_column$columns2 = column.columns) != null && _column$columns2.length) {
         let leafColumns = column.columns.flatMap(column => column.getLeafColumns());
@@ -361,7 +363,7 @@ const Headers = {
     return {
       // Header Groups
 
-      getHeaderGroups: memo(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
+      getHeaderGroups: memo$1(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
         var _left$map$filter, _right$map$filter;
         const leftColumns = (_left$map$filter = left == null ? void 0 : left.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _left$map$filter : [];
         const rightColumns = (_right$map$filter = right == null ? void 0 : right.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _right$map$filter : [];
@@ -375,7 +377,7 @@ const Headers = {
           return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugHeaders;
         }
       }),
-      getCenterHeaderGroups: memo(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
+      getCenterHeaderGroups: memo$1(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
         leafColumns = leafColumns.filter(column => !(left != null && left.includes(column.id)) && !(right != null && right.includes(column.id)));
         return buildHeaderGroups(allColumns, leafColumns, table, 'center');
       }, {
@@ -385,7 +387,7 @@ const Headers = {
           return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugHeaders;
         }
       }),
-      getLeftHeaderGroups: memo(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left], (allColumns, leafColumns, left) => {
+      getLeftHeaderGroups: memo$1(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left], (allColumns, leafColumns, left) => {
         var _left$map$filter2;
         const orderedLeafColumns = (_left$map$filter2 = left == null ? void 0 : left.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _left$map$filter2 : [];
         return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'left');
@@ -396,7 +398,7 @@ const Headers = {
           return (_table$options$debugA3 = table.options.debugAll) != null ? _table$options$debugA3 : table.options.debugHeaders;
         }
       }),
-      getRightHeaderGroups: memo(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.right], (allColumns, leafColumns, right) => {
+      getRightHeaderGroups: memo$1(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.right], (allColumns, leafColumns, right) => {
         var _right$map$filter2;
         const orderedLeafColumns = (_right$map$filter2 = right == null ? void 0 : right.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _right$map$filter2 : [];
         return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'right');
@@ -409,7 +411,7 @@ const Headers = {
       }),
       // Footer Groups
 
-      getFooterGroups: memo(() => [table.getHeaderGroups()], headerGroups => {
+      getFooterGroups: memo$1(() => [table.getHeaderGroups()], headerGroups => {
         return [...headerGroups].reverse();
       }, {
         key: process.env.NODE_ENV === 'development' && 'getFooterGroups',
@@ -418,7 +420,7 @@ const Headers = {
           return (_table$options$debugA5 = table.options.debugAll) != null ? _table$options$debugA5 : table.options.debugHeaders;
         }
       }),
-      getLeftFooterGroups: memo(() => [table.getLeftHeaderGroups()], headerGroups => {
+      getLeftFooterGroups: memo$1(() => [table.getLeftHeaderGroups()], headerGroups => {
         return [...headerGroups].reverse();
       }, {
         key: process.env.NODE_ENV === 'development' && 'getLeftFooterGroups',
@@ -427,7 +429,7 @@ const Headers = {
           return (_table$options$debugA6 = table.options.debugAll) != null ? _table$options$debugA6 : table.options.debugHeaders;
         }
       }),
-      getCenterFooterGroups: memo(() => [table.getCenterHeaderGroups()], headerGroups => {
+      getCenterFooterGroups: memo$1(() => [table.getCenterHeaderGroups()], headerGroups => {
         return [...headerGroups].reverse();
       }, {
         key: process.env.NODE_ENV === 'development' && 'getCenterFooterGroups',
@@ -436,7 +438,7 @@ const Headers = {
           return (_table$options$debugA7 = table.options.debugAll) != null ? _table$options$debugA7 : table.options.debugHeaders;
         }
       }),
-      getRightFooterGroups: memo(() => [table.getRightHeaderGroups()], headerGroups => {
+      getRightFooterGroups: memo$1(() => [table.getRightHeaderGroups()], headerGroups => {
         return [...headerGroups].reverse();
       }, {
         key: process.env.NODE_ENV === 'development' && 'getRightFooterGroups',
@@ -447,7 +449,7 @@ const Headers = {
       }),
       // Flat Headers
 
-      getFlatHeaders: memo(() => [table.getHeaderGroups()], headerGroups => {
+      getFlatHeaders: memo$1(() => [table.getHeaderGroups()], headerGroups => {
         return headerGroups.map(headerGroup => {
           return headerGroup.headers;
         }).flat();
@@ -458,7 +460,7 @@ const Headers = {
           return (_table$options$debugA9 = table.options.debugAll) != null ? _table$options$debugA9 : table.options.debugHeaders;
         }
       }),
-      getLeftFlatHeaders: memo(() => [table.getLeftHeaderGroups()], left => {
+      getLeftFlatHeaders: memo$1(() => [table.getLeftHeaderGroups()], left => {
         return left.map(headerGroup => {
           return headerGroup.headers;
         }).flat();
@@ -469,7 +471,7 @@ const Headers = {
           return (_table$options$debugA10 = table.options.debugAll) != null ? _table$options$debugA10 : table.options.debugHeaders;
         }
       }),
-      getCenterFlatHeaders: memo(() => [table.getCenterHeaderGroups()], left => {
+      getCenterFlatHeaders: memo$1(() => [table.getCenterHeaderGroups()], left => {
         return left.map(headerGroup => {
           return headerGroup.headers;
         }).flat();
@@ -480,7 +482,7 @@ const Headers = {
           return (_table$options$debugA11 = table.options.debugAll) != null ? _table$options$debugA11 : table.options.debugHeaders;
         }
       }),
-      getRightFlatHeaders: memo(() => [table.getRightHeaderGroups()], left => {
+      getRightFlatHeaders: memo$1(() => [table.getRightHeaderGroups()], left => {
         return left.map(headerGroup => {
           return headerGroup.headers;
         }).flat();
@@ -493,7 +495,7 @@ const Headers = {
       }),
       // Leaf Headers
 
-      getCenterLeafHeaders: memo(() => [table.getCenterFlatHeaders()], flatHeaders => {
+      getCenterLeafHeaders: memo$1(() => [table.getCenterFlatHeaders()], flatHeaders => {
         return flatHeaders.filter(header => {
           var _header$subHeaders;
           return !((_header$subHeaders = header.subHeaders) != null && _header$subHeaders.length);
@@ -505,7 +507,7 @@ const Headers = {
           return (_table$options$debugA13 = table.options.debugAll) != null ? _table$options$debugA13 : table.options.debugHeaders;
         }
       }),
-      getLeftLeafHeaders: memo(() => [table.getLeftFlatHeaders()], flatHeaders => {
+      getLeftLeafHeaders: memo$1(() => [table.getLeftFlatHeaders()], flatHeaders => {
         return flatHeaders.filter(header => {
           var _header$subHeaders2;
           return !((_header$subHeaders2 = header.subHeaders) != null && _header$subHeaders2.length);
@@ -517,7 +519,7 @@ const Headers = {
           return (_table$options$debugA14 = table.options.debugAll) != null ? _table$options$debugA14 : table.options.debugHeaders;
         }
       }),
-      getRightLeafHeaders: memo(() => [table.getRightFlatHeaders()], flatHeaders => {
+      getRightLeafHeaders: memo$1(() => [table.getRightFlatHeaders()], flatHeaders => {
         return flatHeaders.filter(header => {
           var _header$subHeaders3;
           return !((_header$subHeaders3 = header.subHeaders) != null && _header$subHeaders3.length);
@@ -529,7 +531,7 @@ const Headers = {
           return (_table$options$debugA15 = table.options.debugAll) != null ? _table$options$debugA15 : table.options.debugHeaders;
         }
       }),
-      getLeafHeaders: memo(() => [table.getLeftHeaderGroups(), table.getCenterHeaderGroups(), table.getRightHeaderGroups()], (left, center, right) => {
+      getLeafHeaders: memo$1(() => [table.getLeftHeaderGroups(), table.getCenterHeaderGroups(), table.getRightHeaderGroups()], (left, center, right) => {
         var _left$0$headers, _left$, _center$0$headers, _center$, _right$0$headers, _right$;
         return [...((_left$0$headers = (_left$ = left[0]) == null ? void 0 : _left$.headers) != null ? _left$0$headers : []), ...((_center$0$headers = (_center$ = center[0]) == null ? void 0 : _center$.headers) != null ? _center$0$headers : []), ...((_right$0$headers = (_right$ = right[0]) == null ? void 0 : _right$.headers) != null ? _right$0$headers : [])].map(header => {
           return header.getLeafHeaders();
@@ -1622,7 +1624,7 @@ const Ordering = {
         var _table$initialState$c;
         table.setColumnOrder(defaultState ? [] : (_table$initialState$c = table.initialState.columnOrder) != null ? _table$initialState$c : []);
       },
-      _getOrderColumnsFn: memo(() => [table.getState().columnOrder, table.getState().grouping, table.options.groupedColumnMode], (columnOrder, grouping, groupedColumnMode) => columns => {
+      _getOrderColumnsFn: memo$1(() => [table.getState().columnOrder, table.getState().grouping, table.options.groupedColumnMode], (columnOrder, grouping, groupedColumnMode) => columns => {
         // Sort grouped columns to the start of the column list
         // before the headers are built
         let orderedColumns = [];
@@ -1756,7 +1758,7 @@ const Pagination = {
           pageCount: newPageCount
         };
       }),
-      getPageOptions: memo(() => [table.getPageCount()], pageCount => {
+      getPageOptions: memo$1(() => [table.getPageCount()], pageCount => {
         let pageOptions = [];
         if (pageCount && pageCount > 0) {
           pageOptions = [...new Array(pageCount)].fill(null).map((_, i) => i);
@@ -1879,7 +1881,7 @@ const Pinning = {
   },
   createRow: (row, table) => {
     return {
-      getCenterVisibleCells: memo(() => [row._getAllVisibleCells(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allCells, left, right) => {
+      getCenterVisibleCells: memo$1(() => [row._getAllVisibleCells(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allCells, left, right) => {
         const leftAndRight = [...(left != null ? left : []), ...(right != null ? right : [])];
         return allCells.filter(d => !leftAndRight.includes(d.column.id));
       }, {
@@ -1889,7 +1891,7 @@ const Pinning = {
           return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugRows;
         }
       }),
-      getLeftVisibleCells: memo(() => [row._getAllVisibleCells(), table.getState().columnPinning.left,,], (allCells, left) => {
+      getLeftVisibleCells: memo$1(() => [row._getAllVisibleCells(), table.getState().columnPinning.left,,], (allCells, left) => {
         const cells = (left != null ? left : []).map(columnId => allCells.find(cell => cell.column.id === columnId)).filter(Boolean).map(d => ({
           ...d,
           position: 'left'
@@ -1902,7 +1904,7 @@ const Pinning = {
           return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugRows;
         }
       }),
-      getRightVisibleCells: memo(() => [row._getAllVisibleCells(), table.getState().columnPinning.right], (allCells, right) => {
+      getRightVisibleCells: memo$1(() => [row._getAllVisibleCells(), table.getState().columnPinning.right], (allCells, right) => {
         const cells = (right != null ? right : []).map(columnId => allCells.find(cell => cell.column.id === columnId)).filter(Boolean).map(d => ({
           ...d,
           position: 'right'
@@ -1933,7 +1935,7 @@ const Pinning = {
         }
         return Boolean((_pinningState$positio = pinningState[position]) == null ? void 0 : _pinningState$positio.length);
       },
-      getLeftLeafColumns: memo(() => [table.getAllLeafColumns(), table.getState().columnPinning.left], (allColumns, left) => {
+      getLeftLeafColumns: memo$1(() => [table.getAllLeafColumns(), table.getState().columnPinning.left], (allColumns, left) => {
         return (left != null ? left : []).map(columnId => allColumns.find(column => column.id === columnId)).filter(Boolean);
       }, {
         key: process.env.NODE_ENV === 'development' && 'getLeftLeafColumns',
@@ -1942,7 +1944,7 @@ const Pinning = {
           return (_table$options$debugA4 = table.options.debugAll) != null ? _table$options$debugA4 : table.options.debugColumns;
         }
       }),
-      getRightLeafColumns: memo(() => [table.getAllLeafColumns(), table.getState().columnPinning.right], (allColumns, right) => {
+      getRightLeafColumns: memo$1(() => [table.getAllLeafColumns(), table.getState().columnPinning.right], (allColumns, right) => {
         return (right != null ? right : []).map(columnId => allColumns.find(column => column.id === columnId)).filter(Boolean);
       }, {
         key: process.env.NODE_ENV === 'development' && 'getRightLeafColumns',
@@ -1951,7 +1953,7 @@ const Pinning = {
           return (_table$options$debugA5 = table.options.debugAll) != null ? _table$options$debugA5 : table.options.debugColumns;
         }
       }),
-      getCenterLeafColumns: memo(() => [table.getAllLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, left, right) => {
+      getCenterLeafColumns: memo$1(() => [table.getAllLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, left, right) => {
         const leftAndRight = [...(left != null ? left : []), ...(right != null ? right : [])];
         return allColumns.filter(d => !leftAndRight.includes(d.id));
       }, {
@@ -2087,7 +2089,7 @@ const RowSelection = {
       //   table.setRowSelection(selectedRowIds)
       // },
       getPreSelectedRowModel: () => table.getCoreRowModel(),
-      getSelectedRowModel: memo(() => [table.getState().rowSelection, table.getCoreRowModel()], (rowSelection, rowModel) => {
+      getSelectedRowModel: memo$1(() => [table.getState().rowSelection, table.getCoreRowModel()], (rowSelection, rowModel) => {
         if (!Object.keys(rowSelection).length) {
           return {
             rows: [],
@@ -2103,7 +2105,7 @@ const RowSelection = {
           return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugTable;
         }
       }),
-      getFilteredSelectedRowModel: memo(() => [table.getState().rowSelection, table.getFilteredRowModel()], (rowSelection, rowModel) => {
+      getFilteredSelectedRowModel: memo$1(() => [table.getState().rowSelection, table.getFilteredRowModel()], (rowSelection, rowModel) => {
         if (!Object.keys(rowSelection).length) {
           return {
             rows: [],
@@ -2119,7 +2121,7 @@ const RowSelection = {
           return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugTable;
         }
       }),
-      getGroupedSelectedRowModel: memo(() => [table.getState().rowSelection, table.getSortedRowModel()], (rowSelection, rowModel) => {
+      getGroupedSelectedRowModel: memo$1(() => [table.getState().rowSelection, table.getSortedRowModel()], (rowSelection, rowModel) => {
         if (!Object.keys(rowSelection).length) {
           return {
             rows: [],
@@ -2702,7 +2704,7 @@ const Visibility = {
   },
   createRow: (row, table) => {
     return {
-      _getAllVisibleCells: memo(() => [row.getAllCells(), table.getState().columnVisibility], cells => {
+      _getAllVisibleCells: memo$1(() => [row.getAllCells(), table.getState().columnVisibility], cells => {
         return cells.filter(cell => cell.column.getIsVisible());
       }, {
         key: process.env.NODE_ENV === 'production' && 'row._getAllVisibleCells',
@@ -2711,7 +2713,7 @@ const Visibility = {
           return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugRows;
         }
       }),
-      getVisibleCells: memo(() => [row.getLeftVisibleCells(), row.getCenterVisibleCells(), row.getRightVisibleCells()], (left, center, right) => [...left, ...center, ...right], {
+      getVisibleCells: memo$1(() => [row.getLeftVisibleCells(), row.getCenterVisibleCells(), row.getRightVisibleCells()], (left, center, right) => [...left, ...center, ...right], {
         key: process.env.NODE_ENV === 'development' && 'row.getVisibleCells',
         debug: () => {
           var _table$options$debugA2;
@@ -2722,7 +2724,7 @@ const Visibility = {
   },
   createTable: table => {
     const makeVisibleColumnsMethod = (key, getColumns) => {
-      return memo(() => [getColumns(), getColumns().filter(d => d.getIsVisible()).map(d => d.id).join('_')], columns => {
+      return memo$1(() => [getColumns(), getColumns().filter(d => d.getIsVisible()).map(d => d.id).join('_')], columns => {
         return columns.filter(d => d.getIsVisible == null ? void 0 : d.getIsVisible());
       }, {
         key,
@@ -2861,7 +2863,7 @@ function createTable(options) {
       }
       return row;
     },
-    _getDefaultColumnDef: memo(() => [table.options.defaultColumn], defaultColumn => {
+    _getDefaultColumnDef: memo$1(() => [table.options.defaultColumn], defaultColumn => {
       var _defaultColumn;
       defaultColumn = (_defaultColumn = defaultColumn) != null ? _defaultColumn : {};
       return {
@@ -2893,7 +2895,7 @@ function createTable(options) {
       key: process.env.NODE_ENV === 'development' && 'getDefaultColumnDef'
     }),
     _getColumnDefs: () => table.options.columns,
-    getAllColumns: memo(() => [table._getColumnDefs()], columnDefs => {
+    getAllColumns: memo$1(() => [table._getColumnDefs()], columnDefs => {
       const recurseColumns = function (columnDefs, parent, depth) {
         if (depth === void 0) {
           depth = 0;
@@ -2913,7 +2915,7 @@ function createTable(options) {
         return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugColumns;
       }
     }),
-    getAllFlatColumns: memo(() => [table.getAllColumns()], allColumns => {
+    getAllFlatColumns: memo$1(() => [table.getAllColumns()], allColumns => {
       return allColumns.flatMap(column => {
         return column.getFlatColumns();
       });
@@ -2924,7 +2926,7 @@ function createTable(options) {
         return (_table$options$debugA3 = table.options.debugAll) != null ? _table$options$debugA3 : table.options.debugColumns;
       }
     }),
-    _getAllFlatColumnsById: memo(() => [table.getAllFlatColumns()], flatColumns => {
+    _getAllFlatColumnsById: memo$1(() => [table.getAllFlatColumns()], flatColumns => {
       return flatColumns.reduce((acc, column) => {
         acc[column.id] = column;
         return acc;
@@ -2936,7 +2938,7 @@ function createTable(options) {
         return (_table$options$debugA4 = table.options.debugAll) != null ? _table$options$debugA4 : table.options.debugColumns;
       }
     }),
-    getAllLeafColumns: memo(() => [table.getAllColumns(), table._getOrderColumnsFn()], (allColumns, orderColumns) => {
+    getAllLeafColumns: memo$1(() => [table.getAllColumns(), table._getOrderColumnsFn()], (allColumns, orderColumns) => {
       let leafColumns = allColumns.flatMap(column => column.getLeafColumns());
       return orderColumns(leafColumns);
     }, {
@@ -2972,7 +2974,7 @@ function createCell(table, row, column, columnId) {
     column,
     getValue: () => row.getValue(columnId),
     renderValue: getRenderValue,
-    getContext: memo(() => [table, column, row, cell], (table, column, row, cell) => ({
+    getContext: memo$1(() => [table, column, row, cell], (table, column, row, cell) => ({
       table,
       column,
       row,
@@ -3043,7 +3045,7 @@ const createRow = (table, id, original, rowIndex, depth, subRows, parentId) => {
       }
       return parentRows.reverse();
     },
-    getAllCells: memo(() => [table.getAllLeafColumns()], leafColumns => {
+    getAllCells: memo$1(() => [table.getAllLeafColumns()], leafColumns => {
       return leafColumns.map(column => {
         return createCell(table, row, column, column.id);
       });
@@ -3054,7 +3056,7 @@ const createRow = (table, id, original, rowIndex, depth, subRows, parentId) => {
         return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugRows;
       }
     }),
-    _getAllCellsByColumnId: memo(() => [row.getAllCells()], allCells => {
+    _getAllCellsByColumnId: memo$1(() => [row.getAllCells()], allCells => {
       return allCells.reduce((acc, cell) => {
         acc[cell.column.id] = cell;
         return acc;
@@ -3131,7 +3133,7 @@ function createColumnHelper() {
 }
 
 function getCoreRowModel() {
-  return table => memo(() => [table.options.data], data => {
+  return table => memo$1(() => [table.options.data], data => {
     const rowModel = {
       rows: [],
       flatRows: [],
@@ -3188,7 +3190,7 @@ function getCoreRowModel() {
 }
 
 function getSortedRowModel() {
-  return table => memo(() => [table.getState().sorting, table.getPreSortedRowModel()], (sorting, rowModel) => {
+  return table => memo$1(() => [table.getState().sorting, table.getPreSortedRowModel()], (sorting, rowModel) => {
     if (!rowModel.rows.length || !(sorting != null && sorting.length)) {
       return rowModel;
     }
@@ -3353,463 +3355,660 @@ function useReactTable(options) {
  *
  * @license MIT
  */
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
 
+/**
+ * virtual-core
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-var props = ["bottom", "height", "left", "right", "top", "width"];
-
-var rectChanged = function rectChanged(a, b) {
-  if (a === void 0) {
-    a = {};
-  }
-
-  if (b === void 0) {
-    b = {};
-  }
-
-  return props.some(function (prop) {
-    return a[prop] !== b[prop];
-  });
-};
-
-var observedNodes = /*#__PURE__*/new Map();
-var rafId;
-
-var run = function run() {
-  var changedStates = [];
-  observedNodes.forEach(function (state, node) {
-    var newRect = node.getBoundingClientRect();
-
-    if (rectChanged(newRect, state.rect)) {
-      state.rect = newRect;
-      changedStates.push(state);
-    }
-  });
-  changedStates.forEach(function (state) {
-    state.callbacks.forEach(function (cb) {
-      return cb(state.rect);
+/**
+ * virtual-core
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+function memo(getDeps, fn, opts) {
+  var _opts$initialDeps;
+  var deps = (_opts$initialDeps = opts.initialDeps) != null ? _opts$initialDeps : [];
+  var result;
+  return function () {
+    var depTime;
+    if (opts.key && opts.debug != null && opts.debug()) depTime = Date.now();
+    var newDeps = getDeps();
+    var depsChanged = newDeps.length !== deps.length || newDeps.some(function (dep, index) {
+      return deps[index] !== dep;
     });
-  });
-  rafId = window.requestAnimationFrame(run);
-};
-
-function observeRect(node, cb) {
-  return {
-    observe: function observe() {
-      var wasEmpty = observedNodes.size === 0;
-
-      if (observedNodes.has(node)) {
-        observedNodes.get(node).callbacks.push(cb);
-      } else {
-        observedNodes.set(node, {
-          rect: undefined,
-          hasRectChanged: false,
-          callbacks: [cb]
-        });
-      }
-
-      if (wasEmpty) run();
-    },
-    unobserve: function unobserve() {
-      var state = observedNodes.get(node);
-
-      if (state) {
-        // Remove the callback
-        var index = state.callbacks.indexOf(cb);
-        if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
-
-        if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
-
-        if (!observedNodes.size) cancelAnimationFrame(rafId);
-      }
+    if (!depsChanged) {
+      return result;
     }
+    deps = newDeps;
+    var resultTime;
+    if (opts.key && opts.debug != null && opts.debug()) resultTime = Date.now();
+    result = fn.apply(void 0, newDeps);
+    if (opts.key && opts.debug != null && opts.debug()) {
+      var depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+      var resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+      var resultFpsPercentage = resultEndTime / 16;
+      var pad = function pad(str, num) {
+        str = String(str);
+        while (str.length < num) {
+          str = ' ' + str;
+        }
+        return str;
+      };
+      console.info("%c\u23F1 " + pad(resultEndTime, 5) + " /" + pad(depEndTime, 5) + " ms", "\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl(" + Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120)) + "deg 100% 31%);", opts == null ? void 0 : opts.key);
+    }
+    opts == null ? void 0 : opts.onChange == null ? void 0 : opts.onChange(result);
+    return result;
   };
 }
-
-var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-function rectReducer(state, action) {
-  var rect = action.rect;
-
-  if (state.height !== rect.height || state.width !== rect.width) {
-    return rect;
+function notUndefined(value, msg) {
+  if (value === undefined) {
+    throw new Error("Unexpected undefined" + (msg ? ": " + msg : ''));
+  } else {
+    return value;
   }
-
-  return state;
 }
-
-var useRect = function useRect(nodeRef, initialRect) {
-  if (initialRect === void 0) {
-    initialRect = {
-      width: 0,
-      height: 0
-    };
-  }
-
-  var _React$useState = React__default.useState(nodeRef.current),
-      element = _React$useState[0],
-      setElement = _React$useState[1];
-
-  var _React$useReducer = React__default.useReducer(rectReducer, initialRect),
-      rect = _React$useReducer[0],
-      dispatch = _React$useReducer[1];
-
-  var initialRectSet = React__default.useRef(false);
-  useIsomorphicLayoutEffect$1(function () {
-    if (nodeRef.current !== element) {
-      setElement(nodeRef.current);
-    }
-  });
-  useIsomorphicLayoutEffect$1(function () {
-    if (element && !initialRectSet.current) {
-      initialRectSet.current = true;
-
-      var _rect = element.getBoundingClientRect();
-
-      dispatch({
-        rect: _rect
-      });
-    }
-  }, [element]);
-  React__default.useEffect(function () {
-    if (!element) {
-      return;
-    }
-
-    var observer = observeRect(element, function (rect) {
-      dispatch({
-        rect: rect
-      });
-    });
-    observer.observe();
-    return function () {
-      observer.unobserve();
-    };
-  }, [element]);
-  return rect;
+var approxEqual = function approxEqual(a, b) {
+  return Math.abs(a - b) < 1;
 };
 
-var _excluded$1 = ["align"];
+/**
+ * virtual-core
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+//
 
-var defaultEstimateSize = function defaultEstimateSize() {
-  return 50;
-};
+//
 
 var defaultKeyExtractor = function defaultKeyExtractor(index) {
   return index;
 };
-
-var defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
-  var key = horizontal ? 'offsetWidth' : 'offsetHeight';
-  return el[key];
-};
-
 var defaultRangeExtractor = function defaultRangeExtractor(range) {
-  var start = Math.max(range.start - range.overscan, 0);
-  var end = Math.min(range.end + range.overscan, range.size - 1);
+  var start = Math.max(range.startIndex - range.overscan, 0);
+  var end = Math.min(range.endIndex + range.overscan, range.count - 1);
   var arr = [];
-
   for (var _i = start; _i <= end; _i++) {
     arr.push(_i);
   }
-
   return arr;
 };
-var useVirtual = function useVirtual(_ref) {
-  var _measurements;
-
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 0 : _ref$size,
-      _ref$estimateSize = _ref.estimateSize,
-      estimateSize = _ref$estimateSize === void 0 ? defaultEstimateSize : _ref$estimateSize,
-      _ref$overscan = _ref.overscan,
-      overscan = _ref$overscan === void 0 ? 1 : _ref$overscan,
-      _ref$paddingStart = _ref.paddingStart,
-      paddingStart = _ref$paddingStart === void 0 ? 0 : _ref$paddingStart,
-      _ref$paddingEnd = _ref.paddingEnd,
-      paddingEnd = _ref$paddingEnd === void 0 ? 0 : _ref$paddingEnd,
-      parentRef = _ref.parentRef,
-      _ref$horizontal = _ref.horizontal,
-      horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
-      scrollToFn = _ref.scrollToFn,
-      useObserver = _ref.useObserver,
-      initialRect = _ref.initialRect,
-      onScrollElement = _ref.onScrollElement,
-      scrollOffsetFn = _ref.scrollOffsetFn,
-      _ref$keyExtractor = _ref.keyExtractor,
-      keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor,
-      _ref$measureSize = _ref.measureSize,
-      measureSize = _ref$measureSize === void 0 ? defaultMeasureSize : _ref$measureSize,
-      _ref$rangeExtractor = _ref.rangeExtractor,
-      rangeExtractor = _ref$rangeExtractor === void 0 ? defaultRangeExtractor : _ref$rangeExtractor;
-  var sizeKey = horizontal ? 'width' : 'height';
-  var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
-  var latestRef = React.useRef({
-    outerSize: 0,
-    scrollOffset: 0,
-    measurements: [],
-    totalSize: 0
+var observeElementRect = function observeElementRect(instance, cb) {
+  var element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  var handler = function handler(rect) {
+    var width = rect.width,
+      height = rect.height;
+    cb({
+      width: Math.round(width),
+      height: Math.round(height)
+    });
+  };
+  handler(element.getBoundingClientRect());
+  var observer = new ResizeObserver(function (entries) {
+    var entry = entries[0];
+    if (entry != null && entry.borderBoxSize) {
+      var box = entry.borderBoxSize[0];
+      if (box) {
+        handler({
+          width: box.inlineSize,
+          height: box.blockSize
+        });
+        return;
+      }
+    }
+    handler(element.getBoundingClientRect());
   });
-
-  var _React$useState = React.useState(0),
-      scrollOffset = _React$useState[0],
-      setScrollOffset = _React$useState[1];
-
-  latestRef.current.scrollOffset = scrollOffset;
-  var useMeasureParent = useObserver || useRect;
-
-  var _useMeasureParent = useMeasureParent(parentRef, initialRect),
-      outerSize = _useMeasureParent[sizeKey];
-
-  latestRef.current.outerSize = outerSize;
-  var defaultScrollToFn = React.useCallback(function (offset) {
-    if (parentRef.current) {
-      parentRef.current[scrollKey] = offset;
+  observer.observe(element, {
+    box: 'border-box'
+  });
+  return function () {
+    observer.unobserve(element);
+  };
+};
+var observeElementOffset = function observeElementOffset(instance, cb) {
+  var element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  var handler = function handler() {
+    cb(element[instance.options.horizontal ? 'scrollLeft' : 'scrollTop']);
+  };
+  handler();
+  element.addEventListener('scroll', handler, {
+    passive: true
+  });
+  return function () {
+    element.removeEventListener('scroll', handler);
+  };
+};
+var measureElement = function measureElement(element, entry, instance) {
+  if (entry != null && entry.borderBoxSize) {
+    var box = entry.borderBoxSize[0];
+    if (box) {
+      var size = Math.round(box[instance.options.horizontal ? 'inlineSize' : 'blockSize']);
+      return size;
     }
-  }, [parentRef, scrollKey]);
-  var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
-  var scrollTo = React.useCallback(function (offset) {
-    resolvedScrollToFn(offset, defaultScrollToFn);
-  }, [defaultScrollToFn, resolvedScrollToFn]);
-
-  var _React$useState2 = React.useState({}),
-      measuredCache = _React$useState2[0],
-      setMeasuredCache = _React$useState2[1];
-
-  var measure = React.useCallback(function () {
-    return setMeasuredCache({});
-  }, []);
-  var pendingMeasuredCacheIndexesRef = React.useRef([]);
-  var measurements = React.useMemo(function () {
-    var min = pendingMeasuredCacheIndexesRef.current.length > 0 ? Math.min.apply(Math, pendingMeasuredCacheIndexesRef.current) : 0;
-    pendingMeasuredCacheIndexesRef.current = [];
-    var measurements = latestRef.current.measurements.slice(0, min);
-
-    for (var _i2 = min; _i2 < size; _i2++) {
-      var key = keyExtractor(_i2);
-      var measuredSize = measuredCache[key];
-
-      var _start = measurements[_i2 - 1] ? measurements[_i2 - 1].end : paddingStart;
-
-      var _size = typeof measuredSize === 'number' ? measuredSize : estimateSize(_i2);
-
-      var _end = _start + _size;
-
+  }
+  return Math.round(element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height']);
+};
+var elementScroll = function elementScroll(offset, _ref2, instance) {
+  var _instance$scrollEleme3, _instance$scrollEleme4;
+  var _ref2$adjustments = _ref2.adjustments,
+    adjustments = _ref2$adjustments === void 0 ? 0 : _ref2$adjustments,
+    behavior = _ref2.behavior;
+  var toOffset = offset + adjustments;
+  (_instance$scrollEleme3 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme3.scrollTo == null ? void 0 : _instance$scrollEleme3.scrollTo((_instance$scrollEleme4 = {}, _instance$scrollEleme4[instance.options.horizontal ? 'left' : 'top'] = toOffset, _instance$scrollEleme4.behavior = behavior, _instance$scrollEleme4));
+};
+var Virtualizer = function Virtualizer(_opts) {
+  var _this = this;
+  this.unsubs = [];
+  this.scrollElement = null;
+  this.isScrolling = false;
+  this.isScrollingTimeoutId = null;
+  this.scrollToIndexTimeoutId = null;
+  this.measurementsCache = [];
+  this.itemSizeCache = new Map();
+  this.pendingMeasuredCacheIndexes = [];
+  this.scrollDirection = null;
+  this.scrollAdjustments = 0;
+  this.measureElementCache = new Map();
+  this.observer = function () {
+    var _ro = null;
+    var get = function get() {
+      if (_ro) {
+        return _ro;
+      } else if (typeof ResizeObserver !== 'undefined') {
+        return _ro = new ResizeObserver(function (entries) {
+          entries.forEach(function (entry) {
+            _this._measureElement(entry.target, entry);
+          });
+        });
+      } else {
+        return null;
+      }
+    };
+    return {
+      disconnect: function disconnect() {
+        var _get;
+        return (_get = get()) == null ? void 0 : _get.disconnect();
+      },
+      observe: function observe(target) {
+        var _get2;
+        return (_get2 = get()) == null ? void 0 : _get2.observe(target, {
+          box: 'border-box'
+        });
+      },
+      unobserve: function unobserve(target) {
+        var _get3;
+        return (_get3 = get()) == null ? void 0 : _get3.unobserve(target);
+      }
+    };
+  }();
+  this.range = null;
+  this.setOptions = function (opts) {
+    Object.entries(opts).forEach(function (_ref3) {
+      var key = _ref3[0],
+        value = _ref3[1];
+      if (typeof value === 'undefined') delete opts[key];
+    });
+    _this.options = _extends({
+      debug: false,
+      initialOffset: 0,
+      overscan: 1,
+      paddingStart: 0,
+      paddingEnd: 0,
+      scrollPaddingStart: 0,
+      scrollPaddingEnd: 0,
+      horizontal: false,
+      getItemKey: defaultKeyExtractor,
+      rangeExtractor: defaultRangeExtractor,
+      onChange: function onChange() {},
+      measureElement: measureElement,
+      initialRect: {
+        width: 0,
+        height: 0
+      },
+      scrollMargin: 0,
+      scrollingDelay: 150,
+      indexAttribute: 'data-index',
+      initialMeasurementsCache: [],
+      lanes: 1
+    }, opts);
+  };
+  this.notify = function (sync) {
+    _this.options.onChange == null ? void 0 : _this.options.onChange(_this, sync);
+  };
+  this.maybeNotify = memo(function () {
+    _this.calculateRange();
+    return [_this.isScrolling, _this.range ? _this.range.startIndex : null, _this.range ? _this.range.endIndex : null];
+  }, function (isScrolling) {
+    _this.notify(isScrolling);
+  }, {
+    key: process.env.NODE_ENV !== 'production' && 'maybeNotify',
+    debug: function debug() {
+      return _this.options.debug;
+    },
+    initialDeps: [this.isScrolling, this.range ? this.range.startIndex : null, this.range ? this.range.endIndex : null]
+  });
+  this.cleanup = function () {
+    _this.unsubs.filter(Boolean).forEach(function (d) {
+      return d();
+    });
+    _this.unsubs = [];
+    _this.scrollElement = null;
+  };
+  this._didMount = function () {
+    _this.measureElementCache.forEach(_this.observer.observe);
+    return function () {
+      _this.observer.disconnect();
+      _this.cleanup();
+    };
+  };
+  this._willUpdate = function () {
+    var scrollElement = _this.options.getScrollElement();
+    if (_this.scrollElement !== scrollElement) {
+      _this.cleanup();
+      _this.scrollElement = scrollElement;
+      _this._scrollToOffset(_this.scrollOffset, {
+        adjustments: undefined,
+        behavior: undefined
+      });
+      _this.unsubs.push(_this.options.observeElementRect(_this, function (rect) {
+        _this.scrollRect = rect;
+        _this.maybeNotify();
+      }));
+      _this.unsubs.push(_this.options.observeElementOffset(_this, function (offset) {
+        _this.scrollAdjustments = 0;
+        if (_this.scrollOffset === offset) {
+          return;
+        }
+        if (_this.isScrollingTimeoutId !== null) {
+          clearTimeout(_this.isScrollingTimeoutId);
+          _this.isScrollingTimeoutId = null;
+        }
+        _this.isScrolling = true;
+        _this.scrollDirection = _this.scrollOffset < offset ? 'forward' : 'backward';
+        _this.scrollOffset = offset;
+        _this.maybeNotify();
+        _this.isScrollingTimeoutId = setTimeout(function () {
+          _this.isScrollingTimeoutId = null;
+          _this.isScrolling = false;
+          _this.scrollDirection = null;
+          _this.maybeNotify();
+        }, _this.options.scrollingDelay);
+      }));
+    }
+  };
+  this.getSize = function () {
+    return _this.scrollRect[_this.options.horizontal ? 'width' : 'height'];
+  };
+  this.memoOptions = memo(function () {
+    return [_this.options.count, _this.options.paddingStart, _this.options.scrollMargin, _this.options.getItemKey];
+  }, function (count, paddingStart, scrollMargin, getItemKey) {
+    _this.pendingMeasuredCacheIndexes = [];
+    return {
+      count: count,
+      paddingStart: paddingStart,
+      scrollMargin: scrollMargin,
+      getItemKey: getItemKey
+    };
+  }, {
+    key: false
+  });
+  this.getFurthestMeasurement = function (measurements, index) {
+    var furthestMeasurementsFound = new Map();
+    var furthestMeasurements = new Map();
+    for (var m = index - 1; m >= 0; m--) {
+      var measurement = measurements[m];
+      if (furthestMeasurementsFound.has(measurement.lane)) {
+        continue;
+      }
+      var previousFurthestMeasurement = furthestMeasurements.get(measurement.lane);
+      if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
+        furthestMeasurements.set(measurement.lane, measurement);
+      } else if (measurement.end < previousFurthestMeasurement.end) {
+        furthestMeasurementsFound.set(measurement.lane, true);
+      }
+      if (furthestMeasurementsFound.size === _this.options.lanes) {
+        break;
+      }
+    }
+    return furthestMeasurements.size === _this.options.lanes ? Array.from(furthestMeasurements.values()).sort(function (a, b) {
+      return a.end - b.end;
+    })[0] : undefined;
+  };
+  this.getMeasurements = memo(function () {
+    return [_this.memoOptions(), _this.itemSizeCache];
+  }, function (_ref4, itemSizeCache) {
+    var count = _ref4.count,
+      paddingStart = _ref4.paddingStart,
+      scrollMargin = _ref4.scrollMargin,
+      getItemKey = _ref4.getItemKey;
+    var min = _this.pendingMeasuredCacheIndexes.length > 0 ? Math.min.apply(Math, _this.pendingMeasuredCacheIndexes) : 0;
+    _this.pendingMeasuredCacheIndexes = [];
+    var measurements = _this.measurementsCache.slice(0, min);
+    for (var _i2 = min; _i2 < count; _i2++) {
+      var key = getItemKey(_i2);
+      var furthestMeasurement = _this.options.lanes === 1 ? measurements[_i2 - 1] : _this.getFurthestMeasurement(measurements, _i2);
+      var start = furthestMeasurement ? furthestMeasurement.end : paddingStart + scrollMargin;
+      var measuredSize = itemSizeCache.get(key);
+      var size = typeof measuredSize === 'number' ? measuredSize : _this.options.estimateSize(_i2);
+      var end = start + size;
+      var lane = furthestMeasurement ? furthestMeasurement.lane : _i2 % _this.options.lanes;
       measurements[_i2] = {
         index: _i2,
-        start: _start,
-        size: _size,
-        end: _end,
-        key: key
+        start: start,
+        size: size,
+        end: end,
+        key: key,
+        lane: lane
       };
     }
-
+    _this.measurementsCache = measurements;
     return measurements;
-  }, [estimateSize, measuredCache, paddingStart, size, keyExtractor]);
-  var totalSize = (((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || paddingStart) + paddingEnd;
-  latestRef.current.measurements = measurements;
-  latestRef.current.totalSize = totalSize;
-  var element = onScrollElement ? onScrollElement.current : parentRef.current;
-  var scrollOffsetFnRef = React.useRef(scrollOffsetFn);
-  scrollOffsetFnRef.current = scrollOffsetFn;
-  useIsomorphicLayoutEffect$1(function () {
-    if (!element) {
-      setScrollOffset(0);
-      return;
+  }, {
+    key: process.env.NODE_ENV !== 'production' && 'getMeasurements',
+    debug: function debug() {
+      return _this.options.debug;
     }
-
-    var onScroll = function onScroll(event) {
-      var offset = scrollOffsetFnRef.current ? scrollOffsetFnRef.current(event) : element[scrollKey];
-      setScrollOffset(offset);
-    };
-
-    onScroll();
-    element.addEventListener('scroll', onScroll, {
-      capture: false,
-      passive: true
-    });
-    return function () {
-      element.removeEventListener('scroll', onScroll);
-    };
-  }, [element, scrollKey]);
-
-  var _calculateRange = calculateRange(latestRef.current),
-      start = _calculateRange.start,
-      end = _calculateRange.end;
-
-  var indexes = React.useMemo(function () {
-    return rangeExtractor({
-      start: start,
-      end: end,
+  });
+  this.calculateRange = memo(function () {
+    return [_this.getMeasurements(), _this.getSize(), _this.scrollOffset];
+  }, function (measurements, outerSize, scrollOffset) {
+    return _this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
+      measurements: measurements,
+      outerSize: outerSize,
+      scrollOffset: scrollOffset
+    }) : null;
+  }, {
+    key: process.env.NODE_ENV !== 'production' && 'calculateRange',
+    debug: function debug() {
+      return _this.options.debug;
+    }
+  });
+  this.getIndexes = memo(function () {
+    return [_this.options.rangeExtractor, _this.calculateRange(), _this.options.overscan, _this.options.count];
+  }, function (rangeExtractor, range, overscan, count) {
+    return range === null ? [] : rangeExtractor(_extends({}, range, {
       overscan: overscan,
-      size: measurements.length
-    });
-  }, [start, end, overscan, measurements.length, rangeExtractor]);
-  var measureSizeRef = React.useRef(measureSize);
-  measureSizeRef.current = measureSize;
-  var virtualItems = React.useMemo(function () {
-    var virtualItems = [];
-
-    var _loop = function _loop(k, len) {
-      var i = indexes[k];
-      var measurement = measurements[i];
-
-      var item = _extends({}, measurement, {
-        measureRef: function measureRef(el) {
-          if (el) {
-            var measuredSize = measureSizeRef.current(el, horizontal);
-
-            if (measuredSize !== item.size) {
-              var _scrollOffset = latestRef.current.scrollOffset;
-
-              if (item.start < _scrollOffset) {
-                defaultScrollToFn(_scrollOffset + (measuredSize - item.size));
-              }
-
-              pendingMeasuredCacheIndexesRef.current.push(i);
-              setMeasuredCache(function (old) {
-                var _extends2;
-
-                return _extends({}, old, (_extends2 = {}, _extends2[item.key] = measuredSize, _extends2));
-              });
-            }
-          }
+      count: count
+    }));
+  }, {
+    key: process.env.NODE_ENV !== 'production' && 'getIndexes',
+    debug: function debug() {
+      return _this.options.debug;
+    }
+  });
+  this.indexFromElement = function (node) {
+    var attributeName = _this.options.indexAttribute;
+    var indexStr = node.getAttribute(attributeName);
+    if (!indexStr) {
+      console.warn("Missing attribute name '" + attributeName + "={index}' on measured element.");
+      return -1;
+    }
+    return parseInt(indexStr, 10);
+  };
+  this._measureElement = function (node, entry) {
+    var item = _this.measurementsCache[_this.indexFromElement(node)];
+    if (!item || !node.isConnected) {
+      _this.measureElementCache.forEach(function (cached, key) {
+        if (cached === node) {
+          _this.observer.unobserve(node);
+          _this.measureElementCache["delete"](key);
         }
       });
-
-      virtualItems.push(item);
-    };
-
+      return;
+    }
+    var prevNode = _this.measureElementCache.get(item.key);
+    if (prevNode !== node) {
+      if (prevNode) {
+        _this.observer.unobserve(prevNode);
+      }
+      _this.observer.observe(node);
+      _this.measureElementCache.set(item.key, node);
+    }
+    var measuredItemSize = _this.options.measureElement(node, entry, _this);
+    _this.resizeItem(item, measuredItemSize);
+  };
+  this.resizeItem = function (item, size) {
+    var _this$itemSizeCache$g;
+    var itemSize = (_this$itemSizeCache$g = _this.itemSizeCache.get(item.key)) != null ? _this$itemSizeCache$g : item.size;
+    var delta = size - itemSize;
+    if (delta !== 0) {
+      if (item.start < _this.scrollOffset) {
+        if (process.env.NODE_ENV !== 'production' && _this.options.debug) {
+          console.info('correction', delta);
+        }
+        _this._scrollToOffset(_this.scrollOffset, {
+          adjustments: _this.scrollAdjustments += delta,
+          behavior: undefined
+        });
+      }
+      _this.pendingMeasuredCacheIndexes.push(item.index);
+      _this.itemSizeCache = new Map(_this.itemSizeCache.set(item.key, size));
+      _this.notify(false);
+    }
+  };
+  this.measureElement = function (node) {
+    if (!node) {
+      return;
+    }
+    _this._measureElement(node, undefined);
+  };
+  this.getVirtualItems = memo(function () {
+    return [_this.getIndexes(), _this.getMeasurements()];
+  }, function (indexes, measurements) {
+    var virtualItems = [];
     for (var k = 0, len = indexes.length; k < len; k++) {
-      _loop(k);
+      var _i3 = indexes[k];
+      var measurement = measurements[_i3];
+      virtualItems.push(measurement);
     }
-
     return virtualItems;
-  }, [indexes, defaultScrollToFn, horizontal, measurements]);
-  var mountedRef = React.useRef(false);
-  useIsomorphicLayoutEffect$1(function () {
-    if (mountedRef.current) {
-      setMeasuredCache({});
+  }, {
+    key: process.env.NODE_ENV !== 'production' && 'getIndexes',
+    debug: function debug() {
+      return _this.options.debug;
     }
-
-    mountedRef.current = true;
-  }, [estimateSize]);
-  var scrollToOffset = React.useCallback(function (toOffset, _temp) {
-    var _ref2 = _temp === void 0 ? {
-      align: 'start'
-    } : _temp,
-        align = _ref2.align;
-
-    var _latestRef$current = latestRef.current,
-        scrollOffset = _latestRef$current.scrollOffset,
-        outerSize = _latestRef$current.outerSize;
-
+  });
+  this.getVirtualItemForOffset = function (offset) {
+    var measurements = _this.getMeasurements();
+    return notUndefined(measurements[findNearestBinarySearch(0, measurements.length - 1, function (index) {
+      return notUndefined(measurements[index]).start;
+    }, offset)]);
+  };
+  this.getOffsetForAlignment = function (toOffset, align) {
+    var size = _this.getSize();
     if (align === 'auto') {
-      if (toOffset <= scrollOffset) {
+      if (toOffset <= _this.scrollOffset) {
         align = 'start';
-      } else if (toOffset >= scrollOffset + outerSize) {
+      } else if (toOffset >= _this.scrollOffset + size) {
         align = 'end';
       } else {
         align = 'start';
       }
     }
-
     if (align === 'start') {
-      scrollTo(toOffset);
+      toOffset = toOffset;
     } else if (align === 'end') {
-      scrollTo(toOffset - outerSize);
+      toOffset = toOffset - size;
     } else if (align === 'center') {
-      scrollTo(toOffset - outerSize / 2);
-    }
-  }, [scrollTo]);
-  var tryScrollToIndex = React.useCallback(function (index, _temp2) {
-    var _ref3 = _temp2 === void 0 ? {
-      align: 'auto'
-    } : _temp2,
-        align = _ref3.align,
-        rest = _objectWithoutPropertiesLoose$1(_ref3, _excluded$1);
-
-    var _latestRef$current2 = latestRef.current,
-        measurements = _latestRef$current2.measurements,
-        scrollOffset = _latestRef$current2.scrollOffset,
-        outerSize = _latestRef$current2.outerSize;
-    var measurement = measurements[Math.max(0, Math.min(index, size - 1))];
-
-    if (!measurement) {
-      return;
+      toOffset = toOffset - size / 2;
     }
-
+    var scrollSizeProp = _this.options.horizontal ? 'scrollWidth' : 'scrollHeight';
+    var scrollSize = _this.scrollElement ? 'document' in _this.scrollElement ? _this.scrollElement.document.documentElement[scrollSizeProp] : _this.scrollElement[scrollSizeProp] : 0;
+    var maxOffset = scrollSize - _this.getSize();
+    return Math.max(Math.min(maxOffset, toOffset), 0);
+  };
+  this.getOffsetForIndex = function (index, align) {
+    if (align === void 0) {
+      align = 'auto';
+    }
+    index = Math.max(0, Math.min(index, _this.options.count - 1));
+    var measurement = notUndefined(_this.getMeasurements()[index]);
     if (align === 'auto') {
-      if (measurement.end >= scrollOffset + outerSize) {
+      if (measurement.end >= _this.scrollOffset + _this.getSize() - _this.options.scrollPaddingEnd) {
         align = 'end';
-      } else if (measurement.start <= scrollOffset) {
+      } else if (measurement.start <= _this.scrollOffset + _this.options.scrollPaddingStart) {
         align = 'start';
       } else {
-        return;
+        return [_this.scrollOffset, align];
       }
     }
-
-    var toOffset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
-    scrollToOffset(toOffset, _extends({
-      align: align
-    }, rest));
-  }, [scrollToOffset, size]);
-  var scrollToIndex = React.useCallback(function (index, options) {
-    // We do a double request here because of
-    // dynamic sizes which can cause offset shift
-    // and end up in the wrong spot. Unfortunately,
-    // we can't know about those dynamic sizes until
-    // we try and render them. So double down!
-    tryScrollToIndex(index, options);
-    requestAnimationFrame(function () {
-      tryScrollToIndex(index, options);
+    var toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
+    return [_this.getOffsetForAlignment(toOffset, align), align];
+  };
+  this.isDynamicMode = function () {
+    return _this.measureElementCache.size > 0;
+  };
+  this.cancelScrollToIndex = function () {
+    if (_this.scrollToIndexTimeoutId !== null) {
+      clearTimeout(_this.scrollToIndexTimeoutId);
+      _this.scrollToIndexTimeoutId = null;
+    }
+  };
+  this.scrollToOffset = function (toOffset, _temp) {
+    var _ref5 = _temp === void 0 ? {} : _temp,
+      _ref5$align = _ref5.align,
+      align = _ref5$align === void 0 ? 'start' : _ref5$align,
+      behavior = _ref5.behavior;
+    _this.cancelScrollToIndex();
+    if (behavior === 'smooth' && _this.isDynamicMode()) {
+      console.warn('The `smooth` scroll behavior is not fully supported with dynamic size.');
+    }
+    _this._scrollToOffset(_this.getOffsetForAlignment(toOffset, align), {
+      adjustments: undefined,
+      behavior: behavior
     });
-  }, [tryScrollToIndex]);
-  return {
-    virtualItems: virtualItems,
-    totalSize: totalSize,
-    scrollToOffset: scrollToOffset,
-    scrollToIndex: scrollToIndex,
-    measure: measure
   };
+  this.scrollToIndex = function (index, _temp2) {
+    var _ref6 = _temp2 === void 0 ? {} : _temp2,
+      _ref6$align = _ref6.align,
+      initialAlign = _ref6$align === void 0 ? 'auto' : _ref6$align,
+      behavior = _ref6.behavior;
+    index = Math.max(0, Math.min(index, _this.options.count - 1));
+    _this.cancelScrollToIndex();
+    if (behavior === 'smooth' && _this.isDynamicMode()) {
+      console.warn('The `smooth` scroll behavior is not fully supported with dynamic size.');
+    }
+    var _this$getOffsetForInd = _this.getOffsetForIndex(index, initialAlign),
+      toOffset = _this$getOffsetForInd[0],
+      align = _this$getOffsetForInd[1];
+    _this._scrollToOffset(toOffset, {
+      adjustments: undefined,
+      behavior: behavior
+    });
+    if (behavior !== 'smooth' && _this.isDynamicMode()) {
+      _this.scrollToIndexTimeoutId = setTimeout(function () {
+        _this.scrollToIndexTimeoutId = null;
+        var elementInDOM = _this.measureElementCache.has(_this.options.getItemKey(index));
+        if (elementInDOM) {
+          var _this$getOffsetForInd2 = _this.getOffsetForIndex(index, align),
+            _toOffset = _this$getOffsetForInd2[0];
+          if (!approxEqual(_toOffset, _this.scrollOffset)) {
+            _this.scrollToIndex(index, {
+              align: align,
+              behavior: behavior
+            });
+          }
+        } else {
+          _this.scrollToIndex(index, {
+            align: align,
+            behavior: behavior
+          });
+        }
+      });
+    }
+  };
+  this.scrollBy = function (delta, _temp3) {
+    var _ref7 = _temp3 === void 0 ? {} : _temp3,
+      behavior = _ref7.behavior;
+    _this.cancelScrollToIndex();
+    if (behavior === 'smooth' && _this.isDynamicMode()) {
+      console.warn('The `smooth` scroll behavior is not fully supported with dynamic size.');
+    }
+    _this._scrollToOffset(_this.scrollOffset + delta, {
+      adjustments: undefined,
+      behavior: behavior
+    });
+  };
+  this.getTotalSize = function () {
+    var _this$getMeasurements;
+    return (((_this$getMeasurements = _this.getMeasurements()[_this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || _this.options.paddingStart) - _this.options.scrollMargin + _this.options.paddingEnd;
+  };
+  this._scrollToOffset = function (offset, _ref8) {
+    var adjustments = _ref8.adjustments,
+      behavior = _ref8.behavior;
+    _this.options.scrollToFn(offset, {
+      behavior: behavior,
+      adjustments: adjustments
+    }, _this);
+  };
+  this.measure = function () {
+    _this.itemSizeCache = new Map();
+    _this.notify(false);
+  };
+  this.setOptions(_opts);
+  this.scrollRect = this.options.initialRect;
+  this.scrollOffset = this.options.initialOffset;
+  this.measurementsCache = this.options.initialMeasurementsCache;
+  this.measurementsCache.forEach(function (item) {
+    _this.itemSizeCache.set(item.key, item.size);
+  });
+  this.maybeNotify();
 };
-
 var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
   while (low <= high) {
     var middle = (low + high) / 2 | 0;
     var currentValue = getCurrentValue(middle);
-
     if (currentValue < value) {
       low = middle + 1;
     } else if (currentValue > value) {
@@ -3818,37 +4017,80 @@ var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCur
       return middle;
     }
   }
-
   if (low > 0) {
     return low - 1;
   } else {
     return 0;
   }
 };
-
-function calculateRange(_ref4) {
-  var measurements = _ref4.measurements,
-      outerSize = _ref4.outerSize,
-      scrollOffset = _ref4.scrollOffset;
-  var size = measurements.length - 1;
-
+function calculateRange(_ref9) {
+  var measurements = _ref9.measurements,
+    outerSize = _ref9.outerSize,
+    scrollOffset = _ref9.scrollOffset;
+  var count = measurements.length - 1;
   var getOffset = function getOffset(index) {
     return measurements[index].start;
   };
-
-  var start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
-  var end = start;
-
-  while (end < size && measurements[end].end < scrollOffset + outerSize) {
-    end++;
+  var startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
+  var endIndex = startIndex;
+  while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
+    endIndex++;
   }
-
   return {
-    start: start,
-    end: end
+    startIndex: startIndex,
+    endIndex: endIndex
   };
 }
 
+/**
+ * react-virtual
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+//
+
+var useIsomorphicLayoutEffect$1 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+function useVirtualizerBase(options) {
+  var rerender = React.useReducer(function () {
+    return {};
+  }, {})[1];
+  var resolvedOptions = _extends$1({}, options, {
+    onChange: function onChange(instance, sync) {
+      if (sync) {
+        flushSync(rerender);
+      } else {
+        rerender();
+      }
+      options.onChange == null ? void 0 : options.onChange(instance, sync);
+    }
+  });
+  var _React$useState = React.useState(function () {
+      return new Virtualizer(resolvedOptions);
+    }),
+    instance = _React$useState[0];
+  instance.setOptions(resolvedOptions);
+  React.useEffect(function () {
+    return instance._didMount();
+  }, []);
+  useIsomorphicLayoutEffect$1(function () {
+    return instance._willUpdate();
+  });
+  return instance;
+}
+function useVirtualizer(options) {
+  return useVirtualizerBase(_extends$1({
+    observeElementRect: observeElementRect,
+    observeElementOffset: observeElementOffset,
+    scrollToFn: elementScroll
+  }, options));
+}
+
 /**
  * Custom hook for implementing infinite scrolling in a table.
  *
@@ -3866,7 +4108,6 @@ function calculateRange(_ref4) {
  * });
  */
 const useInfiniteScroll = (props) => {
-    var _a, _b;
     //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table
     const fetchMoreOnBottomReached = useCallback((containerRefElement) => {
         var _a;
@@ -3880,21 +4121,23 @@ const useInfiniteScroll = (props) => {
             }
         }
     }, [props.pagination]);
-    //Virtualizing is optional, but might be necessary if we are going to potentially have hundreds or thousands of rows
-    const rowVirtualizer = useVirtual({
-        parentRef: props.containerRef,
-        size: props.rowSize,
+    const rowVirtualizer = useVirtualizer({
+        count: props.rowSize,
+        getScrollElement: () => props.containerRef.current,
+        estimateSize: useCallback((i) => props.rowHeight, [props.rowHeight]),
         overscan: 10,
     });
-    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
-    const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0;
-    const paddingBottom = virtualRows.length > 0 ? totalSize - (((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0) : 0;
+    useEffect(() => {
+        // this ensures the cache is cleared if the rowHeight changes
+        if (props.rowHeight) {
+            rowVirtualizer.measure();
+        }
+    }, [props.rowHeight, rowVirtualizer]);
+    const { getVirtualItems, getTotalSize } = rowVirtualizer;
     return {
-        paddingTop,
-        paddingBottom,
         fetchMoreOnBottomReached,
-        rowVirtualizer,
-        virtualRows,
+        getTotalSize,
+        getVirtualItems,
     };
 };
 
@@ -3905,19 +4148,23 @@ const useInfiniteScroll = (props) => {
  * @returns {JSX.Element} Table component
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Table = (props) => {
-    var _a, _b;
+const Table = (_a) => {
+    var _b, _c;
+    var { rowHeight = 75 } = _a, props = __rest(_a, ["rowHeight"]);
     //we need a reference to the scrolling element for logic down below
     const tableContainerRef = useRef(null);
     const [t] = useTranslation();
-    const { fetchMoreOnBottomReached, virtualRows, paddingTop, paddingBottom } = useInfiniteScroll({
+    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize } = useInfiniteScroll({
         pagination: props.pagination,
         containerRef: tableContainerRef,
         rowSize: props.getRowModel().rows.length || 0,
+        rowHeight,
     });
     const hasResults = props.getRowModel().rows.length > 0;
-    return (jsxs(Card, { className: `flex flex-col overflow-hidden ${props.className || ""}`, dataTestId: props.dataTestId, children: [(props.headerLeftActions || props.headerRightActions) && (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex", children: props.headerLeftActions }), jsx("div", { className: "flex", children: props.headerRightActions })] })), jsx("div", { className: "min-h[500px] h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxs(TableRoot, { style: {
-                        width: props.getCenterTotalSize(),
+    return (jsxs(Card, { className: `flex flex-col overflow-hidden ${props.className || ""}`, dataTestId: props.dataTestId, children: [(props.headerLeftActions || props.headerRightActions) && (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex", children: props.headerLeftActions }), jsx("div", { className: "flex", children: props.headerRightActions })] })), jsx("div", { className: "min-h[500px] h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), children: jsxs(TableRoot, { style: {
+                        height: getTotalSize(),
+                        width: "100%",
+                        position: "relative",
                     }, children: [jsx(Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsx(Tr, { className: "flex", children: headerGroup.headers.map(header => {
                                     var _a, _b, _c, _d;
                                     return (jsxs(Th, { style: {
@@ -3926,25 +4173,28 @@ const Table = (props) => {
                                             maxWidth: header.column.columnDef.maxSize,
                                         }, className: "relative", children: [header.isPlaceholder ? null : (jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none" : ""} flex items-center gap-2 py-2 overflow-hidden pr-3`,
                                                 onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_b = (_a = header.column.columnDef) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.subHeader) ? (jsx(Text, { size: "small", subtle: true, children: (_d = (_c = header.column.columnDef) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
-                                }) }, headerGroup.id))) }), hasResults ? (jsxs(Tbody, { className: "text-sm font-normal", children: [paddingTop > 0 && (jsx(Tr, { layout: "flex", children: jsx(Td, { style: { height: `${paddingTop}px` } }) })), virtualRows.map(virtualRow => {
-                                    const row = props.getRowModel().rows[virtualRow.index];
-                                    if (!row) {
-                                        return null;
-                                    }
-                                    else {
-                                        return (jsx(Tr, { layout: "flex", onClick: () => (props.onRowClick ? props.onRowClick(row) : row.getToggleSelectedHandler()), className: `${(props.onRowClick || row.getCanSelect()) && "cursor-pointer"} hover:bg-neutral-100`, dataTestId: `table-body-row-${virtualRow.index}`, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
-                                                return (jsx(Td, { key: cell.id,
-                                                    style: {
-                                                        width: cell.column.getSize(),
-                                                        minWidth: cell.column.columnDef.minSize,
-                                                        maxWidth: cell.column.columnDef.maxSize,
-                                                    }, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
-                                            }) }, row.id));
-                                    }
-                                }), paddingBottom > 0 && (jsx(Tr, { layout: "flex", children: jsx(Td, { style: { height: `${paddingBottom}px` } }) }))] })) : (jsx("tbody", { children: jsx("tr", { children: jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsx(EmptyState, { image: "ROAD_BLOCK", description: t("table.noResults"), className: "absolute inset-0", loading: props === null || props === void 0 ? void 0 : props.loading })) }) }) }))] }) }), jsxs("div", { className: "flex items-center p-2", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
+                                }) }, headerGroup.id))) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", children: getVirtualItems().map((virtualRow, index) => {
+                                const row = props.getRowModel().rows[virtualRow.index];
+                                if (!row) {
+                                    return null;
+                                }
+                                else {
+                                    return (jsx(Tr, { layout: "flex", style: {
+                                            height: `${virtualRow.size}px`,
+                                            transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
+                                        }, onClick: () => (props.onRowClick ? props.onRowClick(row) : row.getToggleSelectedHandler()), className: `${(props.onRowClick || row.getCanSelect()) && "cursor-pointer"} hover:bg-neutral-100`, dataTestId: `table-body-row-${virtualRow.index}`, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
+                                            return (jsx(Td, { key: cell.id,
+                                                style: {
+                                                    width: cell.column.getSize(),
+                                                    minWidth: cell.column.columnDef.minSize,
+                                                    maxWidth: cell.column.columnDef.maxSize,
+                                                }, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
+                                        }) }, row.id));
+                                }
+                            }) })) : (jsx("tbody", { children: jsx("tr", { children: jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsx(EmptyState, { image: "ROAD_BLOCK", description: t("table.noResults"), className: "absolute inset-0", loading: props === null || props === void 0 ? void 0 : props.loading })) }) }) }))] }) }), jsxs("div", { className: "flex items-center p-2", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
                             count: props.getRowModel().rows.length,
-                            total: ((_b = (_a = props.pagination) === null || _a === void 0 ? void 0 : _a.pageInfo) === null || _b === void 0 ? void 0 : _b.count) || 0,
-                        }) }), props.footerRightActions && jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })] })] }));
+                            total: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.count) || 0,
+                        }) }), props.pagination.isLoading ? (jsx("span", { className: "ml-2", children: jsx(Spinner, { size: "small" }) })) : null, props.footerRightActions && jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })] })] }));
 };
 
 function getDefaultExportFromCjs (x) {
@@ -6273,7 +6523,7 @@ var INSTANCE_SYM = Symbol.for('__REACT_DND_CONTEXT_INSTANCE__');
  * A React component that provides the React-DnD context
  */
 
-var DndProvider = memo$1(function DndProvider(_ref) {
+var DndProvider = memo$2(function DndProvider(_ref) {
   var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -8941,9 +9191,16 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder
     if (!columns) {
         return null;
     }
-    return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom-start", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ViewColumns", size: "small" }), color: "secondary", variant: "transparent", size: "small", children: jsx("span", { className: "hidden sm:block", children: numberOfHiddenColumns > 0
-                                    ? t("table.columnFilters.hiddenColumnCount", { count: numberOfHiddenColumns })
-                                    : t("table.columnFilters.columns") }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto pr-4", children: [jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsx(Text, { subtle: true, size: "small", children: t("table.columnFilters.title") }), jsx(Button, { className: "p-0", color: "secondary", variant: "transparent", size: "small", onClick: () => resetHiddenColumns(), children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, setColumnOrder: setColumnOrder, onUserEvent: onUserEvent })] })) })] }) }) }));
+    const getColumnButtonText = () => {
+        if (numberOfHiddenColumns > 1) {
+            return t("table.columnFilters.hiddenColumnsCount", { count: numberOfHiddenColumns });
+        }
+        if (numberOfHiddenColumns === 1) {
+            return t("table.columnFilters.hiddenColumnCount", { count: numberOfHiddenColumns });
+        }
+        return t("table.columnFilters.columns");
+    };
+    return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom-start", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ViewColumns", size: "small" }), color: "secondary", variant: "transparent", size: "small", children: jsx("span", { className: "hidden sm:block", children: getColumnButtonText() }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto pr-4", children: [jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsx(Text, { subtle: true, size: "small", children: t("table.columnFilters.title") }), jsx(Button, { className: "p-0", color: "secondary", variant: "transparent", size: "small", onClick: () => resetHiddenColumns(), children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, setColumnOrder: setColumnOrder, onUserEvent: onUserEvent })] })) })] }) }) }));
 };
 const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
     const [localColumns, setLocalColumns] = React.useState(columns);