@react-fabric/data 1.0.0-beta.5 → 1.0.0-beta.52

package/dist/cjs/table/Table.js

@@ -2,11 +2,12 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var reactI18next = require('react-i18next');
 var AddColumn = require('./AddColumn.js');
-var BodyCell = require('./BodyCell.js');
+var BodyRow = require('./BodyRow.js');
 var CheckboxCell = require('./CheckboxCell.js');
 var Context = require('./Context.js');
 var EmptyCell = require('./EmptyCell.js');
@@ -18,16 +19,26 @@ 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$start3, _state$cols3, _state$end3;
+  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;
   var _useTranslation = reactI18next.useTranslation("data"),
@@ -38,14 +49,25 @@ 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,
+      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 wrapperStart = react.useMemo(function () {
@@ -54,66 +76,84 @@ var Table = function Table(_ref) {
   var wrapperEnd = react.useMemo(function () {
     return "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px";
   }, []);
+  react.useLayoutEffect(function () {
+    setTimeout(function () {
+      initialScroll && virtualizer.scrollToIndex(initialScroll, {
+        align: "start"
+      });
+    }, 100);
+  }, []);
   react.useImperativeHandle(ref, function () {
     return {
-      hilight: function hilight(row) {
-        var _refBody$current, _refBody$current2;
-        (_refBody$current = refBody.current) === null || _refBody$current === void 0 || _refBody$current.querySelectorAll(".datatable-row[data-hilight=\"true\"]").forEach(function (el) {
-          return el && (el.dataset.hilight = undefined);
-        });
-        var el = (_refBody$current2 = refBody.current) === null || _refBody$current2 === void 0 ? void 0 : _refBody$current2.querySelector("[data-row=\"".concat(row, "\"]"));
-        el === null || el === void 0 || el.scrollIntoView({
-          behavior: "smooth",
-          block: "center"
+      scrollTo: function scrollTo(row) {
+        virtualizer.scrollToIndex(row, {
+          align: "start"
         });
-        el && (el.dataset.hilight = "true");
       },
-      unhilight: function unhilight() {
-        var _refBody$current3;
-        (_refBody$current3 = refBody.current) === null || _refBody$current3 === void 0 || _refBody$current3.querySelectorAll(".datatable-row[data-hilight=\"true\"]").forEach(function (el) {
-          return el && (el.dataset.hilight = undefined);
+      hilight: function hilight(row) {
+        var _scrollerRef$current;
+        (_scrollerRef$current = scrollerRef.current) === null || _scrollerRef$current === void 0 || (_scrollerRef$current = _scrollerRef$current.querySelector(".hilight")) === null || _scrollerRef$current === void 0 || _scrollerRef$current.classList.remove("hilight", "ring-1");
+        virtualizer.scrollToIndex(Math.floor(row), {
+          align: "start"
         });
+        setTimeout(function () {
+          var _scrollerRef$current2;
+          (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector("[data-index=\"".concat(row, "\"]"))) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.add("hilight", "ring-1");
+        }, 100);
       },
-      scrollTo: function scrollTo(row) {
-        var _refBody$current4;
-        var el = (_refBody$current4 = refBody.current) === null || _refBody$current4 === void 0 ? void 0 : _refBody$current4.querySelector("[data-row=\"".concat(row, "\"]"));
-        el === null || el === void 0 || el.scrollIntoView({
-          behavior: "smooth"
-        });
+      unhilight: function unhilight() {
+        var _scrollerRef$current3;
+        (_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");
       }
     };
   }, []);
+  react.useEffect(function () {
+    var handle = utilities.debounce(function (top) {
+      onScroll === null || onScroll === void 0 || onScroll(top !== null && top !== void 0 ? top : 0);
+    });
+    handle(top);
+    return function () {
+      handle.cancel();
+    };
+  }, [top]);
   return /*#__PURE__*/jsxRuntime.jsx(Context.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-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-2",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: wrapperStart,
-          children: [checkableRows && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
+          children: [canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "w-6"
+          }), checkableRows && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
             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
+              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
+            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
+              onSort: onSort,
+              onFilter: onFilter
             }), idx);
           }), hideableColumns && /*#__PURE__*/jsxRuntime.jsx(AddColumn.AddColumn, {
             onClick: onHide,
@@ -123,84 +163,86 @@ 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",
+        className: "area-content flex flex-col flex-nowrap min-h-full",
         style: {
           height: totalSize()
         },
         ref: refBody,
         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 _state$start2, _state$cols2, _state$end2;
+          var _groupRenderer;
           var index = _ref2.index,
             key = _ref2.key;
           var data = getData(index);
-          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          return "__GROUP__" in data ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+            ref: measureElement,
+            "data-index": index,
+            className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-1", isActiveSticky(index) && "sticky top-8"),
             role: "none",
-            "data-row": index,
-            className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500", index % 2 ? "bg-even" : "bg-odd", onRowClick && "hover:bg-primary-50 active:bg-primary-100"),
             onClick: function onClick() {
-              return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
+              return toggleGroupExpand(data.key);
             },
-            "data-index": index,
-            ref: measureElement,
-            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: wrapperStart,
-              children: [checkableRows && keyProperty && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
-                onClick: function onClick() {
-                  return toggleChecked(data[keyProperty]);
-                },
-                state: checkState.checked.includes(data[keyProperty]) ? 1 : 0
-              }), (_state$start2 = state.start) === null || _state$start2 === void 0 ? void 0 : _state$start2.map(function (col, ids) {
-                return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
-                  column: col,
-                  item: data
-                }, "".concat(key, ":").concat(ids));
-              })]
-            }), (_state$cols2 = state.cols) === null || _state$cols2 === void 0 ? void 0 : _state$cols2.map(function (col, idc) {
-              return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
-                column: col,
-                item: data
-              }, "".concat(key, ":").concat(idc));
-            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: wrapperEnd,
-              children: [(_state$end2 = state.end) === null || _state$end2 === void 0 ? void 0 : _state$end2.map(function (col, ide) {
-                return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
-                  column: col,
-                  item: data
-                }, "".concat(key, ":").concat(ide));
-              }), hideableColumns && /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "w-6"
+            children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+              rtlFlip: true,
+              icon: data.open ? core.CoreIcons.chevronDown : core.CoreIcons.chevronRight
+            }), (_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,
+            expanded: !!keyProperty && checkState.expanded.includes(data[keyProperty]),
+            data: data,
+            hideableColumns: hideableColumns,
+            keyProperty: keyProperty,
+            measureElement: measureElement,
+            onRowClick: onRowClick,
+            state: state,
+            canExpand: canExpand,
+            toggleExpand: toggleExpand,
+            expandRow: children,
+            toggleChecked: toggleChecked,
+            wrapperEnd: wrapperEnd,
+            wrapperStart: wrapperStart
           }, key);
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex-1 flex flex-nowrap",
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
             className: wrapperStart,
