@react-fabric/data 1.0.0-beta.8 → 1.0.1

package/dist/cjs/table/Table.js

@@ -8,33 +8,41 @@ var reactI18next = require('react-i18next');
 var AddColumn = require('./AddColumn.js');
 var BodyRow = require('./BodyRow.js');
 var CheckboxCell = require('./CheckboxCell.js');
-var Context = require('./Context.js');
 var EmptyCell = require('./EmptyCell.js');
 var HeaderCell = require('./HeaderCell.js');
+var Provider = require('./Provider.js');
 var useTableColumns = require('./useTableColumns.js');
 var useVirtualTable = require('./useVirtualTable.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Table = function Table(_ref) {
-  var _state$start, _state$cols, _state$end, _items$, _state$start2, _state$cols2, _state$end2;
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function Table(_ref) {
+  var _state$start, _state$cols, _state$end, _items, _state$start2, _state$cols2, _state$end2;
   var ref = _ref.ref,
     data = _ref.data,
     columns = _ref.columns,
-    keyProperty = _ref.keyProperty,
+    _ref$keyProperty = _ref.keyProperty,
+    keyProperty = _ref$keyProperty === void 0 ? "id" : _ref$keyProperty,
+    groupProperty = _ref.groupProperty,
     checkableRows = _ref.checkableRows,
     initialScroll = _ref.initialScroll,
     hideableColumns = _ref.hideableColumns,
     sort = _ref.sort,
     loading = _ref.loading,
+    checked = _ref.checked,
     emptyDisplay = _ref.emptyDisplay,
+    groupRenderer = _ref.groupRenderer,
     canExpand = _ref.canExpand,
     children = _ref.children,
     onSort = _ref.onSort,
+    onFilter = _ref.onFilter,
     onScroll = _ref.onScroll,
     onRowClick = _ref.onRowClick,
-    onCheckedChanged = _ref.onCheckedChanged;
+    onCheckedChanged = _ref.onCheckedChanged,
+    _ref$total = _ref.total,
+    total = _ref$total === void 0 ? 0 : _ref$total,
+    onLoadMore = _ref.onLoadMore;
   var _useTranslation = reactI18next.useTranslation("data"),
     t = _useTranslation.t;
   var fireCheckChanged = core.useDebounce(function (checkedIds) {
@@ -43,19 +51,30 @@ var Table = function Table(_ref) {
   var _useTableColumns = useTableColumns.useTableColumns(columns),
     state = _useTableColumns.state,
     onHide = _useTableColumns.onHide;
-  var _useVirtualTable = useVirtualTable.useVirtualTable(data, keyProperty, fireCheckChanged),
+  var _useVirtualTable = useVirtualTable.useVirtualTable(data, {
+      checked: checked,
+      keyProperty: keyProperty,
+      groupProperty: groupProperty,
+      total: total,
+      loading: loading,
+      onLoadMore: onLoadMore,
+      onCheckChanged: fireCheckChanged
+    }),
     scrollerRef = _useVirtualTable.scrollerRef,
     items = _useVirtualTable.items,
     top = _useVirtualTable.top,
     checkState = _useVirtualTable.checkState,
     virtualizer = _useVirtualTable.virtualizer,
+    hasActiveSticky = _useVirtualTable.hasActiveSticky,
     toggleExpand = _useVirtualTable.toggleExpand,
     toggleChecked = _useVirtualTable.toggleChecked,
     toggleAllChecked = _useVirtualTable.toggleAllChecked,
+    toggleGroupExpand = _useVirtualTable.toggleGroupExpand,
     getData = _useVirtualTable.getData,
     totalSize = _useVirtualTable.totalSize,
+    isActiveSticky = _useVirtualTable.isActiveSticky,
     measureElement = _useVirtualTable.measureElement;
-  var refBody = react.useRef(null);
+  var bodyRef = react.useRef(null);
   var wrapperStart = react.useMemo(function () {
     return "bg-inherit sticky start-0 flex flex-nowrap z-1";
   }, []);
@@ -63,11 +82,15 @@ var Table = function Table(_ref) {
     return "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px";
   }, []);
   react.useLayoutEffect(function () {
-    setTimeout(function () {
-      initialScroll && virtualizer.scrollToIndex(initialScroll, {
+    var tmr = setTimeout(function () {
+      if (initialScroll) virtualizer.scrollToIndex(initialScroll, {
         align: "start"
       });
     }, 100);
+    return function () {
+      clearTimeout(tmr);
+    };
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, []);
   react.useImperativeHandle(ref, function () {
     return {
@@ -92,7 +115,9 @@ var Table = function Table(_ref) {
         (_scrollerRef$current3 = scrollerRef.current) === null || _scrollerRef$current3 === void 0 || (_scrollerRef$current3 = _scrollerRef$current3.querySelector(".hilight")) === null || _scrollerRef$current3 === void 0 || _scrollerRef$current3.classList.remove("hilight", "ring-1");
       }
     };
-  }, []);
+  },
+  // eslint-disable-next-line @eslint-react/exhaustive-deps
+  []);
   react.useEffect(function () {
     var handle = utilities.debounce(function (top) {
       onScroll === null || onScroll === void 0 || onScroll(top !== null && top !== void 0 ? top : 0);
@@ -101,16 +126,18 @@ var Table = function Table(_ref) {
     return function () {
       handle.cancel();
     };
-  }, [top]);
-  return /*#__PURE__*/jsxRuntime.jsx(Context.TableProvider, {
+  }, [onScroll, top]);
+  return /*#__PURE__*/jsxRuntime.jsx(Provider.TableProvider, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "grid area-content overflow-auto relative",
       style: {
         gridTemplate: "\"head\" auto \"loader\" auto \"content\" 1fr \"foot\" auto/1fr"
       },
+      "data-ref": "tableScroller",
       ref: scrollerRef,
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
+        "data-ref": "tableHeader",
+        className: "bg-default font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-3",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: wrapperStart,
           children: [canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -119,23 +146,38 @@ var Table = function Table(_ref) {
             state: checkState.allChecked,
             onClick: toggleAllChecked
           }), (_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.map(function (col, idx) {
-            return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
-              sort: sort,
-              onSort: onSort
-            }), idx);
+            return (
+              /*#__PURE__*/
+              // eslint-disable-next-line @eslint-react/no-array-index-key
+              jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
+                sort: sort,
+                onSort: onSort,
+                onFilter: onFilter
+              }), idx)
+            );
           })]
         }), (_state$cols = state.cols) === null || _state$cols === void 0 ? void 0 : _state$cols.map(function (col, idx) {
-          return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
-            sort: sort,
-            onSort: onSort
-          }), idx);
+          return (
+            /*#__PURE__*/
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
+              sort: sort,
+              onSort: onSort,
+              onFilter: onFilter
+            }), idx)
+          );
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: wrapperEnd,
           children: [(_state$end = state.end) === null || _state$end === void 0 ? void 0 : _state$end.map(function (col, idx) {
-            return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
-              sort: sort,
-              onSort: onSort
-            }), idx);
+            return (
+              /*#__PURE__*/
+              // eslint-disable-next-line @eslint-react/no-array-index-key
+              jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
+                sort: sort,
+                onSort: onSort,
+                onFilter: onFilter
+              }), idx)
+            );
           }), hideableColumns && /*#__PURE__*/jsxRuntime.jsx(AddColumn.AddColumn, {
             onClick: onHide,
             columns: state.columns.filter(function (col) {
@@ -143,22 +185,46 @@ var Table = function Table(_ref) {
             })
           })]
         })]
