@economic/taco 2.45.0-alpha.17 → 2.45.0-alpha.19

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'));
@@ -6611,11 +6611,24 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
     e.preventDefault();
     (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
   }, [input.ref]);
+  // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.
+  // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,
+  // without it, datepicker cannot be set into detailed editing mode by pressing "Enter",
+  // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.
+  const handleInputKeyDown = event => {
+    var _props$onKeyDown;
+    (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 ? void 0 : _props$onKeyDown.call(props, event);
+    if (!event.defaultPrevented) {
+      var _input$onKeyDown;
+      (_input$onKeyDown = input.onKeyDown) === null || _input$onKeyDown === void 0 ? void 0 : _input$onKeyDown.call(input, event);
+    }
+  };
   return /*#__PURE__*/React.createElement("span", {
     className: className,
     "data-taco": "datepicker",
     style: style
   }, /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
+    onKeyDown: handleInputKeyDown,
     button: input.readOnly ? undefined : (/*#__PURE__*/React.createElement(IconButton, {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
@@ -6795,7 +6808,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
     texts
   } = useLocalization();
   const className = cn('relative bg-white animate-[fade-in_150ms] rounded', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-full print:m-0 print:overflow-visible');
-  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0 print:overflow-visible print:h-full', {
+  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0', 'print:overflow-visible print:h-full print:!transform-none print:!fixed print:!inset-0 print:!m-0', {
     'rounded-b-none': !!dialog.elements.extra
   }, props.className);
   const handleEscapeKeyDown = event => {
@@ -7324,7 +7337,7 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     ref: contentRef,
     "data-taco": "drawer",
     className: containerClassName
-  }, output, /*#__PURE__*/React__default.createElement("div", Object.assign({
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, output, /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: dragHandlerClassName
   }, dragHandleProps, {
     "data-testid": "resize-handler",
@@ -7337,7 +7350,7 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     "aria-label": texts.drawer.close,
     className: "absolute right-0 top-0 mr-2 mt-4",
     icon: "close"
-  }))) : null);
+  }))) : null));
   const styleProp = {
     ...style,
     ...{
@@ -10325,6 +10338,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;
@@ -10582,7 +10598,6 @@ function configureReactTableOptions(options, props, localization) {
     enableGrouping: true,
     enableHiding: (_options$enableColumn2 = options.enableColumnHiding) !== null && _options$enableColumn2 !== void 0 ? _options$enableColumn2 : false,
     enablePinning: (_options$enableColumn3 = options.enableColumnFreezing) !== null && _options$enableColumn3 !== void 0 ? _options$enableColumn3 : false,
-    keepPinnedRows: false,
     enableRowPinning: true,
     enableRowSelection: reactTableEnableRowSelection !== null && reactTableEnableRowSelection !== void 0 ? reactTableEnableRowSelection : false,
     enableSorting: (_options$enableSortin = options.enableSorting) !== null && _options$enableSortin !== void 0 ? _options$enableSortin : false,
@@ -10590,7 +10605,8 @@ function configureReactTableOptions(options, props, localization) {
     getExpandedRowModel: reactTable.getExpandedRowModel(),
     getGroupedRowModel: reactTable.getGroupedRowModel(),
     getRowId,
-    groupedColumnMode: false
+    groupedColumnMode: false,
+    keepPinnedRows: false
   };
   if (tableOptions.enableColumnResizing) {
     tableOptions.columnResizeMode = 'onChange';
@@ -10612,6 +10628,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)
@@ -10995,7 +11017,7 @@ function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
         return index;
       });
     }
-  }, [rowActiveIndex, length, isEnabled]);
+  }, [rowActiveIndex, isEnabled]);
   return {
     isEnabled,
     rowActiveIndex,
@@ -11111,7 +11133,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);
@@ -11136,7 +11158,8 @@ function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {
     highlightedColumnIndexes,
     setHighlightedColumnIndexes,
     currentHighlightColumnIndex,
-    setCurrentHighlightColumnIndex
+    setCurrentHighlightColumnIndex,
+    handleSearch: isEnabled && typeof onChangeSearch === 'function' ? onChangeSearch : undefined
   };
 }
 
@@ -11346,9 +11369,10 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
   const _lastUsedSorting = React__default.useRef([]);
   const _lastUsedFilters = React__default.useRef([]);
   const _lastUsedSearch = React__default.useRef();
+  const _lastUsedHiddenColumns = React__default.useRef([]);
   const _lastUsedPageIndex = React__default.useRef();
   const _forceReset = React__default.useRef(false);