-            children: [checkableRows && /*#__PURE__*/jsxRuntime.jsx("div", {
+            children: [canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w-6"
+            }), checkableRows && /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "w-6"
-            }), (_state$start3 = state.start) === null || _state$start3 === void 0 ? void 0 : _state$start3.map(function (col) {
+            }), (_state$start2 = state.start) === null || _state$start2 === void 0 ? void 0 : _state$start2.map(function (col) {
               return /*#__PURE__*/jsxRuntime.jsx(EmptyCell.EmptyCell, _objectSpread({}, col), String(col.id));
             })]
-          }), (_state$cols3 = state.cols) === null || _state$cols3 === void 0 ? void 0 : _state$cols3.map(function (col) {
+          }), (_state$cols2 = state.cols) === null || _state$cols2 === void 0 ? void 0 : _state$cols2.map(function (col) {
             return /*#__PURE__*/jsxRuntime.jsx(EmptyCell.EmptyCell, _objectSpread({}, col), String(col.id));
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: wrapperEnd,
-            children: [(_state$end3 = state.end) === null || _state$end3 === void 0 ? void 0 : _state$end3.map(function (col) {
+            children: [(_state$end2 = state.end) === null || _state$end2 === void 0 ? void 0 : _state$end2.map(function (col) {
               return /*#__PURE__*/jsxRuntime.jsx(EmptyCell.EmptyCell, _objectSpread({}, col), String(col.id));
             }), hideableColumns && /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "w-6"
             })]
           })]
         })]
-      }), !loading && data.length === 0 && /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
+      }), !loading && data.length === 0 && (emptyDisplay !== null && emptyDisplay !== void 0 ? emptyDisplay : /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
         size: "sm",
         className: "bg-dimmed",
         message: t("datagrid.empty")
-      })]
+      }))]
     })
   });
 };

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

@@ -44,14 +44,14 @@ var useResizer = function useResizer(colEl, ghostEl, callback) {
   /** ***************** 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");

package/dist/cjs/table/useVirtualTable.js

@@ -1,61 +1,165 @@
 '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) {
+var useVirtualTable = 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);
+        (_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,
+              items: state.grouped[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
     }),
     _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]);
   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",
+        key: key
+      });
+    },
     toggleChecked: function toggleChecked(key) {
       return dispatch({
         type: "check",