-      }), loading && /*#__PURE__*/jsxRuntime.jsx(core.Loading, {}), data.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "area-content flex flex-col flex-nowrap",
+      }), loading && /*#__PURE__*/jsxRuntime.jsx(core.LoadingLine, {}), data.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "area-content flex flex-col flex-nowrap min-h-full",
         style: {
           height: totalSize()
         },
-        ref: refBody,
+        ref: bodyRef,
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
-            height: (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.start
+            height: (_items = items[hasActiveSticky ? 1 : 0]) === null || _items === void 0 ? void 0 : _items.start
           }
         }), items.map(function (_ref2) {
+          var _groupRenderer;
           var index = _ref2.index,
             key = _ref2.key;
           var data = getData(index);
-          return /*#__PURE__*/jsxRuntime.jsx(BodyRow.BodyRow, {
-            rowKey: key,
+          return "__GROUP__" in data ? /*#__PURE__*/jsxRuntime.jsx("div", {
+            ref: measureElement,
+            "data-index": index,
+            className: utilities.cn("text-md bg-default border-y border-tint-100 border-t-0 cursor-pointer flex items-center justify-start gap-1 z-2", isActiveSticky(index) && "sticky top-8"),
+            role: "none",
+            onClick: function onClick() {
+              return toggleGroupExpand(data.key);
+            },
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: utilities.cn("px-2 py-1 flex items-center gap-1 z-2 sticky inset-s-0"),
+              children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+                rtlFlip: true,
+                icon: data.open ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]"
+              }), (_groupRenderer = groupRenderer === null || groupRenderer === void 0 ? void 0 : groupRenderer(data)) !== null && _groupRenderer !== void 0 ? _groupRenderer : /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex gap-1 items-center",
+                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                  children: data.key
+                }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+                  className: "text-sm",
+                  children: ["(", data.itemCount, ")"]
+                })]
+              })]
+            })
+          }, key) : /*#__PURE__*/jsxRuntime.jsx(BodyRow.BodyRow, {
+            rowKey: key.toString(),
             index: index,
             checkableRows: checkableRows,
             checked: keyProperty && checkState.checked.includes(data[keyProperty]) ? 1 : 0,
@@ -205,6 +271,6 @@ var Table = function Table(_ref) {
       }))]
     })
   });