-  const loadPage = function (pageIndex, sorting, filters) {
+  const loadPage = function (pageIndex, sorting, filters, hiddenColumns) {
     try {
       let reset = false;
       // sorting or filters changed, reset everything
@@ -11370,9 +11394,10 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
       _lastUsedSorting.current = sorting;
       // set the filters so we can track if it changed between loads
       _lastUsedFilters.current = filters;
+      _lastUsedHiddenColumns.current = hiddenColumns;
       const _temp = _finallyRethrows(function () {
         return _catch(function () {
-          return Promise.resolve(fetchPage(pageIndex, pageSize, sorting, filters)).then(function (response) {
+          return Promise.resolve(fetchPage(pageIndex, pageSize, sorting, filters, hiddenColumns)).then(function (response) {
             // update state, here we do some "magic" to support "load in place"
             setData(currentData => {
               let nextData;
@@ -11401,14 +11426,15 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
       return Promise.reject(e);
     }
   };
-  const loadAll = function (sorting, filters) {
+  const loadAll = function (sorting, filters, hiddenColumns) {
     try {
       // set the sorting so we can track if it changed between loads
       _lastUsedSorting.current = sorting;
       // set the filters so we can track if it changed between loads
       _lastUsedFilters.current = filters;
+      _lastUsedHiddenColumns.current = hiddenColumns;
       const _temp2 = _catch(function () {
-        return Promise.resolve(fetchAll(sorting, filters)).then(function (response) {
+        return Promise.resolve(fetchAll(sorting, filters, hiddenColumns)).then(function (response) {
           length.current = response.length;
           setData(() => {
             let nextData;
@@ -11433,11 +11459,11 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
       _forceReset.current = true;
       if (_lastUsedSearch.current) {
         // we're searching, which means we need to refetch all with the correct sorting applied
-        return loadAll(_lastUsedSorting.current, _lastUsedFilters.current);
+        return loadAll(_lastUsedSorting.current, _lastUsedFilters.current, _lastUsedHiddenColumns.current);
       } else {
         var _lastUsedPageIndex$cu;
         // load the last page that we scrolled to
-        return loadPage((_lastUsedPageIndex$cu = _lastUsedPageIndex.current) !== null && _lastUsedPageIndex$cu !== void 0 ? _lastUsedPageIndex$cu : 0, _lastUsedSorting.current, _lastUsedFilters.current);
+        return loadPage((_lastUsedPageIndex$cu = _lastUsedPageIndex.current) !== null && _lastUsedPageIndex$cu !== void 0 ? _lastUsedPageIndex$cu : 0, _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedHiddenColumns.current);
       }
     } catch (e) {
       return Promise.reject(e);
@@ -11449,13 +11475,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, _lastUsedHiddenColumns.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, _lastUsedHiddenColumns.current);
       }
-      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -11464,13 +11489,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, _lastUsedHiddenColumns.current);
       } 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, _lastUsedHiddenColumns.current);
       }
-      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -11498,7 +11522,7 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
   }, invalidate];
 }
 
-function useTableServerLoading(length, data, loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE) {
+function useTableServerLoading(length, data, loadPage, loadAll, pages, pageSize = DEFAULT_PAGE_SIZE, _experimentalDataLoader2 = false) {
   const isEnabled = !!loadPage && !!loadAll;
   const [isReady, setReady] = React__default.useState(false);
   const [loading, setLoading] = React__default.useState(false);
@@ -11559,14 +11583,18 @@ function useTableServerLoading(length, data, loadPage, loadAll, pageSize = DEFAU
       }
     };
   }
+  const pageCount = Math.ceil(length / pageSize);
   return {
+    pages,
     isEnabled,
     isReady,
     loadPage: _loadPage,
     loadAll: _loadAll,
     loadAllIfNeeded: _loadAllIfNeeded,
     loading,
-    pageSize
+    pageSize,
+    pageCount,
+    _experimentalDataLoader2
   };
 }
 
@@ -11645,15 +11673,14 @@ function useLazyEffect(effect, deps) {
   }, deps);
 }
 
-function useTableDataListener(table) {
+function useTableDataListener(table, length) {
   const meta = table.options.meta;
-  const rows = table.getRowModel().rows;
   useLazyEffect(() => {
     const rowActiveIndex = meta.rowActive.rowActiveIndex;
-    if (rowActiveIndex !== undefined && rowActiveIndex > rows.length) {
+    if (rowActiveIndex !== undefined && rowActiveIndex > length) {
       meta.rowActive.setRowActiveIndex(0);
     }
-  }, [rows.length]);
+  }, [length]);
 }
 
 // we use a listener, and not the internal "controlled" change handlers because we don't actually want consumers
@@ -11663,7 +11690,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();
       }
@@ -11722,11 +11750,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,
@@ -11734,33 +11763,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, JSON.stringify(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.loading, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), onChangeSearch]);
+  }, [meta.server.loading, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, query, JSON.stringify(table.getState().sorting)]);
 }
 
 function useTableSettingsListener(table, onChangeSettings) {
@@ -11844,12 +11873,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 hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
+      const search = meta.search.enableGlobalFilter ? table.getState().globalFilter : undefined;
+      loadPage(0, sorting, columnFilters, hiddenColumns, search);
     }
   }, []);
 }
@@ -11901,8 +11933,8 @@ function useTableManager(props, meta, internalColumns) {
   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(length, data, props.loadPage, props.loadAll, props.pageSize);
+  const search = useTableSearch(options.enableSearch, props.onChangeSearch, settings.excludeUnmatchedRecordsInSearch);
+  const server = useTableServerLoading(length, data, props.loadPage, props.loadAll, props.pages, props.pageSize, props._experimentalDataLoader2);
   // TODO: memoise
   // convert jsx column components into valid table columns
   const {
@@ -11948,12 +11980,12 @@ function useTableManager(props, meta, internalColumns) {
     }
   });
   // state listeners - we have these so that we don't have to control state outside the table
-  useTableDataListener(instance);
+  useTableDataListener(instance, length);
   useTableFilterListener(instance, props.onChangeFilter);
   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);
