@economic/taco 2.46.9-alpha.1 → 2.47.0-server-1

package/dist/taco.cjs.development.js

@@ -31,12 +31,12 @@ var reactPortal = require('@radix-ui/react-portal');
 var reactTable = require('@tanstack/react-table');
 var get = _interopDefault(require('lodash/get'));
 var reactVirtual = require('@tanstack/react-virtual');
-var reactIntersectionObserver = require('react-intersection-observer');
 var core = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
 var SortablePrimitive = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
 var reactTable$1 = require('react-table');
+var reactIntersectionObserver = require('react-intersection-observer');
 var reactWindow = require('react-window');
 var InfiniteLoader = _interopDefault(require('react-window-infinite-loader'));
 var set = _interopDefault(require('lodash/set'));
@@ -3946,11 +3946,6 @@ const Title = /*#__PURE__*/React.forwardRef(function AlertDialogTitle(props, ref
     className: "mr-2"
   })) : undefined, props.children);
 });
-const Description = /*#__PURE__*/React.forwardRef(function AlertDialogDescription(props, ref) {
-  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Description, Object.assign({
-    ref: ref
-  }, props));
-});
 const Content = /*#__PURE__*/React.forwardRef(function AlertDialogContent(props, ref) {
   const className = cn('p-6', getDialogPositionClassnames(), getDialogStylingClassnames(), getDialogSizeClassnames('dialog'));
   return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Portal, null, /*#__PURE__*/React.createElement(AlertDialogPrimitive.Overlay, {
@@ -3985,7 +3980,6 @@ const AlertDialog = /*#__PURE__*/React.forwardRef(function AlertDialog(props, re
 });
 AlertDialog.Trigger = Trigger;
 AlertDialog.Content = Content;
-AlertDialog.Description = Description;
 AlertDialog.Title = Title;
 AlertDialog.Cancel = Cancel;
 AlertDialog.Action = Action;
@@ -6625,7 +6619,7 @@ const useDraggable = ref => {
 };
 
 const Title$1 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
-  const className = cn(!props.asChild ? 'text-center' : '', props.className);
+  const className = cn('text-center', props.className);
   return /*#__PURE__*/React.createElement(DialogPrimitive.Title, Object.assign({}, props, {
     className: className,
     ref: ref
@@ -6698,7 +6692,6 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   return /*#__PURE__*/React.createElement(DialogPrimitive.Portal, null, /*#__PURE__*/React.createElement(DialogPrimitive.Overlay, {
     asChild: true
   }, /*#__PURE__*/React.createElement(Backdrop, null, /*#__PURE__*/React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
-    "aria-describedby": undefined,
     className: className,
     onEscapeKeyDown: handleEscapeKeyDown,
     onInteractOutside: handleInteractOutside,
@@ -7226,7 +7219,6 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
   return focusTrap ? (/*#__PURE__*/React__default.createElement(DialogPrimitive.Content, Object.assign({
     forceMount: true
   }, otherProps, {
-    "aria-describedby": undefined,
     className: contentClassName,
     onEscapeKeyDown: handleEscapeKeyDown,
     onInteractOutside: variant === 'overlay' ? undefined : event => event.preventDefault(),
@@ -9350,8 +9342,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref)
     name: popover.open ? 'chevron-up' : 'chevron-down'
   }))), /*#__PURE__*/React.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
     align: "start",
-    sideOffset: 4,
-    onEscapeKeyDown: event => event.preventDefault()
+    sideOffset: 4
   }, props.multiselect ? /*#__PURE__*/React.createElement(MultiListbox, Object.assign({}, commonListboxProps)) : /*#__PURE__*/React.createElement(Listbox, Object.assign({}, commonListboxProps)))), /*#__PURE__*/React.createElement("input", Object.assign({}, input, {
     className: "hidden",
     type: "text"
@@ -10196,6 +10187,9 @@ function unfreezeAllExternalColumns(leftPinnedState) {
 function freezeUptoExternalColumn(index, columns) {
   return columns.slice(0, index + 1);
 }
+function getHiddenColumns(columnVisibility = {}) {
+  return Object.keys(columnVisibility).filter(c => columnVisibility[c] === false);
+}
 
 function getSettings(table) {
   const meta = table.options.meta;
@@ -10477,6 +10471,12 @@ function configureReactTableOptions(options, props, localization) {
       var _column$columnDef$met;
       return ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.enableSearch) !== false && column.getIsVisible();
     };
+    // enter controlled search mode (controlled could be local state, but usually the server)
+    if (props.onChangeSearch) {
+      if (props._experimentalDataLoader2) {
+        tableOptions.manualFiltering = true;
+      }
+    }
   }
   if (tableOptions.enableSorting) {
     // enter controlled sort mode (controlled could be local state, but usually the server)
@@ -10534,6 +10534,7 @@ const DEFAULT_PRESET = {
   enableColumnHiding: false,
   enableColumnResizing: false,
   enableRowExpansion: false,
+  enableRowExpansionAll: true,
   enableRowSelection: false,
   // custom -- common between all table types
   enableColumnOrdering: false,
@@ -10560,6 +10561,7 @@ const presets = {
     enableColumnHiding: true,
     enableColumnResizing: true,
     enableRowExpansion: true,
+    enableRowExpansionAll: true,
     enableRowSelection: true,
     // custom -- common between all table types
     enableColumnOrdering: true,
@@ -10585,6 +10587,7 @@ const presets = {
     enableColumnHiding: false,
     enableColumnResizing: false,
     enableRowExpansion: true,
+    enableRowExpansionAll: true,
     enableRowSelection: true,
     // custom -- common between all table types
     enableColumnOrdering: false,
@@ -10610,6 +10613,7 @@ const presets = {
     enableColumnHiding: false,
     enableColumnResizing: false,
     enableRowExpansion: true,
+    enableRowExpansionAll: true,
     enableRowSelection: false,
     // custom -- common between all table types
     enableColumnOrdering: false,
@@ -10627,7 +10631,7 @@ const presets = {
   }
 };
 function getTableFeaturePreset(props) {
-  var _props$enableRowActio, _props$enableRowClick, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowSelec, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions, _props$enableRowHeigh, _props$enableSaveSett;
+  var _props$enableRowActio, _props$enableRowClick, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowExpan2, _props$enableRowSelec, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions, _props$enableRowHeigh, _props$enableSaveSett;
   const presetOptions = props.preset ? presets[props.preset] : DEFAULT_PRESET;
   const enableRowActions = (_props$enableRowActio = props.enableRowActions) !== null && _props$enableRowActio !== void 0 ? _props$enableRowActio : presetOptions.enableRowActions;
   const enableRowClick = (_props$enableRowClick = props.enableRowClick) !== null && _props$enableRowClick !== void 0 ? _props$enableRowClick : presetOptions.enableRowClick;
@@ -10635,6 +10639,7 @@ function getTableFeaturePreset(props) {
   const enableRowDrop = (_props$enableRowDrop = props.enableRowDrop) !== null && _props$enableRowDrop !== void 0 ? _props$enableRowDrop : presetOptions.enableRowDrop;
   const enableRowGoto = (_props$enableRowGoto = props.enableRowGoto) !== null && _props$enableRowGoto !== void 0 ? _props$enableRowGoto : presetOptions.enableRowGoto;
   const enableRowExpansion = (_props$enableRowExpan = props.enableRowExpansion) !== null && _props$enableRowExpan !== void 0 ? _props$enableRowExpan : presetOptions.enableRowExpansion;
+  const enableRowExpansionAll = (_props$enableRowExpan2 = props.enableRowExpansionAll) !== null && _props$enableRowExpan2 !== void 0 ? _props$enableRowExpan2 : presetOptions.enableRowExpansionAll;
   const enableRowSelection = (_props$enableRowSelec = props.enableRowSelection) !== null && _props$enableRowSelec !== void 0 ? _props$enableRowSelec : presetOptions.enableRowSelection;
   return {
     // react-table built-in
@@ -10659,6 +10664,7 @@ function getTableFeaturePreset(props) {
     enableRowDrag: enableRowDrag && !!props.onRowDrag,
     enableRowDrop: enableRowDrop && !!props.onRowDrop,
     enableRowGoto: enableRowGoto && !!props.onRowGoto,
+    enableRowExpansionAll: enableRowExpansion && enableRowExpansionAll && !!props.rowExpansionRenderer,
     enableRowHeight: (_props$enableRowHeigh = props.enableRowHeight) !== null && _props$enableRowHeigh !== void 0 ? _props$enableRowHeigh : presetOptions.enableRowHeight,
     enableSaveSettings: (_props$enableSaveSett = props.enableSaveSettings) !== null && _props$enableSaveSett !== void 0 ? _props$enableSaveSett : presetOptions.enableSaveSettings
   };
@@ -10854,7 +10860,7 @@ function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
         return index;
       });
     }
-  }, [rowActiveIndex, length, isEnabled]);
+  }, [rowActiveIndex, isEnabled]);
   return {
     isEnabled,
     rowActiveIndex,
@@ -10903,9 +10909,10 @@ function useTableRowClick(isEnabled = false, onRowClick) {
   };
 }
 
-function useTableRowExpansion(isEnabled = false, rowExpansionRenderer) {
+function useTableRowExpansion(isEnabled = false, canExpandAll = true, rowExpansionRenderer) {
   return {
     isEnabled,
+    canExpandAll,
     rowExpansionRenderer: isEnabled ? rowExpansionRenderer : undefined
   };
 }
@@ -10969,7 +10976,7 @@ function useTableRowSelection(isEnabled = false) {
     - Highlighting search results, this is custom and only uses the state part of globalFilter (to store the search query)
     - Filtering of results, this is essentially the built in filtering, and relies on enableGlobalFilter being on or off
 */
-function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {
+function useTableSearch(isEnabled = false, onChangeSearch, defaultEnableGlobalFilter = false) {
   const [enableGlobalFilter, _setEnableGlobalFilter] = React__default.useState(defaultEnableGlobalFilter);
   function setEnableGlobalFilter(enabled, instance) {
     _setEnableGlobalFilter(enabled);
@@ -10994,18 +11001,19 @@ function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {
     highlightedColumnIndexes,
     setHighlightedColumnIndexes,
     currentHighlightColumnIndex,
-    setCurrentHighlightColumnIndex
+    setCurrentHighlightColumnIndex,
+    handleSearch: isEnabled && typeof onChangeSearch === 'function' ? onChangeSearch : undefined
   };
 }
 
 // A type of promise-like that resolves synchronously and supports only one observer
-const _Pact = /*#__PURE__*/function () {
+var _Pact = /*#__PURE__*/function () {
   function _Pact() {}
   _Pact.prototype.then = function (onFulfilled, onRejected) {
-    const result = new _Pact();
-    const state = this.s;
+    var result = new _Pact();
+    var state = this.s;
     if (state) {
-      const callback = state & 1 ? onFulfilled : onRejected;
+      var callback = state & 1 ? onFulfilled : onRejected;
       if (callback) {
         try {
           _settle(result, 1, callback(this.v));
@@ -11019,7 +11027,7 @@ const _Pact = /*#__PURE__*/function () {
     }
     this.o = function (_this) {
       try {
-        const value = _this.v;
+        var value = _this.v;
         if (_this.s & 1) {
           _settle(result, 1, onFulfilled ? onFulfilled(value) : value);
         } else if (onRejected) {
@@ -11056,7 +11064,7 @@ function _settle(pact, state, value) {
     }
     pact.s = state;
     pact.v = value;
-    const observer = pact.o;
+    var observer = pact.o;
     if (observer) {
       observer(pact);
     }
@@ -11096,17 +11104,13 @@ function _forTo(array, body, check) {
   _cycle();
   return pact;
 }
-const _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = /*#__PURE__*/Symbol("Symbol.iterator")) : "@@iterator";
+var _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = /*#__PURE__*/Symbol("Symbol.iterator")) : "@@iterator";
 
 // Asynchronously iterate through an object's values
 // Uses for...of if the runtime supports it, otherwise iterates until length on a copy
 function _forOf(target, body, check) {
   if (typeof target[_iteratorSymbol] === "function") {
-    var iterator = target[_iteratorSymbol](),
-      step,
-      pact,
-      reject;
-    function _cycle(result) {
+    var _cycle = function _cycle(result) {
       try {
         while (!(step = iterator.next()).done && (!check || !check())) {
           result = body(step.value);
@@ -11127,13 +11131,17 @@ function _forOf(target, body, check) {
       } catch (e) {
         _settle(pact || (pact = new _Pact()), 2, e);
       }
-    }
+    };
+    var iterator = target[_iteratorSymbol](),
+      step,
+      pact,
+      reject;
     _cycle();
-    if (iterator.return) {
-      var _fixup = function (value) {
+    if (iterator["return"]) {
+      var _fixup = function _fixup(value) {
         try {
           if (!step.done) {
-            iterator.return();
+            iterator["return"]();
           }
         } catch (e) {}
         return value;
@@ -11160,7 +11168,7 @@ function _forOf(target, body, check) {
     return body(values[i]);
   }, check);
 }
-const _asyncIteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.asyncIterator || (Symbol.asyncIterator = /*#__PURE__*/Symbol("Symbol.asyncIterator")) : "@@asyncIterator";
+var _asyncIteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.asyncIterator || (Symbol.asyncIterator = /*#__PURE__*/Symbol("Symbol.asyncIterator")) : "@@asyncIterator";
 
 // Asynchronously call a function and send errors to recovery continuation
 function _catch(body, recover) {
@@ -11241,7 +11249,7 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
                 length.current = response.length;
                 nextData = Array(length.current).fill(undefined);
               } else {
-                nextData = [...currentData];
+                nextData = [].concat(currentData);
               }
               const startIndex = pageIndex * pageSize;
               nextData.splice(startIndex, pageSize, ...response.data);
@@ -11307,13 +11315,12 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
     try {
       if (_lastUsedSearch.current) {
         // we're searching, which means we need to refetch all with the correct sorting applied
-        loadAll(sorting, _lastUsedFilters.current);
+        return loadAll(sorting, _lastUsedFilters.current);
       } else {
         var _lastUsedPageIndex$cu2;
         // load the last page that we scrolled to
-        loadPage((_lastUsedPageIndex$cu2 = _lastUsedPageIndex.current) !== null && _lastUsedPageIndex$cu2 !== void 0 ? _lastUsedPageIndex$cu2 : 0, sorting, _lastUsedFilters.current);
+        return loadPage((_lastUsedPageIndex$cu2 = _lastUsedPageIndex.current) !== null && _lastUsedPageIndex$cu2 !== void 0 ? _lastUsedPageIndex$cu2 : 0, sorting, _lastUsedFilters.current);
       }
-      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -11322,13 +11329,12 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
     try {
       if (_lastUsedSearch.current) {
         // we're searching, which means we need to refetch all with the correct sorting applied
-        loadAll(_lastUsedSorting.current, filters);
+        return loadAll(_lastUsedSorting.current, filters);
       } else {
         var _lastUsedPageIndex$cu3;
         // load the last page that we scrolled to
-        loadPage((_lastUsedPageIndex$cu3 = _lastUsedPageIndex.current) !== null && _lastUsedPageIndex$cu3 !== void 0 ? _lastUsedPageIndex$cu3 : 0, _lastUsedSorting.current, filters);
+        return loadPage((_lastUsedPageIndex$cu3 = _lastUsedPageIndex.current) !== null && _lastUsedPageIndex$cu3 !== void 0 ? _lastUsedPageIndex$cu3 : 0, _lastUsedSorting.current, filters);
       }
-      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -11356,7 +11362,7 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
   }, invalidate];
 }
 
-function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE) {
+function useTableServerLoading(loadPage, loadAll, pages, pageSize = DEFAULT_PAGE_SIZE, _experimentalDataLoader2 = false) {
   const isEnabled = !!loadPage && !!loadAll;
   const [isReady, setReady] = React__default.useState(false);
   const [loadAllStatus, setLoadedStatus] = React__default.useState(exports.TableServerLoadAllState.Incomplete);
@@ -11411,13 +11417,15 @@ function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE)
     };
   }
   return {
+    pages,
     isEnabled,
     isReady,
     loadPage: _loadPage,
     loadAll: _loadAll,
     loadAllIfNeeded: _loadAllIfNeeded,
     loadAllStatus,
-    pageSize
+    pageSize,
+    _experimentalDataLoader2
   };
 }
 
@@ -11514,7 +11522,8 @@ function useTableFilterListener(table, onFilter) {
   const columnFilters = table.getState().columnFilters;
   useLazyEffect(() => {
     if (table.options.enableColumnFilters && typeof onFilter === 'function') {
-      onFilter(columnFilters);
+      const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
+      onFilter(columnFilters, hiddenColumns);
       if (table.options.enableRowSelection) {
         table.resetRowSelection();
       }
@@ -11572,11 +11581,12 @@ function useTableRowHeightListener(table) {
 }
 
 function useTableRowSelectionListener(table, onRowSelect) {
+  // note that the selected row model may not contain all rows in state when using server loading
   const rows = table.getSelectedRowModel().flatRows;
-  const rowSelection = React__default.useMemo(() => rows.map(row => row.original), [rows]);
+  const state = table.getState().rowSelection;
   useLazyEffect(() => {
     if (table.options.enableRowSelection && typeof onRowSelect === 'function') {
-      onRowSelect(rowSelection);
+      onRowSelect(rows.map(row => row.original), Object.keys(state));
     }
     /**
      * Casting to a boolean, since enableRowSelection can be a function,
@@ -11584,33 +11594,33 @@ function useTableRowSelectionListener(table, onRowSelect) {
      * we only need to know if selection was enabled or disabled, because enableRowSelection function
      * will be applied directly to particular rows.
      */
-  }, [!!table.options.enableRowSelection, JSON.stringify(rowSelection)]);
+  }, [!!table.options.enableRowSelection, state]);
 }
 
-function useTableSearchListener(table, onChangeSearch) {
+function useTableSearchListener(table) {
   const meta = table.options.meta;
   const localization = useLocalization();
-  const visibleColumns = table.getVisibleFlatColumns();
+  const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
+  const query = table.getState().globalFilter;
   // Need to re-run search when columns are getting shown/hidden.
-  React__default.useEffect(() => {
-    if (meta.search.isEnabled && visibleColumns.length > 0) {
-      const currentFilter = table.getState().globalFilter;
+  useLazyEffect(() => {
+    if (meta.search.isEnabled) {
+      const currentFilter = query;
       requestAnimationFrame(() => {
         table.resetGlobalFilter();
         table.setGlobalFilter(currentFilter);
       });
+      if (meta.search.handleSearch && meta.search.enableGlobalFilter && query) {
+        meta.search.handleSearch(query, hiddenColumns);
+      }
     }
-  }, [visibleColumns.length]);
+  }, [hiddenColumns.length]);
   // recalculates highlighted indexes whenever something important changes
-  React__default.useEffect(() => {
+  useLazyEffect(() => {
     if (meta.search.isEnabled) {
-      const query = table.getState().globalFilter;
       resetHighlightedColumnIndexes(query, table, localization);
-      if (typeof onChangeSearch === 'function') {
-        onChangeSearch(query);
-      }
     }
-  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), onChangeSearch]);
+  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, query, JSON.stringify(table.getState().sorting)]);
 }
 
 function useTableSettingsListener(table, onChangeSettings) {
@@ -11694,12 +11704,15 @@ function useTableSortingListener(table, onSort) {
 }
 
 function useTableServerLoadingListener(table, loadPage) {
-  const sorting = table.getState().sorting;
-  const columnFilters = table.getState().columnFilters;
+  const meta = table.options.meta;
   // trigger load of the first page on mount
   React__default.useEffect(() => {
     if (loadPage) {
-      loadPage(0, sorting, columnFilters);
+      const sorting = table.getState().sorting;
+      const columnFilters = table.getState().columnFilters;
+      const search = meta.search.enableGlobalFilter ? table.getState().globalFilter : undefined;
+      const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
+      loadPage(0, sorting, columnFilters, search, hiddenColumns);
     }
   }, []);
 }
@@ -11746,13 +11759,13 @@ function useTableManager(props, meta, internalColumns) {
   const rowClick = useTableRowClick(options.enableRowClick, props.onRowClick);
   const rowDrag = useTableRowDrag(options.enableRowDrag && !(meta !== null && meta !== void 0 && (_meta$editing = meta.editing) !== null && _meta$editing !== void 0 && _meta$editing.isEditing), props.onRowDrag);
   const rowDrop = useTableRowDrop(options.enableRowDrop, props.onRowDrop);
-  const rowExpansion = useTableRowExpansion(options.enableRowExpansion, props.rowExpansionRenderer);
+  const rowExpansion = useTableRowExpansion(options.enableRowExpansion, options.enableRowExpansionAll, props.rowExpansionRenderer);
   const rowGoto = useTableRowGoto(options.enableRowGoto, props.onRowGoto);
   const rowGroups = useTableRowGroups(props.rowActionsForGroup);
   const rowHeight = useTableRowHeight(options.enableRowHeight, settings.rowHeight);
   const rowSelection = useTableRowSelection(!!options.enableRowSelection);
-  const search = useTableSearch(options.enableSearch, settings.excludeUnmatchedRecordsInSearch);
-  const server = useTableServerLoading(props.loadPage, props.loadAll, props.pageSize);
+  const search = useTableSearch(options.enableSearch, props.onChangeSearch, settings.excludeUnmatchedRecordsInSearch);
+  const server = useTableServerLoading(props.loadPage, props.loadAll, props.pages, props.pageSize, props._experimentalDataLoader2);
   // TODO: memoise
   // convert jsx column components into valid table columns
   const {
@@ -11803,7 +11816,7 @@ function useTableManager(props, meta, internalColumns) {
   useTableFontSizeListener(instance);
   useTableRowHeightListener(instance);
   useTableRowSelectionListener(instance, props.onRowSelect);
-  useTableSearchListener(instance, props.onChangeSearch);
+  useTableSearchListener(instance);
   useTableServerLoadingListener(instance, server.loadPage);
   useTableSettingsListener(instance, setSettings);
   useTableShortcutsListener(instance, props.shortcuts);
@@ -12029,7 +12042,7 @@ function useTableGlobalShortcuts(table, tableRef, scrollToIndex) {
       if (isElementInsideOverlay(trigger) && !isSiblingElementInsideSameParentOverlay(trigger, tableRef.current) || isElementInteractive(trigger) && !isElementInsideOrTriggeredFromContainer(trigger, tableRef.current)) {
         return;
       }
-      tableMeta.rowActive.handleKeyDown(event, rows.length, scrollToIndex);
+      tableMeta.rowActive.handleKeyDown(event, tableMeta.length, scrollToIndex);
       tableMeta.rowSelection.handleKeyDown(event, table);
       if (tableMeta.rowActive.rowActiveIndex !== undefined) {
         var _rows$tableMeta$rowAc;
@@ -12065,57 +12078,131 @@ const ROW_HEIGHT_ESTIMATES = {
   'extra-tall': 57
 };
 
+const RowContext = /*#__PURE__*/React__default.createContext({
+  hideInternalColumns: false,
+  hideRowActions: false,
+  isHovered: false,
+  rowIndex: -1
+});
+
+const DELAY_BEFORE_LOAD_MS = 250;
+/* anonymous functions will break the memoisation on each render, wrap handlers in callbacks */
+function Row(props) {
+  const {
+    renderer: RowRenderer,
+    cellRenderer: CellRenderer,
+    hideInternalColumns = false,
+    hideRowActions = false,
+    scrollDirection,
+    skipPageLoading = false,
+    ...displayRowProps
+  } = props;
+  const tableMeta = props.table.options.meta;
+  const isHovered = tableMeta.rowActive.rowHoverIndex === props.index;
+  // context - it must be here for cells to read it, since they render alongside the row inside DisplayRow
+  const contextValue = React__default.useMemo(() => ({
+    isHovered,
+    rowIndex: props.index,
+    hideInternalColumns,
+    hideRowActions
+  }), [isHovered, props.index, hideInternalColumns, hideRowActions]);
+  React__default.useEffect(() => {
+    let timeout;
+    if (tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2 && !skipPageLoading) {
+      const pageIndex = Math.floor(props.index / tableMeta.server.pageSize) * tableMeta.server.pageSize / tableMeta.server.pageSize;
+      const sorting = props.table.getState().sorting;
+      const filters = props.table.getState().columnFilters;
+      const search = props.table.getState().globalFilter;
+      const hiddenColumns = getHiddenColumns(props.table.getState().columnVisibility);
+      const pageIndexesToFetch = [];
+      /*
+      // if there's no direction, it means the scroll bar got dropped un unloaded pages,
+      // in that case, load forward and backward pages to prevent skeletons
+      if (scrollDirection === 'backward' || !scrollDirection) {
+          const backIndex = pageIndex - 1;
+           if (backIndex > -1) {
+              pageIndexesToFetch.push(backIndex);
+          }
+      }
+      */
+      // always load the next page
+      if (scrollDirection === 'forward' || !scrollDirection) {
+        pageIndexesToFetch.push(pageIndex + 1);
+      }
+      // the virtualiser fetches a page ahead, so this won't get called in most cases
+      // but it provides a fallback for some edge cases
+      timeout = setTimeout(() => {
+        pageIndexesToFetch.forEach(index => {
+          var _tableMeta$server$loa, _tableMeta$server;
+          // this can be called by every row within the current page, but loadPage returns early if a pending request exists
+          (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, index, sorting, filters, tableMeta.search.enableGlobalFilter ? search : undefined, hiddenColumns);
+        });
+      }, DELAY_BEFORE_LOAD_MS);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [tableMeta.server.pages]);
+  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React__default.createElement(RowRenderer, Object.assign({}, displayRowProps, {
+    cellRenderer: CellRenderer
+  })));
+}
+
+const DELAY_BEFORE_LOAD_MS$1 = 150;
 function SkeletonRow(props) {
   const {
     index,
-    row,
     table
   } = props;
   const tableMeta = table.options.meta;
   if (tableMeta.server.isEnabled) {
-    return /*#__PURE__*/React__default.createElement(RowWithServerLoading, Object.assign({}, props, {
-      index: index
-    }));
+    return /*#__PURE__*/React__default.createElement(RowWithServerLoading, Object.assign({}, props));
   }
   return /*#__PURE__*/React__default.createElement(Skeleton, {
-    cellsCount: row.getVisibleCells().length
+    cellsCount: table.getVisibleFlatColumns().length,
+    index: index
   });
 }
 function RowWithServerLoading(props) {
   var _table$getState$group, _table$getState;
   const {
     index,
-    row,
     table
   } = props;
   const tableMeta = table.options.meta;
   const pageIndex = Math.floor(index / tableMeta.server.pageSize) * tableMeta.server.pageSize / tableMeta.server.pageSize;
-  const {
-    ref,
-    inView
-  } = reactIntersectionObserver.useInView({
-    threshold: 0,
-    triggerOnce: true,
-    initialInView: pageIndex === 0
-  });
   React__default.useEffect(() => {
-    if (inView) {
-      var _tableMeta$server$loa, _tableMeta$server;
-      (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, pageIndex, table.getState().sorting, table.getState().columnFilters);
+    let timeout;
+    if (tableMeta.server.isEnabled) {
+      const sorting = props.table.getState().sorting;
+      const filters = props.table.getState().columnFilters;
+      const search = props.table.getState().globalFilter;
+      const hiddenColumns = getHiddenColumns(props.table.getState().columnVisibility);
+      timeout = setTimeout(() => {
+        var _tableMeta$server$loa, _tableMeta$server;
+        (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, pageIndex, sorting, filters, tableMeta.search.enableGlobalFilter ? search : undefined, hiddenColumns);
+      }, DELAY_BEFORE_LOAD_MS$1);
     }
-  }, [inView]);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
   const groupedCellCount = (_table$getState$group = (_table$getState = table.getState()) === null || _table$getState === void 0 ? void 0 : _table$getState.grouping.length) !== null && _table$getState$group !== void 0 ? _table$getState$group : 0;
-  const ungroupedCellCount = row.getVisibleCells().length - groupedCellCount;
+  const ungroupedCellCount = table.getVisibleFlatColumns().length - groupedCellCount;
   return /*#__PURE__*/React__default.createElement(Skeleton, {
     cellsCount: ungroupedCellCount,
-    ref: ref
+    index: index
   });
 }
 const Skeleton = /*#__PURE__*/React__default.forwardRef(function Skeleton(props, ref) {
   const {
-    cellsCount
+    cellsCount,
+    index
   } = props;
   return /*#__PURE__*/React__default.createElement("tr", {
+    "data-row-index": index,
     ref: ref
   }, Array(cellsCount).fill(null).map((_, index) => (/*#__PURE__*/React__default.createElement("td", {
     key: index
@@ -12124,41 +12211,6 @@ const Skeleton = /*#__PURE__*/React__default.forwardRef(function Skeleton(props,
   })))));
 });
 
-const RowContext = /*#__PURE__*/React__default.createContext({
-  hideInternalColumns: false,
-  hideRowActions: false,
-  isHovered: false,
-  rowIndex: -1
-});
-
-/* anonymous functions will break the memoisation on each render, wrap handlers in callbacks */
-function Row(props) {
-  const {
-    renderer: RowRenderer,
-    cellRenderer: CellRenderer,
-    hideInternalColumns = false,
-    hideRowActions = false,
-    ...displayRowProps
-  } = props;
-  const tableMeta = props.table.options.meta;
-  const isHovered = tableMeta.rowActive.rowHoverIndex === props.index;
-  // context - it must be here for cells to read it, since they render alongside the row inside DisplayRow
-  const contextValue = React__default.useMemo(() => ({
-    isHovered,
-    rowIndex: props.index,
-    hideInternalColumns,
-    hideRowActions
-  }), [isHovered, props.index, hideInternalColumns, hideRowActions]);
-  if (props.row.original === undefined) {
-    return /*#__PURE__*/React__default.createElement(SkeletonRow, Object.assign({}, props));
-  }
-  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React__default.createElement(RowRenderer, Object.assign({}, displayRowProps, {
-    cellRenderer: CellRenderer
-  })));
-}
-
 // scroll padding end is designed to always show half of the next row
 function getScrollPaddingEndOffset(table) {
   const tableMeta = table.options.meta;
@@ -12183,7 +12235,7 @@ function getPaddingEndOffset(table, options) {
   const bottomRows = (_table$getBottomRows = table.getBottomRows()) !== null && _table$getBottomRows !== void 0 ? _table$getBottomRows : [];
   return ROW_HEIGHT_ESTIMATES.medium * ((_options$virtualiserP = options === null || options === void 0 ? void 0 : options.virtualiserPaddingEndOffset) !== null && _options$virtualiserP !== void 0 ? _options$virtualiserP : 1) * bottomRows.length;
 }
-function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, options) {
+function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIndex, options) {
   var _table$getState$group, _table$getCenterRows, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _ref, _virtualItems;
   const tableMeta = table.options.meta;
   const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
@@ -12197,11 +12249,12 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, opt
   const rangeExtractor = useRowGroupVirtualisation(table);
   // account for thead and tfoot in the scroll area - both are always medium row height
   const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;
+  const count = tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2 ? length : rows.length;
   const virtualiser = reactVirtual.useVirtualizer({
-    count: rows.length,
+    count,
     estimateSize,
     getScrollElement: () => tableRef.current,
-    overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
+    overscan: tableMeta.printing.isPrinting ? count : undefined,
     rangeExtractor,
     // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list
     scrollPaddingStart,
@@ -12221,16 +12274,16 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, opt
     if (tableRef.current) {
       if (index === 0) {
         virtualiser.scrollToOffset(0, notSmooth);
-      } else if (index === rows.length - 1) {
+      } else if (index === count - 1) {
         // sometimes the last row doesn't fully show, so we just force scroll to the bottom
         tableRef.current.scrollTop = tableRef.current.scrollHeight;
       } else {
         virtualiser.scrollToIndex(index, options);
       }
     }
-  }, [virtualItems.length, tableRef.current, totalSize, rows.length]);
+  }, [virtualItems.length, tableRef.current, totalSize, count]);
   // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0
-  const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;
+  const paddingStartIndex = isTableRowGrouped && count > 1 ? 1 : 0;
   const startValue = isTableRowGrouped ? ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size) : (_virtualItems$padding3 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding3 === void 0 ? void 0 : _virtualItems$padding3.start;
   // styling for offsetting rows - this "is" the virtualisation
   const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, startValue !== null && startValue !== void 0 ? startValue : 0), Math.max(0, (_ref = totalSize - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref !== void 0 ? _ref : 0)] : [0, 0];
@@ -12247,7 +12300,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, opt
   let style = {};
   let content = null;
   // bottom rows aren't virtualised (they're sticky) but we need to set the height
-  if (rows.length || table.getBottomRows().length) {
+  if (count || table.getBottomRows().length) {
     style = {
       height: totalSize,
       paddingBottom,
@@ -12255,18 +12308,43 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, opt
     };
   }
   // only render non sticky rows
-  if (rows.length) {
+  if (count) {
     content = virtualItems.map(virtualRow => {
+      var _row, _virtualiser$scrollDi2;
       // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here
       if (!virtualRow) {
         return null;
       }
-      const row = rows[virtualRow.index];
+      let row;
+      if (tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2) {
+        var _tableMeta$server$pag, _tableMeta$server$pag2;
+        const currentPageIndex = Math.floor(virtualRow.index / tableMeta.server.pageSize) * tableMeta.server.pageSize / tableMeta.server.pageSize;
+        const pagePosition = (_tableMeta$server$pag = (_tableMeta$server$pag2 = tableMeta.server.pages) === null || _tableMeta$server$pag2 === void 0 ? void 0 : _tableMeta$server$pag2.indexOf(currentPageIndex)) !== null && _tableMeta$server$pag !== void 0 ? _tableMeta$server$pag : -1;
+        if (pagePosition > -1) {
+          // "flatten" row indexes down into the dataloader2 dataset size
+          // for example, with a page size of 100...
+          // row index 14267 is actually one of index 67, 167, 267 etc within the dataset (depending on number of pages stored)
+          const fakeIndex = pagePosition * tableMeta.server.pageSize + virtualRow.index % tableMeta.server.pageSize;
+          row = rows[fakeIndex];
+        }
+      } else {
+        row = rows[virtualRow.index];
+      }
+      if (!((_row = row) !== null && _row !== void 0 && _row.original)) {
+        var _virtualiser$scrollDi;
+        return /*#__PURE__*/React__default.createElement(SkeletonRow, {
+          key: virtualRow.index,
+          index: virtualRow.index,
+          scrollDirection: (_virtualiser$scrollDi = virtualiser.scrollDirection) !== null && _virtualiser$scrollDi !== void 0 ? _virtualiser$scrollDi : undefined,
+          table: table
+        });
+      }
       const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);
       return /*#__PURE__*/React__default.createElement(Row, {
         key: row.id,
         row: row,
         index: virtualRow.index,
+        scrollDirection: (_virtualiser$scrollDi2 = virtualiser.scrollDirection) !== null && _virtualiser$scrollDi2 !== void 0 ? _virtualiser$scrollDi2 : undefined,
         table: table,
         measureRow: measureRow,
         renderer: renderers.row,
@@ -12488,6 +12566,10 @@ function Header$3(context) {
   const {
     table
   } = context;
+  const tableMeta = table.options.meta;
+  if (!tableMeta.rowExpansion.canExpandAll) {
+    return null;
+  }
   const isSomeRowsExpanded = table.getIsSomeRowsExpanded();
   const handleClick = event => {
     event.stopPropagation();
@@ -12569,8 +12651,9 @@ function Header$4(context) {
       }
       const _temp = function () {
         if (tableMeta.server.loadAllIfNeeded) {
+          const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
           // don't pass the search query because we need all data - not filtered data
-          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
+          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined, hiddenColumns)).then(function () {});
         }
       }();
       // load all data if that is possible
@@ -12629,6 +12712,7 @@ function Cell$3(context) {
             if (event.shiftKey) {
               var _tableMeta$rowSelecti;
               function _temp4() {
+                const selectedRows = table.getRowModel().rows.slice(fromIndex, toIndex + 1);
                 table.setRowSelection(currentRowSelection => ({
                   ...currentRowSelection,
                   ...selectedRows.filter(row => row.getCanSelect()).reduce((state, row) => ({
@@ -12638,11 +12722,11 @@ function Cell$3(context) {
                 }));
               }
               const [fromIndex, toIndex] = toggleBetween((_tableMeta$rowSelecti = tableMeta.rowSelection.lastSelectedRowIndex.current) !== null && _tableMeta$rowSelecti !== void 0 ? _tableMeta$rowSelecti : 0, rowIndex);
-              const selectedRows = table.getRowModel().rows.slice(fromIndex, toIndex + 1);
               const _temp3 = function () {
-                if (tableMeta.server.loadAllIfNeeded && selectedRows.some(row => row.original === undefined)) {
+                if (tableMeta.server.loadAllIfNeeded) {
+                  const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
                   // don't pass the search query because we need all data - not filtered data
-                  return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
+                  return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined, hiddenColumns)).then(function () {});
                 }
               }();
               return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
@@ -12700,7 +12784,7 @@ function useTable(props, externalRef, renderers, meta, options) {
   // configure the table
   const manager = useTableManager(props, meta, INTERNAL_RENDERERS);
   // configure the virtualised renderer
-  const renderer = useTableRenderer(renderers, manager.instance, ref, props.defaultRowActiveIndex, options);
+  const renderer = useTableRenderer(renderers, manager.instance, ref, manager.meta.length, props.defaultRowActiveIndex, options);
   // configure dynamic styling
   const {
     style,
@@ -13768,21 +13852,23 @@ function Summary(props) {
     locale,
     texts
   } = useLocalization();
-  const length = table.options.meta.length;
+  const tableMeta = table.options.meta;
+  const length = tableMeta.length;
   const currentLength = table.getRowModel().rows.length;
   let label;
   let count;
   // row selection
-  const rowsSelectedLength = table.getSelectedRowModel().rows.length;
+  // use table state and not the selected row model because of the way server loading works
+  const rowsSelectedLength = Object.keys(table.getState().rowSelection).length;
   if (rowsSelectedLength > 0) {
     label = texts.table.footer.summary.selected;
     count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
-  } else if ((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length ||
+  } else if (!tableMeta.server.isEnabled && ((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length ||
   // filtered data
-  !!table.getState().globalFilter && table.options.enableGlobalFilter // search with hide enabled
+  !!table.getState().globalFilter && table.options.enableGlobalFilter) // search with hide enabled
   ) {
     label = texts.table.footer.summary.records;
-    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, currentLength), "\u00A0", texts.table.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
+    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(currentLength)), "\u00A0", texts.table.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
   } else {
     label = texts.table.footer.summary.records;
     count = /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length));
@@ -13794,8 +13880,13 @@ function Summary(props) {
 }
 
 function Foot(props) {
-  const nonGroupedHeaders = props.table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
-  return /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
+  const {
+    children,
+    table,
+    ...attributes
+  } = props;
+  const nonGroupedHeaders = table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
+  return /*#__PURE__*/React__default.createElement("tfoot", Object.assign({}, attributes), children, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
     key: header.id,
     header: header,
     index: index
@@ -13877,6 +13968,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     onClickFindPrevious: handleClickFindPrevious,
     settingsContent,
     shortcut,
+    showTotal = true,
     value,
     ...attributes
   } = props;
@@ -13955,10 +14047,12 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     }
     if (hasFind && isActive) {
       postfix = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-        className: "text-grey-700 flex h-4 items-center border-r border-black/[0.25] pr-2"
-      }, loading ? /*#__PURE__*/React__default.createElement(Spinner, {
+        className: "text-grey-700 flex h-4 items-center"
+      }, loading ? (/*#__PURE__*/React__default.createElement(Spinner, {
         className: "h-4 w-4"
-      }) : `${findCurrent !== null && findCurrent !== void 0 ? findCurrent : 0}/${findTotal !== null && findTotal !== void 0 ? findTotal : 0}`), findCurrent ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
+      })) : showTotal ? (/*#__PURE__*/React__default.createElement("span", {
+        className: "border-r border-black/[0.25] pr-2"
+      }, `${findCurrent !== null && findCurrent !== void 0 ? findCurrent : 0}/${findTotal !== null && findTotal !== void 0 ? findTotal : 0}`)) : null), findCurrent ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
         "aria-label": texts.searchInput.findPrevious,
         className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
         icon: "chevron-up",
@@ -14062,6 +14156,7 @@ function Search$1(props) {
   const scrollTo = rowIndex => scrollToIndex(rowIndex, {
     align: 'center'
   });
+  const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
   React__default.useEffect(() => {
     if (tableMeta.search.highlightedColumnIndexes.length) {
       scrollTo(tableMeta.search.highlightedColumnIndexes[0][0]);
@@ -14070,9 +14165,11 @@ function Search$1(props) {
   const handleFocus = function () {
     try {
       const _temp = function () {
-        if (tableMeta.server.loadAllIfNeeded) {
+        if (tableMeta.server.loadAllIfNeeded && !tableMeta.server._experimentalDataLoader2) {
           // don't pass the search query because we need all data - not filtered data
-          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
+          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters,
+          // the old data loader doesn't have server side search
+          undefined, hiddenColumns)).then(function () {});
         }
       }();
       // load all data if that is possible
@@ -14081,8 +14178,20 @@ function Search$1(props) {
       return Promise.reject(e);
     }
   };
+  const [loading, setLoading] = React__default.useState(false);
+  const searchTimeoutRef = React__default.useRef();
   const handleChange = query => {
     table.setGlobalFilter(String(query !== null && query !== void 0 ? query : ''));
+    if (tableMeta.search.enableGlobalFilter && tableMeta.search.handleSearch) {
+      clearTimeout(searchTimeoutRef.current);
+      searchTimeoutRef.current = setTimeout(() => {
+        var _tableMeta$search$han, _tableMeta$search;
+        setLoading(true);
+        (_tableMeta$search$han = (_tableMeta$search = tableMeta.search).handleSearch) === null || _tableMeta$search$han === void 0 ? void 0 : _tableMeta$search$han.call(_tableMeta$search, query, hiddenColumns).then(() => {
+          setLoading(false);
+        });
+      }, 150);
+    }
   };
   const handleToggleExcludeUnmatchedResults = enabled => {
     tableMeta.search.setEnableGlobalFilter(enabled, table);
@@ -14090,6 +14199,12 @@ function Search$1(props) {
       var _ref$current;
       return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     });
+    if (tableMeta.search.handleSearch) {
+      setLoading(true);
+      tableMeta.search.handleSearch(enabled ? query : undefined, hiddenColumns).then(() => {
+        setLoading(false);
+      });
+    }
   };
   const handleNextResult = () => {
     if (!tableMeta.search.highlightedColumnIndexes.length) {
@@ -14133,7 +14248,7 @@ function Search$1(props) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchInput2, {
     findCurrent: tableMeta.search.currentHighlightColumnIndex !== undefined ? tableMeta.search.currentHighlightColumnIndex + 1 : null,
     findTotal: (_tableMeta$search$hig = (_tableMeta$search$hig2 = tableMeta.search.highlightedColumnIndexes) === null || _tableMeta$search$hig2 === void 0 ? void 0 : _tableMeta$search$hig2.length) !== null && _tableMeta$search$hig !== void 0 ? _tableMeta$search$hig : null,
-    loading: tableMeta.server.loadAllStatus === exports.TableServerLoadAllState.Loading,
+    loading: tableMeta.server._experimentalDataLoader2 ? loading : tableMeta.server.loadAllStatus === exports.TableServerLoadAllState.Loading,
     name: "table-search",
     onClickFindPrevious: handlePreviousResult,
     onClickFindNext: handleNextResult,
@@ -14148,6 +14263,7 @@ function Search$1(props) {
       meta: true,
       shift: false
     },
+    showTotal: !tableMeta.server._experimentalDataLoader2,
     value: query
   }));
 }
@@ -16193,8 +16309,9 @@ function Print$1(props) {
       const toastRef = toast.loading(texts.table.print.loading);
       const _temp2 = function () {
         if (tableMeta.server.isEnabled && tableMeta.server.loadAllIfNeeded) {
+          const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
           const _temp = _catch(function () {
-            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
+            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined, hiddenColumns)).then(function () {});
           }, function (error) {
             const errorMessage = `${texts.table.print.error}: ${error}`;
             console.error(errorMessage);
@@ -16868,6 +16985,7 @@ function TableGrid(props) {
   var _table$state$grouping;
   const {
     enableHorizontalArrowKeyNavigation,
+    footerRows,
     table,
     ...attributes
   } = props;
@@ -16910,7 +17028,7 @@ function TableGrid(props) {
     } : table.renderer.style
   }, table.renderer.rows, props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
     table: table.instance
-  }) : null)))));
+  }, footerRows) : null)))));
 }
 
 function Column$1(_) {
@@ -18502,6 +18620,14 @@ const shortcut = {
   meta: true,
   shift: false
 };
+function isTableScrolled(ref) {
+  if (ref.current) {
+    var _ref$current, _ref$current$querySel, _ref$current2, _ref$current2$querySe;
+    const height = parseFloat(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : (_ref$current$querySel = _ref$current.querySelector('tbody')) === null || _ref$current$querySel === void 0 ? void 0 : _ref$current$querySel.style.height) || '0') + parseFloat(((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : (_ref$current2$querySe = _ref$current2.querySelector('tbody')) === null || _ref$current2$querySe === void 0 ? void 0 : _ref$current2$querySe.style.paddingBottom) || '0');
+    return height > ref.current.scrollHeight;
+  }
+  return false;
+}
 
 function useTableEditingListener(table, tableRef, scrollToIndex) {
   const tableMeta = table.options.meta;
@@ -18552,18 +18678,21 @@ function useTableEditingListener(table, tableRef, scrollToIndex) {
     document.addEventListener('click', onClickOutside);
     return () => document.removeEventListener('click', onClickOutside);
   }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);
-  const rows = table.getRowModel().rows;
-  // make sure pending changes are removed for rows that no longer exist
-  useLazyEffect(() => {
-    const pendingChanges = tableMeta.editing.getErrorsShownInAlert();
-    pendingChanges.forEach(pendingChange => {
-      try {
-        table.getRow(pendingChange.rowId);
-      } catch {
-        tableMeta.editing.discardChanges(pendingChange.rowId, table);
-      }
-    });
-  }, [rows.length]);
+  /*
+  const rows = table.getRowModel().rows;
+   // make sure pending changes are removed for rows that no longer exist
+  useLazyEffect(() => {
+      const pendingChanges = tableMeta.editing.getErrorsShownInAlert();
+       pendingChanges.forEach(pendingChange => {
+          try {
+              table.getRow(pendingChange.rowId);
+          } catch {
+              // TODO: this has the potential to remove changes for "unloaded" rows in server loading
+              //tableMeta.editing.discardChanges(pendingChange.rowId, table);
+          }
+      });
+  }, [rows.length]);
+  */
   // shortcuts
   useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, event => {
     event.preventDefault();
@@ -18591,6 +18720,7 @@ function reducer$2(state, action) {
       {
         const {
           columnId,
+          index,
           row,
           value
         } = payload;
@@ -18600,7 +18730,8 @@ function reducer$2(state, action) {
             ...state.changes,
             rows: setWith(state.changes.rows, `${rowId}.${columnId}`, value, Object),
             originals: setWith(state.changes.originals, rowId, row, Object)
-          }
+          },
+          indexes: setWith(state.indexes, rowId, index, Object)
         };
       }
     case 'removeCellValue':
@@ -18634,6 +18765,7 @@ function reducer$2(state, action) {
       {
         const {
           cellErrors,
+          index,
           moveReasons,
           original,
           value
@@ -18648,7 +18780,8 @@ function reducer$2(state, action) {
             moveReasons: setWith(state.changes.moveReasons, rowId, moveReasons !== null && moveReasons !== void 0 ? moveReasons : state.changes.moveReasons[rowId], Object),
             // status can be undefined, so don't use ??
             status: setWith(state.changes.status, rowId, undefined, Object)
-          }
+          },
+          indexes: setWith(state.indexes, rowId, index, Object)
         };
       }
     case 'removeRow':
@@ -18666,6 +18799,7 @@ function reducer$2(state, action) {
             originals: omit(state.changes.originals, rowId),
             status: omit(state.changes.status, rowId)
           },
+          indexes: omit(state.indexes, rowId),
           temporaryRows: state.temporaryRows.filter(row => row[rowIdentityAccessor] !== rowId)
         };
       }
@@ -18698,6 +18832,7 @@ function reducer$2(state, action) {
     case 'insertTemporaryRow':
       {
         const {
+          index,
           value
         } = payload;
         return {
@@ -18707,7 +18842,8 @@ function reducer$2(state, action) {
             ...state.changes,
             rows: setWith(state.changes.rows, rowId, value, Object),
             originals: setWith(state.changes.originals, rowId, value, Object)
-          }
+          },
+          indexes: setWith(state.indexes, rowId, index, Object)
         };
       }
     default:
@@ -18727,10 +18863,10 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         [rowId]: state.changes.rows[rowId]
       } : state.changes.rows;
       let completed = true;
-      const _temp9 = _forOf(Object.keys(changes), function (rowId) {
+      const _temp7 = _forOf(Object.keys(changes), function (rowId) {
         const status = getRowStatus(rowId);
         return _catch(function () {
-          function _temp8(_result) {
+          function _temp6(_result) {
             return _exit ? _result : Promise.resolve(handleSave(changeSet)).then(function () {
               // cleanup changes, we don't need them after saving
               discardChanges(rowId, table);
@@ -18755,7 +18891,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
             delete changeSet[rowIdentityAccessor];
           }
           // re-run validation, maybe a cell is already invalid but has never been blurred
-          const _temp7 = function () {
+          const _temp5 = function () {
             if (validator) {
               return Promise.resolve(validator(changeSet)).then(function (errors) {
                 if (errors && Object.keys(errors).length) {
@@ -18764,7 +18900,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
               });
             }
           }();
-          return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7); // send new data to the server
+          return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5); // send new data to the server
         }, function (error) {
           var _error$response;
           if (error instanceof ReferenceError || error instanceof TypeError || (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) >= 500) {
@@ -18804,18 +18940,18 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       }, function () {
         return _exit;
       });
-      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function (_result3) {
+      return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(function (_result3) {
         return _exit ? _result3 : completed;
-      }) : _exit ? _temp9 : completed);
+      }) : _exit ? _temp7 : completed);
     } catch (e) {
       return Promise.reject(e);
     }
   };
   const onCellChanged = function (cell, rowIndex, shouldRunUpdaters = true) {
     try {
-      function _temp6() {
+      function _temp4() {
         var _state$changes$errors11;
-        function _temp4() {
+        function _temp2() {
           // only set errors and move reasons for the cells we're currently acting on
           // why? because the UX is not good if we set them for cells the user hasn't touched yet
           const cellsToActOn = [cell.column.id, ...Object.keys(updatesForOtherCells)];
@@ -18846,6 +18982,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
             rowId: cell.row.id,
             payload: {
               cellErrors: nextCellErrors,
+              index: rowIndex,
               moveReasons: nextMoveReasons,
               value: nextChanges
             }
@@ -18864,19 +19001,19 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         };
         // run validation
         let validationErrors = {};
-        const _temp3 = function () {
+        const _temp = function () {
           if (validator) {
             const nextRowValue = {
               ...state.changes.originals[cell.row.id],
               ...changes,
               ...updatesForOtherCells
             };
-            return Promise.resolve(validator(nextRowValue)).then(function (_validator2) {
-              validationErrors = _validator2 !== null && _validator2 !== void 0 ? _validator2 : {};
+            return Promise.resolve(validator(nextRowValue)).then(function (_validator) {
+              validationErrors = _validator !== null && _validator !== void 0 ? _validator : {};
             });
           }
         }();
-        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+        return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
       }
       const changes = state.changes.rows[cell.row.id];
       if (!changes) {
@@ -18884,7 +19021,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       }
       let updatesForOtherCells = {};
       // run the updater handler if there is one, to see if there are any other cells to update
-      const _temp5 = function () {
+      const _temp3 = function () {
         if (typeof handleChange === 'function' && shouldRunUpdaters) {
           const previousRowValue = {
             ...state.changes.originals[cell.row.id]
@@ -18898,42 +19035,11 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
           });
         }
       }();
-      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
     } catch (e) {
       return Promise.reject(e);
     }
   }; // general
-  // rows
-  const setRowValue = function (rowId, original, value) {
-    try {
-      function _temp2() {
-        dispatch({
-          type: 'updateRow',
-          rowId,
-          payload: {
-            cellErrors,
-            original,
-            value
-          }
-        });
-      }
-      let cellErrors;
-      const _temp = function () {
-        if (validator) {
-          const row = {
-            ...original,
-            ...value
-          };
-          return Promise.resolve(validator(row)).then(function (_validator) {
-            cellErrors = _validator !== null && _validator !== void 0 ? _validator : {};
-          });
-        }
-      }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
   const localization = useLocalization();
   const [state, dispatch] = React__default.useReducer(reducer$2, {
     changes: {
@@ -18943,8 +19049,10 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       originals: {},
       status: {}
     },
+    indexes: {},
     temporaryRows: []
   });
+  // rows
   function getRowValue(rowId) {
     var _state$changes$rows$r, _state$changes$rows;
     return (_state$changes$rows$r = (_state$changes$rows = state.changes.rows) === null || _state$changes$rows === void 0 ? void 0 : _state$changes$rows[rowId]) !== null && _state$changes$rows$r !== void 0 ? _state$changes$rows$r : undefined;
@@ -18982,7 +19090,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       }
     });
   }
-  function insertTemporaryRow(data) {
+  function insertTemporaryRow(data, rowIndex) {
     const newRowId = `${TEMPORARY_ROW_ID_PREFIX}${uuid.v4()}`;
     const value = {
       ...data,
@@ -18992,13 +19100,14 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       type: 'insertTemporaryRow',
       rowId: newRowId,
       payload: {
+        index: rowIndex,
         value
       }
     });
     return newRowId;
   }
   // cells
-  function setCellValue(cell, value) {
+  function setCellValue(cell, rowIndex, value) {
     const rowId = cell.row.id;
     const columnId = cell.column.id;
     // update if the change is different to the original value
@@ -19008,6 +19117,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         rowId,
         payload: {
           columnId,
+          index: rowIndex,
           row: cell.row.original,
           value
         }
@@ -19040,6 +19150,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
     }
     return rowsWithErrors.filter(hasRowErrorsShownInAlert).map(rowId => ({
       rowId,
+      index: state.indexes[rowId],
       changes: state.changes.rows[rowId],
       errors: state.changes.errors[rowId]
     }));
@@ -19063,7 +19174,6 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
   }
   return {
     // row
-    setRowValue,
     getRowValue,
     getRowMoveReason,
     hasRowErrors,
@@ -19102,11 +19212,11 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, handleCrea
         const changeset = row !== null && row !== void 0 ? row : handleCreate();
         try {
           if (changeset) {
-            const rowId = pendingChangesFns.insertTemporaryRow(changeset);
-            table.getRow(rowId).pin('bottom');
             // set the active row to the new row before toggling editing on
             const temporaryRows = tableMeta.editing.temporaryRows;
             const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
+            const rowId = pendingChangesFns.insertTemporaryRow(changeset, nextRowIndex);
+            table.getRow(rowId).pin('bottom');
             tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
             toggleEditing(true, table, scrollToIndex);
             setLastFocusedCellIndex(undefined);
@@ -19144,7 +19254,9 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, handleCrea
       tableMeta.rowActive.setRowActiveIndex(index);
     }
     setEditing(enabled);
-    if (!isTemporaryRow((_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id)) {
+    const row = (_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id;
+    if (row && !isTemporaryRow(row)) {
+      console.log('hmm');
       scrollToIndex(index);
     }
   }
@@ -19415,7 +19527,7 @@ function EditingControlCell(props) {
   }, [cellRef.current]);
   const handleChange = nextValue => {
     if (nextValue !== value) {
-      tableMeta.editing.setCellValue(cell, nextValue);
+      tableMeta.editing.setCellValue(cell, rowIndex, nextValue);
       if (hasNonTextControl) {
         tableMeta.editing.onCellChanged(cell, rowIndex);
       }
@@ -19926,20 +20038,21 @@ function Alert$1(props) {
   const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);
   const rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ? table.getColumn(String(tableMeta.rowIdentityAccessor)) : undefined;
   pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {
+    var _row;
     // if appropriate, concatenate the item with the text "and"
     if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
       // Add space before and after `messageAnd` text
       links.push(` ${validationTexts.alert.messageAnd} `);
     }
-    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === pendingChangeWithError.rowId);
     const handleClick = () => {
       // if row is visible
-      if (rowIndex > -1) {
-        scrollToRow(rowIndex);
+      if (pendingChangeWithError.index > -1) {
+        scrollToRow(pendingChangeWithError.index);
+        tableMeta.rowActive.setRowActiveIndex(pendingChangeWithError.index);
       }
       // if row is filtered out
       else {
-        setShowFilterResetDialog(pendingChangeWithError.rowId);
+        setShowFilterResetDialog(pendingChangeWithError.index);
       }
     };
     let tooltip;
@@ -19951,7 +20064,12 @@ function Alert$1(props) {
       const columnName = (_table$getAllColumns$ = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)) === null || _table$getAllColumns$ === void 0 ? void 0 : (_table$getAllColumns$2 = _table$getAllColumns$.columnDef.meta) === null || _table$getAllColumns$2 === void 0 ? void 0 : _table$getAllColumns$2.header;
       tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;
     }
-    const row = table.getRow(pendingChangeWithError.rowId).original;
+    let row;
+    try {
+      row = table.getRow(pendingChangeWithError.rowId).original;
+    } catch {
+      // because of server loading, some rows may not be accessible
+    }
     links.push(/*#__PURE__*/React__default.createElement(Tooltip, {
       key: pendingChangeWithError.rowId,
       title: tooltip
@@ -19959,7 +20077,7 @@ function Alert$1(props) {
       className: "text-blue",
       onClick: handleClick,
       role: "button"
-    }, rowIdentityColumn ? row[rowIdentityColumn.id] : rowIndex + 1)));
+    }, rowIdentityColumn ? (_row = row) === null || _row === void 0 ? void 0 : _row[rowIdentityColumn.id] : pendingChangeWithError.index + 1)));
     // if appropriate, concatenate the item with the text ","
     if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {
       links.push(', ');
@@ -19980,9 +20098,8 @@ function Alert$1(props) {
     table.resetGlobalFilter();
     table.resetColumnFilters();
     requestAnimationFrame(() => {
-      const rowIndex = table.getRowModel().rows.findIndex(row => row.id === showFilterResetDialog);
-      if (rowIndex > -1) {
-        scrollToRow(rowIndex);
+      if (showFilterResetDialog && showFilterResetDialog > -1) {
+        scrollToRow(showFilterResetDialog);
       }
       setShowFilterResetDialog(false);
     });
@@ -20046,10 +20163,10 @@ function CreateNewRow(props) {
   var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum;
   const {
     buttonRef,
+    isScrolled,
     scrollToIndex,
     table,
-    tableMeta,
-    tableRef
+    tableMeta
   } = props;
   const {
     texts
@@ -20082,11 +20199,9 @@ function CreateNewRow(props) {
       keys: shortcut
     });
   }
-  const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;
   const className = cn('group/row border-grey-300 !sticky z-[21]', {
     'bottom-10': tableMeta.footer.isEnabled,
     'bottom-0': !tableMeta.footer.isEnabled,
-    'border-t-2': isScrolled,
     'border-b': !isScrolled
   });
   return /*#__PURE__*/React__default.createElement("tr", {
@@ -20111,6 +20226,7 @@ function CreateNewRow(props) {
 function TemporaryRow(props) {
   const {
     createRowButtonRef,
+    isScrolled,
     table,
     tableMeta,
     tableRef
@@ -20173,10 +20289,9 @@ function TemporaryRow(props) {
       }
     }
   };
-  const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;
   const className = cn('group/row border-grey-300 !sticky z-[22]', {
-    'bottom-[calc(5rem_+_3px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,
-    'bottom-[calc(2.5rem_+_3px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,
+    'bottom-[calc(5rem_+_2px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,
+    'bottom-[calc(2.5rem_+_2px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,
     'border-t-2 shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] [&>td]:!border-b-0': isScrolled
   });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getBottomRows().map(row => (/*#__PURE__*/React__default.createElement(Row, {
@@ -20191,7 +20306,8 @@ function TemporaryRow(props) {
     onKeyDown: handleKeyDown,
     onKeyDownCapture: handleKeyDownCapture,
     hideInternalColumns: true,
-    hideRowActions: !tableMeta.editing.isEditing
+    hideRowActions: !tableMeta.editing.isEditing,
+    skipPageLoading: true
   }))));
 }
 
@@ -20212,6 +20328,7 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
   };
   const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().length;
   const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
+  const isScrolled = isTableScrolled(table3.ref);
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
     table: table3
   }, table3.meta.editing.isEnabled ? (/*#__PURE__*/React__default.createElement(Editing, {
@@ -20224,19 +20341,27 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     tableRef: table3.ref
   })) : null, /*#__PURE__*/React__default.createElement(Table.Grid, Object.assign({}, gridAttributes, {
     "data-taco": "table3",
+    footerRows: hasCreateWorkflow && isScrolled ? (/*#__PURE__*/React__default.createElement(CreateNewRow, {
+      buttonRef: table3.meta.editing.createRowButtonRef,
+      isScrolled: isScrolled,
+      scrollToIndex: table3.renderer.scrollToIndex,
+      table: table3.instance,
+      tableMeta: table3.meta
+    })) : undefined,
     table: table3
   }), hasCreateWorkflow ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TemporaryRow, {
     createRowButtonRef: table3.meta.editing.createRowButtonRef,
+    isScrolled: isScrolled,
     table: table3.instance,
     tableMeta: table3.meta,
     tableRef: table3.ref
-  }), /*#__PURE__*/React__default.createElement(CreateNewRow, {
+  }), !isScrolled ? (/*#__PURE__*/React__default.createElement(CreateNewRow, {
     buttonRef: table3.meta.editing.createRowButtonRef,
+    isScrolled: isScrolled,
     scrollToIndex: table3.renderer.scrollToIndex,
     table: table3.instance,
-    tableMeta: table3.meta,
-    tableRef: table3.ref
-  }))) : null));
+    tableMeta: table3.meta
+  })) : null)) : null));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const stringifiedChildren = String(props.children);