-};
+}
 
 exports.Table = Table;

package/dist/cjs/{tree/types.js → table/context.js}

@@ -1,12 +1,14 @@
 'use strict';
 
+var react = require('react');
+
 /*
  * React Fabric
  * @version: 1.0.0
  *
  *
  * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * Copyright (c) 2026 Adarsh Pastakia
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
  * and associated documentation files (the "Software"), to deal in the Software without restriction,
@@ -23,8 +25,10 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var iconExpandAll = "M12.984 9v6h3l-3.984 3.984-3.984-3.984h3v-6h-3l3.984-3.984 3.984 3.984h-3zM3.984 2.016h16.031v1.969h-16.031v-1.969zM3.984 20.016h16.031v1.969h-16.031v-1.969z";
-var iconCollapseAll = "M3.984 11.016h16.031v1.969h-16.031v-1.969zM15.984 5.016l-3.984 3.984-3.984-3.984h3v-4.031h1.969v4.031h3zM8.016 18.984l3.984-3.984 3.984 3.984h-3v4.031h-1.969v-4.031h-3z";
+var TableContext = /*#__PURE__*/react.createContext({});
+var useTableContext = function useTableContext() {
+  return react.use(TableContext);
+};
 
-exports.iconCollapseAll = iconCollapseAll;
-exports.iconExpandAll = iconExpandAll;
+exports.TableContext = TableContext;
+exports.useTableContext = useTableContext;

package/dist/cjs/table/types.js

@@ -27,6 +27,35 @@ var COL_MIN_WIDTH = "3rem";
 var COL_MAX_WIDTH = "64rem";
 var COL_DEFAULT_WIDTH = "12rem";
 