@@ -12179,7 +12211,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;
@@ -12192,7 +12224,7 @@ function useTableGlobalShortcuts(table, tableRef, scrollToIndex) {
     };
   },
   // scrollToIndex function changes when row count changes, so it is important to update handlers
-  [tableRef.current, tableMeta.rowActive.rowActiveIndex, scrollToIndex]);
+  [tableRef.current, tableMeta.length, tableMeta.rowActive.rowActiveIndex, scrollToIndex]);
 }
 
 function useTableRef(table, ref) {
@@ -12215,57 +12247,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) && pageIndex + 2 < tableMeta.server.pageCount) {
+        pageIndexesToFetch.push(pageIndex + 1);
+      }
+      if (pageIndexesToFetch.length) {
+        // 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, hiddenColumns, tableMeta.search.enableGlobalFilter ? search : undefined);
+          });
+        }, 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, hiddenColumns, tableMeta.search.enableGlobalFilter ? search : undefined);
+      }, 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
@@ -12274,41 +12380,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;
@@ -12333,8 +12404,8 @@ 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) {
-  var _table$getState$group, _table$getCenterRows, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _ref, _virtualItems;
+function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIndex, options) {
+  var _table$getState$group, _table$getCenterRows, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _virtualItems$end, _virtualItems;
   const tableMeta = table.options.meta;
   const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
   const rows = (_table$getCenterRows = table.getCenterRows()) !== null && _table$getCenterRows !== void 0 ? _table$getCenterRows : [];
@@ -12347,11 +12418,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,
@@ -12371,19 +12443,19 @@ 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];
+  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, startValue !== null && startValue !== void 0 ? startValue : 0), Math.max(0, totalSize - ((_virtualItems$end = (_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end) !== null && _virtualItems$end !== void 0 ? _virtualItems$end : 0))] : [0, 0];
   // ensure default active rows are scrolled to
   React__default.useEffect(() => {
     if (defaultRowActiveIndex) {
@@ -12397,26 +12469,51 @@ 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,
-      paddingTop
+      paddingBottom: isNaN(paddingBottom) ? 0 : paddingBottom,
+      paddingTop: isNaN(paddingTop) ? 0 : paddingTop
     };
   }
   // 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,
@@ -12723,8 +12820,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, hiddenColumns, tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined)).then(function () {});
         }
       }();
       // load all data if that is possible
@@ -12783,6 +12881,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) => ({
@@ -12792,11 +12891,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, hiddenColumns, tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined)).then(function () {});
                 }
               }();
               return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
@@ -12854,7 +12953,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,
@@ -13924,21 +14023,22 @@ 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)) {
     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));
@@ -14045,6 +14145,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     onClickFindPrevious: handleClickFindPrevious,
     settingsContent,
     shortcut,
+    showTotal = true,
     value,
     ...attributes
   } = props;
@@ -14123,10 +14224,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",
@@ -14230,6 +14333,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]);
@@ -14238,9 +14342,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, hiddenColumns,
+          // the old data loader doesn't have server side search
+          undefined)).then(function () {});
         }
       }();
       // load all data if that is possible
@@ -14249,8 +14355,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);
@@ -14258,6 +14376,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) {
@@ -14301,7 +14425,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.loading,
+    loading: tableMeta.server._experimentalDataLoader2 ? loading : tableMeta.server.loading,
     name: "table-search",
     onClickFindPrevious: handlePreviousResult,
     onClickFindNext: handleNextResult,
@@ -14316,6 +14440,7 @@ function Search$1(props) {
       meta: true,
       shift: false
     },
+    showTotal: !tableMeta.server._experimentalDataLoader2,
     value: query
   }));
 }