+/**
+ * TableColumn interface defines the structure of a column in a table.
+ * It includes properties for column identification, display options, alignment,
+ * visibility, resizing, sorting, filtering, and rendering.
+ *
+ * @template T - The type of data the column will represent, defaulting to KeyValue.
+ * @property {keyof T | string} id - Unique identifier for the column.
+ * @property {"string" | "number" | "boolean" | "datetime" | "date" | "time" | "unknown"} [dataType] - Data type of the column values.
+ * @property {string} [label] - Display label for the column header.
+ * @property {string} [tooltip] - Tooltip text for the column header.
+ * @property {string} [format] - Format string for displaying the column values.
+ * @property {"start" | "center" | "end"} [align] - Text alignment within the column.
+ * @property {"start" | "end"} [locked] - Indicates if the column is locked at the start or end.
+ * @property {boolean} [hidden] - Whether the column is hidden.
+ * @property {boolean} [truncate] - Whether to truncate the text in the column.
+ * @property {boolean} [hideable] - Whether the column can be hidden by the user.
+ * @property {boolean} [resizable] - Whether the column can be resized by the user.
+ * @property {boolean} [sortable] - Whether the column can be sorted.
+ * @property {boolean} [filterable] - Whether the column can be filtered.
+ * @property {AnyObject} [filter] - Filter criteria for the column.
+ * @property {ReactElement[]} [actions] - Array of action elements to be displayed in the column.
+ * @property {AnyObject[]} [filterOptions] - Options for filtering the column.
+ * @property {string | number} [width] - Width of the column.
+ * @property {string | number} [minWidth] - Minimum width of the column.
+ * @property {string | number} [maxWidth] - Maximum width of the column.
+ * @property {KeyValue} [valueMap] - Mapping of values for the column.
+ * @property {(value: AnyObject, data: T, index: number) => Elements<AnyObject>} [renderer] - Custom renderer function for the column values.
+ */
+
 exports.COL_DEFAULT_WIDTH = COL_DEFAULT_WIDTH;
 exports.COL_MAX_WIDTH = COL_MAX_WIDTH;
 exports.COL_MIN_WIDTH = COL_MIN_WIDTH;

package/dist/cjs/table/useResizer.js

@@ -23,7 +23,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var useResizer = function useResizer(colEl, ghostEl, callback) {
+function startResizer(colEl, ghostEl, callback) {
   var placeholder = ghostEl.firstElementChild;
   var isRtl = getComputedStyle(colEl).direction === "rtl";
   var onResize = function onResize(evt) {
@@ -34,24 +34,24 @@ var useResizer = function useResizer(colEl, ghostEl, callback) {
   };
 
   /** ***************** dettach handlers on mouseup *******************/
-  var onResizeEnd = function onResizeEnd() {
+  var _onResizeEnd = function onResizeEnd() {
     callback(placeholder.offsetWidth);
     ghostEl.style.display = "none";
     document.removeEventListener("mousemove", onResize);
-    document.removeEventListener("mouseup", onResizeEnd);
+    document.removeEventListener("mouseup", _onResizeEnd);
   };
 
   /** ***************** attach handlers *******************/
   var box = colEl.getBoundingClientRect();
   if (colEl.parentElement != null) {
-    var _colEl$parentElement;
-    var parentBox = (_colEl$parentElement = colEl.parentElement) === null || _colEl$parentElement === void 0 ? void 0 : _colEl$parentElement.getBoundingClientRect();
+    var _colEl$closest;
+    var parentBox = (_colEl$closest = colEl.closest("[data-ref='tableScroller']")) === null || _colEl$closest === void 0 ? void 0 : _colEl$closest.getBoundingClientRect();
     if (isRtl) {
       placeholder.style.left = "unset";
-      placeholder.style.right = "".concat(box.right - parentBox.right, "px");
+      placeholder.style.right = "".concat(parentBox.width - box.right, "px");
     } else {
       placeholder.style.right = "unset";
-      placeholder.style.left = "".concat(box.left - parentBox.left, "px");
+      placeholder.style.left = "".concat(box.left, "px");
     }
   }
   placeholder.style.width = "".concat(colEl.offsetWidth, "px");
@@ -59,7 +59,7 @@ var useResizer = function useResizer(colEl, ghostEl, callback) {
   placeholder.style.maxWidth = colEl.style.maxWidth || "75vw";
   ghostEl.style.display = "block";
   document.addEventListener("mousemove", onResize);
-  document.addEventListener("mouseup", onResizeEnd);
-};
+  document.addEventListener("mouseup", _onResizeEnd);
+}
 
-exports.useResizer = useResizer;
+exports.startResizer = startResizer;

package/dist/cjs/table/useTableColumns.js

@@ -6,8 +6,8 @@ var utilities = require('@react-fabric/utilities');
 var react = require('react');
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useTableColumns = function useTableColumns(columns) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function useTableColumns(columns) {
   var _useReducer = react.useReducer(function (state, action) {
       if (action.type === "columns") {
         state.columns = action.columns;
@@ -16,7 +16,7 @@ var useTableColumns = function useTableColumns(columns) {
         var col = state.columns.find(function (col) {
           return col.id === action.id;
         });
-        col && state.columns.splice(state.columns.indexOf(col), 1, _objectSpread(_objectSpread({}, col), {}, {
+        if (col) state.columns.splice(state.columns.indexOf(col), 1, _objectSpread(_objectSpread({}, col), {}, {
           hidden: col.hidden !== true
         }));
       }
@@ -58,6 +58,6 @@ var useTableColumns = function useTableColumns(columns) {
       });
     }
   };
-};
+}
 
 exports.useTableColumns = useTableColumns;

package/dist/cjs/table/useVirtualTable.js

@@ -1,49 +1,83 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var utilities = require('@react-fabric/utilities');
 var reactVirtual = require('@tanstack/react-virtual');
 var react = require('react');
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function useVirtualTable(data, options) {
   var _virtualizer$range;
   // TODO: refactor data into item list, apply grouping if groupColumn provided
   // TODO: when grouping maintain map of group with children, {___GROUP___:true, label, items, open}
-
-  var scrollerRef = react.useRef(null);
-  var virtualizer = reactVirtual.useVirtualizer({
-    count: data.length,
-    getScrollElement: function getScrollElement() {
-      return scrollerRef.current;
-    },
-    estimateSize: function estimateSize() {
-      return 24;
-    }
-  });
   var _useReducer = react.useReducer(function (state, action) {
+      if (action.type === "updateState") {
+        state.checked = action.checked;
+      }
       if (action.type === "expand") {
         if (state.expanded.includes(action.key)) state.expanded.splice(state.expanded.indexOf(action.key), 1);else state.expanded.push(action.key);
       }
       if (action.type === "check") {
+        var _options$onCheckChang;
         if (state.checked.includes(action.key)) state.checked.splice(state.checked.indexOf(action.key), 1);else state.checked.push(action.key);
-        onCheckChanged === null || onCheckChanged === void 0 || onCheckChanged(state.checked);
+        (_options$onCheckChang = options.onCheckChanged) === null || _options$onCheckChang === void 0 || _options$onCheckChang.call(options, state.checked);
       }
       if (action.type === "checkall") {
+        var _options$onCheckChang2;
         if (state.allChecked !== 0) {
           state.checked = [];
-        } else if (keyProperty) {
-          state.checked = data.map(function (item) {
-            return item[keyProperty];
+        } else if (options.keyProperty) {
+          state.checked = state.data.map(function (item) {
+            return item[options.keyProperty];
+          });
+        }
+        (_options$onCheckChang2 = options.onCheckChanged) === null || _options$onCheckChang2 === void 0 || _options$onCheckChang2.call(options, state.checked);
+      }
+      var checkList = state.data.filter(function (hit) {
+        return state.checked.includes(hit[options.keyProperty]);
+      });
+      if (action.type === "groupExpand") {
+        var group = state.groups.find(function (group) {
+          return group.key === action.key;
+        });
+        if (group) {
+          group.open = !group.open;
+          state.groups = state.groups.slice();
+          state.items = state.groups.map(function (group) {
+            return [group, group.open ? state.grouped[group.key] : undefined];
+          }).flat(2).filter(Boolean);
+        }
+      }
+      if (action.type === "reset") {
+        state.data = action.data;
+        if (action.key) {
+          state.grouped = utilities.groupBy(state.data, action.key);
+          state.groups = Object.keys(state.grouped).sort(utilities.compareValues("asc")).map(function (group) {
+            return {
+              __GROUP__: true,
+              open: true,
+              key: group,
+              itemCount: state.grouped[group].length
+            };
           });
+          state.items = state.groups.map(function (group) {
+            return [group].concat(_toConsumableArray(state.grouped[group.key]));
+          }).flat();
+        } else {
+          state.items = state.data;
         }
-        onCheckChanged === null || onCheckChanged === void 0 || onCheckChanged(state.checked);
       }
       return _objectSpread(_objectSpread({}, state), {}, {
-        allChecked: state.checked.length === data.length ? 1 : state.checked.length ? 2 : 0
+        allChecked: checkList.length === state.data.length ? 1 : state.checked.length ? 2 : 0
       });
     }, {
+      data: data,
+      items: [],
+      grouped: {},
+      groups: [],
       checked: [],
       expanded: [],
       allChecked: 0
@@ -51,19 +85,92 @@ var useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
+  var activeStickyIndexRef = react.useRef(0);
+  var stickyIndexes = react.useMemo(function () {
+    return state.items.map(function (hit, idx) {
+      return "__GROUP__" in hit ? idx : undefined;
+    }).filter(Boolean);
+  }, [state.items]);
+  var isActiveSticky = function isActiveSticky(index) {
+    return activeStickyIndexRef.current === index;
+  };
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasActiveSticky = _useState2[0],
+    setHasActiveSticky = _useState2[1];
+  var scrollerRef = react.useRef(null);
+  var virtualizer = reactVirtual.useVirtualizer({
+    count: state.items.length,
+    getScrollElement: function getScrollElement() {
+      return scrollerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return 32;
+    },
+    rangeExtractor: react.useCallback(function (range) {
+      var _reverse$find;
+      activeStickyIndexRef.current = (_reverse$find = _toConsumableArray(stickyIndexes).reverse().find(function (index) {
+        return range.startIndex > index;
+      })) !== null && _reverse$find !== void 0 ? _reverse$find : 0;
+      setHasActiveSticky(range.startIndex !== activeStickyIndexRef.current);
+      var next = new Set([activeStickyIndexRef.current].concat(_toConsumableArray(reactVirtual.defaultRangeExtractor(range))));
+      return _toConsumableArray(next);
+    }, [stickyIndexes])
+  });
   var virtualItems = virtualizer.getVirtualItems();
   var getData = react.useCallback(function (index) {
-    return data[index];
-  }, [data]);
+    return state.items[index];
+  }, [state.items]);
+  react.useEffect(function () {
+    dispatch({
+      type: "reset",
+      key: options.groupProperty,
+      data: data
+    });
+  }, [data, options.groupProperty]);
+  react.useEffect(function () {
+    var _options$checked;
+    dispatch({
+      type: "updateState",
+      checked: (_options$checked = options.checked) !== null && _options$checked !== void 0 ? _options$checked : []
+    });
+  }, [options.checked]);
+  react.useEffect(function () {
+    if (options.onLoadMore) {
+      var _virtualItems$, _virtualItems$slice$p;
+      var firstItem = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index;
+      var lastItem = virtualItems === null || virtualItems === void 0 || (_virtualItems$slice$p = virtualItems.slice(-1).pop()) === null || _virtualItems$slice$p === void 0 ? void 0 : _virtualItems$slice$p.index;
+      var canLoadPrevPage = firstItem !== undefined && state.items[firstItem] === null;
+      var canLoadNextPage = lastItem !== undefined && lastItem === state.items.length - 1 && state.items.length < options.total;
+      var db = utilities.debounce(options.onLoadMore);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!options.loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
+      return function () {
+        return db.cancel();
+      };
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [options.onLoadMore, virtualItems]);
   return {
     scrollerRef: scrollerRef,
     items: virtualItems,
     checkState: state,
     getData: getData,
     virtualizer: virtualizer,
+    hasActiveSticky: hasActiveSticky,
+    isActiveSticky: isActiveSticky,
     top: (_virtualizer$range = virtualizer.range) === null || _virtualizer$range === void 0 ? void 0 : _virtualizer$range.startIndex,
     totalSize: virtualizer.getTotalSize,
     measureElement: virtualizer.measureElement,
+    toggleGroupExpand: function toggleGroupExpand(key) {
+      return dispatch({
+        type: "groupExpand",
+        key: key
+      });
+    },
     toggleExpand: function toggleExpand(key) {
       return dispatch({
         type: "expand",
@@ -82,6 +189,6 @@ var useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged
       });
     }
   };
-};
+}
 
 exports.useVirtualTable = useVirtualTable;