@@ -14669,9 +14794,11 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
     var _collection$querySele;
     (_collection$querySele = collection.querySelector(`[aria-current]`)) === null || _collection$querySele === void 0 ? void 0 : _collection$querySele.removeAttribute('aria-current');
     option.setAttribute('aria-current', 'true');
-    option.scrollIntoView({
-      block: 'nearest'
-    });
+    if (!props['aria-multiselectable']) {
+      option.scrollIntoView({
+        block: 'nearest'
+      });
+    }
     setActiveIndex(index);
   };
   const setActiveIndexByElement = React__default.useCallback(option => {
@@ -14999,7 +15126,7 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     name: icon,
     className: "-ml-1 mr-1 !h-5 !w-5"
   })) : (/*#__PURE__*/React__default.cloneElement(icon, {
-    className: 'mr-1 -ml-1 !h-5 !w-5'
+    className: cn(icon.props.className, 'mr-1 -ml-1')
   })) : null, /*#__PURE__*/React__default.createElement("span", {
     className: "truncate"
   }, children)), onDelete ? (/*#__PURE__*/React__default.createElement(Icon, {
@@ -16400,8 +16527,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, hiddenColumns, tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined)).then(function () {});
           }, function (error) {
             const errorMessage = `${texts.table.print.error}: ${error}`;
             console.error(errorMessage);
@@ -17126,7 +17254,10 @@ function TableGrid(props) {
 }
 
 const Column$1 = () => null;
-const Group$4 = () => null;
+Column$1.displayName = 'Table3Column';
+function Group$4(_) {
+  return null;
+}
 const BaseReport = /*#__PURE__*/fixedForwardRef(function BaseReport(props, ref) {
   const report = useReport(props, ref);
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
@@ -18766,18 +18897,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();
@@ -18805,6 +18939,7 @@ function reducer$2(state, action) {
       {
         const {
           columnId,
+          index,
           row,
           value
         } = payload;
@@ -18814,7 +18949,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':
@@ -18848,6 +18984,7 @@ function reducer$2(state, action) {
       {
         const {
           cellErrors,
+          index,
           moveReasons,
           original,
           value
@@ -18857,12 +18994,13 @@ function reducer$2(state, action) {
           changes: {
             ...state.changes,
             rows: setWith(state.changes.rows, rowId, value, Object),
-            errors: setWith(state.changes.errors, `${rowId}.cells`, cellErrors !== null && cellErrors !== void 0 ? cellErrors : state.changes.errors.cells[rowId], Object),
+            errors: setWith(state.changes.errors, `${rowId}.cells`, cellErrors !== null && cellErrors !== void 0 ? cellErrors : state.changes.errors[rowId], Object),
             originals: setWith(state.changes.originals, rowId, original !== null && original !== void 0 ? original : state.changes.originals[rowId], Object),
             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':
@@ -18880,6 +19018,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)
         };
       }
@@ -18912,6 +19051,7 @@ function reducer$2(state, action) {
     case 'insertTemporaryRow':
       {
         const {
+          index,
           value
         } = payload;
         return {
@@ -18921,14 +19061,36 @@ 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:
       return state;
   }
 }
-function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator) {
+function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIdentityAccessor, validator) {
+  const discardChanges = function (rowId, table) {
+    try {
+      // remove any new rows from pinned state before discarding them
+      table.resetRowPinning(true);
+      dispatch({
+        type: 'removeRow',
+        rowId,
+        payload: {
+          rowIdentityAccessor
+        }
+      });
+      const _temp8 = function () {
+        if (typeof handleDiscard === 'function') {
+          return Promise.resolve(handleDiscard()).then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp8 && _temp8.then ? _temp8.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   const saveChanges = function (table, rowId = undefined) {
     try {
       let _exit = false;
@@ -18941,19 +19103,20 @@ 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 () {
           var _changes$rowId;
-          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);
-              // show the saved status, then remove it after a delay
-              setRowStatus(rowId, 'saved');
-              setTimeout(() => {
-                setRowStatus(rowId, undefined);
-              }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
+              return Promise.resolve(discardChanges(rowId, table)).then(function () {
+                // show the saved status, then remove it after a delay
+                setRowStatus(rowId, 'saved');
+                setTimeout(() => {
+                  setRowStatus(rowId, undefined);
+                }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
+              });
             });
           }
           const rowChanges = (_changes$rowId = changes[rowId]) !== null && _changes$rowId !== void 0 ? _changes$rowId : {};
@@ -18971,7 +19134,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) {
@@ -18980,7 +19143,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) {
@@ -19020,18 +19183,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, nextValue, 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)];
@@ -19062,6 +19225,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
             rowId: cell.row.id,
             payload: {
               cellErrors: nextCellErrors,
+              index: rowIndex,
               moveReasons: nextMoveReasons,
               value: nextChanges
             }
@@ -19080,7 +19244,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         };
         // run validation - if there are changes, and if there is an original stored
         let validationErrors = {};
-        const _temp3 = function () {
+        const _temp = function () {
           if (validator && Object.keys(nextChanges).length && state.changes.originals[cell.row.id]) {
             // merge with the original so we get a full row
             const nextRowValue = {
@@ -19088,12 +19252,12 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
               ...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 = nextValue !== undefined ? {
         ...state.changes.rows[cell.row.id],
@@ -19106,7 +19270,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]
@@ -19120,42 +19284,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: {
@@ -19165,8 +19298,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;
@@ -19204,7 +19339,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,
@@ -19214,13 +19349,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
@@ -19230,6 +19366,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         rowId,
         payload: {
           columnId,
+          index: rowIndex,
           row: cell.row.original,
           value
         }
@@ -19262,6 +19399,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]
     }));
@@ -19272,20 +19410,8 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
   function hasChanges(rowId) {
     return rowId ? !!state.changes.rows[rowId] : !!Object.keys(state.changes.rows).length;
   }
-  function discardChanges(rowId, table) {
-    // remove any new rows from pinned state before discarding them
-    table.resetRowPinning(true);
-    dispatch({
-      type: 'removeRow',
-      rowId,
-      payload: {
-        rowIdentityAccessor
-      }
-    });
-  }
   return {
     // row
-    setRowValue,
     getRowValue,
     getRowMoveReason,
     hasRowErrors,
@@ -19310,8 +19436,8 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
   };
 }
 
-function useTableEditing(isEnabled = false, handleSave, handleChange, handleCreate, rowIdentityAccessor, validator) {
-  const createRow = function (table, scrollToIndex, row) {
+function useTableEditing(isEnabled = false, handleSave, handleChange, handleCreate, handleDiscard, rowIdentityAccessor, validator) {
+  const createRow = function (table, row) {
     try {
       let _exit = false;
       function _temp2(_result) {
@@ -19319,23 +19445,28 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, handleCrea
         const changeset = row !== null && row !== void 0 ? row : handleCreate();
         try {
           if (changeset) {
-            const newRowId = pendingChangesFns.insertTemporaryRow(changeset);
-            // reset before changing row otherwise the cell changes and validation might run
-            setLastFocusedCellIndex(undefined);
             // 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;
-            tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
+            const newRowId = pendingChangesFns.insertTemporaryRow(changeset, nextRowIndex);
+            // prep the row
+            table.setRowPinning(currentState => {
+              var _ref, _currentState$bottom;
+              return {
+                ...currentState,
+                bottom: (_ref = (_currentState$bottom = currentState.bottom) !== null && _currentState$bottom !== void 0 ? _currentState$bottom : []) === null || _ref === void 0 ? void 0 : _ref.concat(newRowId)
+              };
+            });
+            // prep editing mode
+            toggleDetailedMode(false);
+            setLastFocusedCellIndex(undefined);
             // wait until set states have run
             requestAnimationFrame(() => {
-              toggleEditing(true, table, scrollToIndex, false);
-              table.setRowPinning(currentState => {
-                var _ref, _currentState$bottom;
-                return {
-                  ...currentState,
-                  bottom: (_ref = (_currentState$bottom = currentState.bottom) !== null && _currentState$bottom !== void 0 ? _currentState$bottom : []) === null || _ref === void 0 ? void 0 : _ref.concat(newRowId)
-                };
-              });
+              tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
+              table.resetRowSelection();
+              if (!tableMeta.editing.isEditing) {
+                setEditing(true);
+              }
             });
           }
         } catch (error) {
@@ -19348,8 +19479,7 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, handleCrea
       const tableMeta = table.options.meta;
       const _temp = function () {
         if (tableMeta.rowActive.rowActiveIndex !== undefined) {
-          var _table$getRowModel$ro2;
-          return Promise.resolve(tableMeta.editing.saveChanges(table, (_table$getRowModel$ro2 = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]) === null || _table$getRowModel$ro2 === void 0 ? void 0 : _table$getRowModel$ro2.id)).then(function (saved) {
+          return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
             if (!saved) {
               _exit = true;
             }
@@ -19369,13 +19499,14 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, handleCrea
   const createRowButtonRef = React__default.useRef(null);
   // store the last focused cell, so that up/down arrow key navigation remains in the same column
   const [lastFocusedCellIndex, setLastFocusedCellIndex] = React__default.useState(undefined);
-  const pendingChangesFns = usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator);
-  function toggleEditing(enabled, table, scrollToIndex, doSave = true) {
+  const pendingChangesFns = usePendingChangesState(handleSave, handleChange, handleDiscard, rowIdentityAccessor, validator);
+  function toggleEditing(enabled, table, scrollToIndex) {
     const tableMeta = table.options.meta;
     if (enabled) {
       var _tableMeta$rowActive$, _table$getRowModel$ro;
       const index = (_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0;
       if (tableMeta.rowActive.rowActiveIndex === undefined) {
+        console.log('edit toggle active', index);
         tableMeta.rowActive.setRowActiveIndex(index);
       }
       if (!isTemporaryRow((_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id)) {
@@ -19388,9 +19519,7 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, handleCrea
       setLastFocusedCellIndex(undefined);
     }
     setEditing(enabled);
-    if (doSave) {
-      pendingChangesFns.saveChanges(table);
-    }
+    pendingChangesFns.saveChanges(table);
   }
   return {
     isEnabled,
@@ -19659,7 +19788,7 @@ function EditingControlCell(props) {
   }, [cellRef.current]);
   const handleChange = React__default.useCallback(nextValue => {
     if (nextValue !== value) {
-      tableMeta.editing.setCellValue(cell, nextValue);
+      tableMeta.editing.setCellValue(cell, rowIndex, nextValue);
       if (hasNonTextControl) {
         requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));
       }
@@ -19828,11 +19957,21 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
         props.onChange(newDate);
       }
     };
+    const handleDatepickerInputKeyDown = event => {
+      // When in detailed mode, we want to handle the change, when 'Enter' is pressed.
+      // To make it possible, we just need to prevent handleInputKeyDown from being executed, and give the full control to Datepicker,
+      // by doing this, Datepicker will exit "detailed mode" by itself when a valid date change event is triggered.
+      // In any other cases we'll just execute the "handleInputKeyDown" handler.
+      if (isDetailedMode && event.key === 'Enter' && event.target.value !== '') {
+        return;
+      }
+      handleInputKeyDown(event);
+    };
     return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, commonProps, {
       invalid: invalid,
       onChange: handleChange,
       onFocus: handleFocus,
-      onKeyDown: handleInputKeyDown,
+      onKeyDown: handleDatepickerInputKeyDown,
       ref: controlRef,
       value: valueAsDate
     }));
@@ -20084,7 +20223,7 @@ const RENDERERS$1 = {
   cell: Cell$5
 };
 function useTable3(props, ref) {
-  const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.onEditingCreate, props.rowIdentityAccessor, props.validator);
+  const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.onEditingCreate, props.onEditingDiscard, props.rowIdentityAccessor, props.validator);
   const creationEnabled = editing.isEnabled && !!props.onEditingCreate;
   // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state
   const data = React__default.useMemo(() => {
@@ -20137,7 +20276,7 @@ function useTable3(props, ref) {
     if (table.ref.current) {
       table.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing, table.instance, table.renderer.scrollToIndex);
       if (props.onEditingCreate) {
-        table.ref.current.instance.createRow = row => table.meta.editing.createRow(table.instance, table.renderer.scrollToIndex, row);
+        table.ref.current.instance.createRow = row => table.meta.editing.createRow(table.instance, row);
       }
     }
   }, [table.ref.current]);
@@ -20181,20 +20320,22 @@ function Alert$1(props) {
   // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505
   table.getAllColumns().find(x => x.id === 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);
+    // note: if this row click functionality is removed, indexes can be removed from useEditingState
     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;
@@ -20206,7 +20347,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 = undefined;
+    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
@@ -20214,7 +20360,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(', ');
@@ -20235,9 +20381,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);
     });
@@ -20302,7 +20447,6 @@ function CreateNewRow(props) {
   const {
     buttonRef,
     isScrolled,
-    scrollToIndex,
     table,
     tableMeta
   } = props;
@@ -20318,7 +20462,7 @@ function CreateNewRow(props) {
       if (isDisabled) {
         return Promise.resolve();
       }
-      return Promise.resolve(tableMeta.editing.createRow(table, scrollToIndex)).then(function () {});
+      return Promise.resolve(tableMeta.editing.createRow(table)).then(function () {});
     } catch (e) {
       return Promise.reject(e);
     }
@@ -20337,7 +20481,7 @@ function CreateNewRow(props) {
       keys: shortcut
     });
   }
-  const className = cn('group/row border-grey-300 !sticky z-[21]', {
+  const className = cn('group/row border-grey-300 !sticky z-[21] print:hidden', {
     'bottom-10': tableMeta.footer.isEnabled,
     'bottom-0': !tableMeta.footer.isEnabled,
     'border-b': !isScrolled
@@ -20427,7 +20571,7 @@ function TemporaryRow(props) {
       }
     }
   };
-  const className = cn('group/row border-grey-300 !sticky z-[22]', {
+  const className = cn('group/row border-grey-300 !sticky z-[22] print:hidden', {
     '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
@@ -20444,13 +20588,16 @@ function TemporaryRow(props) {
     onKeyDown: handleKeyDown,
     onKeyDownCapture: handleKeyDownCapture,
     hideInternalColumns: true,
-    hideRowActions: !tableMeta.editing.isEditing
+    hideRowActions: !tableMeta.editing.isEditing,
+    skipPageLoading: true
   }))));
 }
 
 const Column$3 = () => null;
 Column$3.displayName = 'Table3Column';
-const Group$5 = () => null;
+function Group$5(_) {
+  return null;
+}
 Group$5.displayName = 'Table3Group';
 const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref) {
   var _table3$meta$editing, _table3$meta$editing2;
@@ -20467,7 +20614,6 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     createWorkflow = /*#__PURE__*/React__default.createElement(CreateNewRow, {
       buttonRef: table3.meta.editing.createRowButtonRef,
       isScrolled: isScrolled,
-      scrollToIndex: table3.renderer.scrollToIndex,
       table: table3.instance,
       tableMeta: table3.meta
     });
@@ -22229,6 +22375,222 @@ Navigation2.Link = Link$3;
 Navigation2.Section = Section;
 Navigation2.Content = Content$a;
 
+const DATASET_SIZE_MULTIPLIER = 15;
+function useTableDataLoader2(fetchPage, fetchAll, options = {
+  pageSize: DEFAULT_PAGE_SIZE
+}) {
+  const loadPage = function (pageIndex, sorting, filters, hiddenColumns, search, reset = false) {
+    try {
+      // if a request is already pending for this page (and it's not a reset), skip it
+      if (_pendingPageRequests.current[pageIndex] && !reset) {
+        return Promise.resolve();
+      }
+      const hasChangedData = JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current) || search !== _lastUsedSearch.current;
+      // if the page is already loaded and has actual rows, abort
+      if (data.cache[pageIndex] && data.cache[pageIndex][0] && !hasChangedData && !reset) {
+        return Promise.resolve();
+      }
+      // create an id to track the update
+      const requestId = uuid.v4();
+      // set the page as loading, so that subsequent requests don't retrigger it
+      _pendingPageRequests.current[pageIndex] = true;
+      const _temp2 = _catch(function () {
+        _lastRequestId.current = requestId;
+        return Promise.resolve(fetchPage(pageIndex, pageSize, sorting, filters, hiddenColumns, search)).then(function (response) {
+          length.current = response.length;
+          // update state, here we do some "magic" to support "load in place"
+          setData(currentData => {
+            // if this request wasn't the last one, just return the current state to prevent weird updates
+            if (_lastRequestId.current !== requestId) {
+              return currentData;
+            }
+            const direction = getDirection(pageIndex, currentData.pages);
+            const nextPages = getPages(pageIndex, currentData.lastFetchedPage, reset ? [] : currentData.pages, direction);
+            // set values so we can track if they changed between loads
+            _lastUsedSorting.current = sorting;
+            _lastUsedFilters.current = filters;
+            _lastUsedSearch.current = search;
+            _lastUsedHiddenColumns.current = hiddenColumns;
+            // cache data as an object to prevent any duplicates for pages
+            let nextCache;
+            if (reset || hasChangedData || !direction) {
+              nextCache = nextPages.reduce((acc, p) => ({
+                ...acc,
+                [p]: Array(pageSize).fill(undefined)
+              }), {});
+            } else {
+              nextCache = {
+                ...currentData.cache
+              };
+            }
+            nextCache[pageIndex] = response.data;
+            // cleanup "unloaded" pages
+            if (direction === 'forward' && currentData.rows.length >= DATASET_SIZE) {
+              delete nextCache[currentData.pages[0]];
+            } else if (direction === 'backward' && currentData.rows.length >= DATASET_SIZE) {
+              delete nextCache[currentData.pages[currentData.pages.length - 1]];
+            }
+            // remap rows from the cached data - do it here and not in render to save some performance
+            const rows = Object.values(nextCache).reduce((acc, p) => acc.concat(p), []);
+            return {
+              cache: nextCache,
+              pages: nextPages,
+              rows: rows,
+              lastFetchedPage: pageIndex
+            };
+          });
+          // reset pending requests
+          delete _pendingPageRequests.current[pageIndex];
+        });
+      }, function () {});
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const {
+    pageSize
+  } = options;
+  const DATASET_SIZE = DATASET_SIZE_MULTIPLIER * pageSize;
+  // track the data length, we don't know it until the first request
+  const length = React__default.useRef(0);
+  // data will be filled after the first request
+  const [data, setData] = React__default.useState({
+    rows: [],
+    pages: [],
+    cache: {},
+    lastFetchedPage: undefined
+  });
+  // track which pages have been loaded to dedupe requests
+  const _pendingPageRequests = React__default.useRef({});
+  // it's possible to spam updates, e.g. sort, so we don't set state if the last request wasn't the current oen
+  const _lastRequestId = React__default.useRef();
+  // store last used properties
+  const _lastUsedSorting = React__default.useRef([]);
+  const _lastUsedFilters = React__default.useRef([]);
+  const _lastUsedSearch = React__default.useRef();
+  const _lastUsedHiddenColumns = React__default.useRef([]);
+  const loadAll = function (sorting, filters, hiddenColumns, search) {
+    try {
+      // set values so we can track if they changed between loads
+      _lastUsedSorting.current = sorting;
+      _lastUsedFilters.current = filters;
+      _lastUsedSearch.current = search;
+      _lastUsedHiddenColumns.current = hiddenColumns;
+      const _temp = _finallyRethrows(function () {
+        return _catch(function () {
+          return Promise.resolve(fetchAll(sorting, filters, hiddenColumns, search)).then(function (response) {
+            length.current = response.length;
+            const pages = [];
+            const cache = {};
+            Array.from(Array(response.length / pageSize).keys()).forEach(index => {
+              pages.push(index);
+              const startIndex = index * pageSize;
+              cache[index] = response.data.slice(startIndex, startIndex + pageSize);
+            });
+            setData({
+              cache,
+              pages,
+              rows: response.data,
+              lastFetchedPage: undefined
+            });
+          });
+        }, function () {});
+      }, function (_wasThrown, _result) {
+        // reset pending requests
+        _pendingPageRequests.current = {};
+        if (_wasThrown) throw _result;
+        return _result;
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const invalidate = function () {
+    try {
+      // reset stuff
+      _pendingPageRequests.current = {};
+      // load the current page again
+      return loadPage(getCurrentPage(data.pages), _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedHiddenColumns.current, _lastUsedSearch.current, true);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleSort = function (sorting) {
+    try {
+      // reset before loading the current page
+      _pendingPageRequests.current = {};
+      return loadPage(getCurrentPage(data.pages), sorting, _lastUsedFilters.current, _lastUsedHiddenColumns.current, _lastUsedSearch.current, true);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleFilter = function (filters, hiddenColumns) {
+    try {
+      // reset before loading the current page
+      _pendingPageRequests.current = {};
+      return loadPage(0, _lastUsedSorting.current, filters, hiddenColumns, _lastUsedSearch.current, true);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleSearch = function (search, hiddenColumns) {
+    try {
+      // reset before loading the current page
+      _pendingPageRequests.current = {};
+      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, hiddenColumns, search, true);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return [{
+    data: data.rows,
+    pages: data.pages,
+    length: length.current,
+    loadAll,
+    loadPage,
+    onChangeFilter: handleFilter,
+    onChangeSearch: handleSearch,
+    onChangeSort: handleSort,
+    pageSize,
+    _experimentalDataLoader2: true
+  }, invalidate];
+}
+function getCurrentPage(currentPages) {
+  if (currentPages.length <= 2) {
+    return currentPages[0];
+  }
+  // for even page lengths we can't know which is the current visible page - it could even be both
+  // so we load one of them and rely on the "load next/previous page" functionality in row
+  const middle = Math.floor(currentPages.length / 2);
+  return currentPages[middle];
+}
+function getDirection(pageIndex, currentPages) {
+  if (currentPages.length) {
+    if (pageIndex === currentPages[currentPages.length - 1] + 1) {
+      return 'forward';
+    } else if (pageIndex === currentPages[0] - 1 || currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0]) {
+      return 'backward';
+    }
+  }
+  return undefined;
+}
+function getPages(pageIndex, lastUsedPageIndex, currentPages, direction) {
+  if (currentPages.length && (pageIndex === lastUsedPageIndex || currentPages.includes(pageIndex))) {
+    return currentPages;
+  }
+  if (direction === 'forward') {
+    const nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(1) : currentPages;
+    return nextPages.concat(pageIndex);
+  }
+  if (direction === 'backward') {
+    const nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(0, -1) : currentPages;
+    return [pageIndex].concat(nextPages);
+  }
+  return [pageIndex];
+}
+
 const useBoundaryOverflowDetection = (ref, dependencies = []) => {
   const [boundaryIndex, setBoundaryIndex] = React__default.useState();
   const dimensions = useBoundingClientRectListener(ref, dependencies);
@@ -22368,6 +22730,7 @@ exports.useOnClickOutside = useOnClickOutside;
 exports.usePagination = usePagination;
 exports.useRadioGroup = useRadioGroup;
 exports.useTableDataLoader = useTableDataLoader;
+exports.useTableDataLoader2 = useTableDataLoader2;
 exports.useTableRowCreation = useTableRowCreation;
 exports.useToast = useToast;
 //# sourceMappingURL=taco.cjs.development.js.map