@react-fabric/data 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/cjs/table/HeaderCell.js

@@ -1,42 +1,20 @@
 'use strict';
 
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var core = require('@react-fabric/core');
 var react = require('react');
 var Context = require('./Context.js');
 var types = require('./types.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 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,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
 var HeaderCell = function HeaderCell(_ref) {
   var id = _ref.id,
     label = _ref.label,
     icon = _ref.icon,
     iconBg = _ref.iconBg,
     iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip;
-    _ref.actions;
+    rtlFlip = _ref.rtlFlip,
+    actions = _ref.actions;
     _ref.locked;
     var tooltip = _ref.tooltip,
     sortable = _ref.sortable,
@@ -76,15 +54,21 @@ var HeaderCell = function HeaderCell(_ref) {
         }
       }, "sort-desc"));
     }
+    if (sortable && actions) {
+      ret.push( /*#__PURE__*/jsxRuntime.jsx(core.Divider, {}));
+    }
+    if (actions) {
+      ret.push.apply(ret, _toConsumableArray(actions));
+    }
     return ret;
-  }, [sortable]);
+  }, [sortable, actions]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "none",
     "data-id": id,
     onClick: function onClick() {
       return handleSort();
     },
-    className: "group font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
+    className: "group/tool font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
     style: {
       width: width !== null && width !== void 0 ? width : types.COL_DEFAULT_WIDTH,
       minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : types.COL_MIN_WIDTH,

package/dist/cjs/table/Table.js

@@ -3,6 +3,7 @@
 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');
@@ -18,17 +19,21 @@ 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;
+  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,
@@ -43,17 +48,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 () {
@@ -153,13 +166,34 @@ var Table = function Table(_ref) {
         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 _groupRenderer;
           var index = _ref2.index,
             key = _ref2.key;
           var data = getData(index);
-          return /*#__PURE__*/jsxRuntime.jsx(BodyRow.BodyRow, {
+          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", isActiveSticky(index) && "sticky top-8 z-30"),
+            role: "none",
+            onClick: function onClick() {
+              return toggleGroupExpand(data.key);
+            },
+            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,
             index: index,
             checkableRows: checkableRows,

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) {
+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);
-        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) {
+        } else if (options.keyProperty) {
           state.checked = data.map(function (item) {
-            return item[keyProperty];
+            return item[options.keyProperty];
+          });
+        }
+        (_options$onCheckChang2 = options.onCheckChanged) === null || _options$onCheckChang2 === void 0 || _options$onCheckChang2.call(options, state.checked);
+      }
+      var checkList = 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 === "grouped") {
+        if (action.key) {
+          state.grouped = utilities.groupBy(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 = 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 === data.length ? 1 : state.checked.length ? 2 : 0
       });
     }, {
+      items: data,
+      grouped: {},
+      groups: [],
       checked: [],
       expanded: [],
       allChecked: 0
@@ -51,19 +85,72 @@ 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: "grouped",
+      key: options.groupProperty
+    });
+  }, [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",

package/dist/esm/table/HeaderCell.js

@@ -1,42 +1,20 @@
 'use client';
 
-import { MenuItem, CoreIcons, Tooltip, Icon, DropdownTool, Menu } from '@react-fabric/core';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { MenuItem, CoreIcons, Divider, Tooltip, Icon, DropdownTool, Menu } from '@react-fabric/core';
 import { useMemo, useCallback } from 'react';
 import { useTableContext } from './Context.js';
 import { COL_DEFAULT_WIDTH, COL_MIN_WIDTH, COL_MAX_WIDTH } from './types.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 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,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
 var HeaderCell = function HeaderCell(_ref) {
   var id = _ref.id,
     label = _ref.label,
     icon = _ref.icon,
     iconBg = _ref.iconBg,
     iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip;
-    _ref.actions;
+    rtlFlip = _ref.rtlFlip,
+    actions = _ref.actions;
     _ref.locked;
     var tooltip = _ref.tooltip,
     sortable = _ref.sortable,
@@ -76,15 +54,21 @@ var HeaderCell = function HeaderCell(_ref) {
         }
       }, "sort-desc"));
     }
+    if (sortable && actions) {
+      ret.push( /*#__PURE__*/jsx(Divider, {}));
+    }
+    if (actions) {
+      ret.push.apply(ret, _toConsumableArray(actions));
+    }
     return ret;
-  }, [sortable]);
+  }, [sortable, actions]);
   return /*#__PURE__*/jsxs("div", {
     role: "none",
     "data-id": id,
     onClick: function onClick() {
       return handleSort();
     },
-    className: "group font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
+    className: "group/tool font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
     style: {
       width: width !== null && width !== void 0 ? width : COL_DEFAULT_WIDTH,
       minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : COL_MIN_WIDTH,

package/dist/esm/table/Table.js

@@ -1,8 +1,9 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { useDebounce, Loading, EmptyContent } from '@react-fabric/core';
+import { useDebounce, Loading, Icon, CoreIcons, EmptyContent } from '@react-fabric/core';
 import { debounce } from '@react-fabric/utilities';
+import classNames from 'classnames';
 import { useRef, useMemo, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AddColumn } from './AddColumn.js';
@@ -18,17 +19,21 @@ import { jsx, jsxs } from '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;
+  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,
@@ -43,17 +48,25 @@ var Table = function Table(_ref) {
   var _useTableColumns = useTableColumns(columns),
     state = _useTableColumns.state,
     onHide = _useTableColumns.onHide;
-  var _useVirtualTable = useVirtualTable(data, keyProperty, fireCheckChanged),
+  var _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 = useRef(null);
   var wrapperStart = useMemo(function () {
@@ -153,13 +166,34 @@ var Table = function Table(_ref) {
         ref: refBody,
         children: [/*#__PURE__*/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__*/jsx(BodyRow, {
+          return "__GROUP__" in data ? /*#__PURE__*/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", isActiveSticky(index) && "sticky top-8 z-30"),
+            role: "none",
+            onClick: function onClick() {
+              return toggleGroupExpand(data.key);
+            },
+            children: [/*#__PURE__*/jsx(Icon, {
+              rtlFlip: true,
+              icon: data.open ? CoreIcons.chevronDown : CoreIcons.chevronRight
+            }), (_groupRenderer = groupRenderer === null || groupRenderer === void 0 ? void 0 : groupRenderer(data)) !== null && _groupRenderer !== void 0 ? _groupRenderer : /*#__PURE__*/jsxs("div", {
+              className: "flex gap-1 items-center",
+              children: [/*#__PURE__*/jsx("span", {
+                children: data.key
+              }), /*#__PURE__*/jsxs("span", {
+                className: "text-sm",
+                children: ["(", data.itemCount, ")"]
+              })]
+            })]
+          }, key) : /*#__PURE__*/jsx(BodyRow, {
             rowKey: key,
             index: index,
             checkableRows: checkableRows,

package/dist/esm/table/useVirtualTable.js

@@ -1,49 +1,83 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef, useReducer, useCallback } from 'react';
+import { groupBy, compareValues } from '@react-fabric/utilities';
+import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
+import { useReducer, useRef, useMemo, useState, useCallback, useEffect } from '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 = useRef(null);
-  var virtualizer = useVirtualizer({
-    count: data.length,
-    getScrollElement: function getScrollElement() {
-      return scrollerRef.current;
-    },
-    estimateSize: function estimateSize() {
-      return 24;
-    }
-  });
   var _useReducer = 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) {
+        } else if (options.keyProperty) {
           state.checked = data.map(function (item) {
-            return item[keyProperty];
+            return item[options.keyProperty];
+          });
+        }
+        (_options$onCheckChang2 = options.onCheckChanged) === null || _options$onCheckChang2 === void 0 || _options$onCheckChang2.call(options, state.checked);
+      }
+      var checkList = 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 === "grouped") {
+        if (action.key) {
+          state.grouped = groupBy(data, action.key);
+          state.groups = Object.keys(state.grouped).sort(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 = 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 === data.length ? 1 : state.checked.length ? 2 : 0
       });
     }, {
+      items: data,
+      grouped: {},
+      groups: [],
       checked: [],
       expanded: [],
       allChecked: 0
@@ -51,19 +85,72 @@ var useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
+  var activeStickyIndexRef = useRef(0);
+  var stickyIndexes = 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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasActiveSticky = _useState2[0],
+    setHasActiveSticky = _useState2[1];
+  var scrollerRef = useRef(null);
+  var virtualizer = useVirtualizer({
+    count: state.items.length,
+    getScrollElement: function getScrollElement() {
+      return scrollerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return 32;
+    },
+    rangeExtractor: 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(defaultRangeExtractor(range))));
+      return _toConsumableArray(next);
+    }, [stickyIndexes])
+  });
   var virtualItems = virtualizer.getVirtualItems();
   var getData = useCallback(function (index) {
-    return data[index];
-  }, [data]);
+    return state.items[index];
+  }, [state.items]);
+  useEffect(function () {
+    dispatch({
+      type: "grouped",
+      key: options.groupProperty
+    });
+  }, [options.groupProperty]);
+  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",

package/dist/types/table/Table.d.ts

@@ -1,2 +1,2 @@
 import { type TableProps } from "./types";
-export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ ref, data, columns, keyProperty, checkableRows, initialScroll, hideableColumns, sort, loading, emptyDisplay, canExpand, children, onSort, onScroll, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ ref, data, columns, keyProperty, groupProperty, checkableRows, initialScroll, hideableColumns, sort, loading, checked, emptyDisplay, groupRenderer, canExpand, children, onSort, onScroll, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/table/types.d.ts

@@ -7,7 +7,7 @@ export interface TableColumn<T = KeyValue> extends CssProp, IconProps, TestProps
     id: keyof T | string;
     label?: string;
     tooltip?: string;
-    actions?: ReactElement;
+    actions?: ReactElement[];
     align?: "start" | "center" | "end";
     locked?: "start" | "end";
     hidden?: boolean;
@@ -34,12 +34,15 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
     columns: Array<TableColumn<T>>;
     data: T[];
     keyProperty?: keyof T;
+    groupProperty?: keyof T;
+    groupRenderer?: (key: AnyObject) => ReactElement;
     emptyDisplay?: ReactElement;
     /**
      * checkable rows
      */
+    checked?: AnyObject[];
     checkableRows?: boolean;
-    onCheckedChanged?: (rows: Array<keyof T>) => void;
+    onCheckedChanged?: (rows: AnyObject[]) => void;
     /**
      * sorting
      */

package/dist/types/table/useVirtualTable.d.ts

@@ -1,18 +1,29 @@
 /// <reference types="react" />
-interface DataState {
-    expanded: Key[];
-    checked: Key[];
+interface DataState<T = KeyValue> {
+    items: T[];
+    grouped: KeyValue<T[]>;
+    groups: AnyObject[];
+    expanded: AnyObject[];
+    checked: AnyObject[];
     allChecked: 0 | 1 | 2;
 }
-export declare const useVirtualTable: (data: KeyValue[], keyProperty?: Key, onCheckChanged?: (checked: Key[]) => void) => {
+export declare const useVirtualTable: <T extends KeyValue<any> = KeyValue<any>>(data: T[], options: {
+    checked?: AnyObject[];
+    keyProperty: keyof T;
+    groupProperty?: keyof T;
+    onCheckChanged?: (checked: AnyObject[]) => void;
+}) => {
     scrollerRef: import("react").RefObject<HTMLDivElement>;
     items: import("@tanstack/virtual-core").VirtualItem<Element>[];
-    checkState: DataState;
-    getData: (index: number) => KeyValue<any>;
+    checkState: DataState<T>;
+    getData: (index: number) => T;
     virtualizer: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+    hasActiveSticky: boolean;
+    isActiveSticky: (index: number) => boolean;
     top: number | undefined;
     totalSize: () => number;
     measureElement: (node: Element | null | undefined) => void;
+    toggleGroupExpand: (key: Key) => void;
     toggleExpand: (key: Key) => void;
     toggleChecked: (key: Key) => void;
     toggleAllChecked: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.29",
+  "version": "1.0.0-beta.30",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.29",
-    "@react-fabric/date": "^1.0.0-beta.29",
-    "@react-fabric/form": "^1.0.0-beta.29",
-    "@react-fabric/utilities": "^1.0.0-beta.29",
+    "@react-fabric/core": "^1.0.0-beta.30",
+    "@react-fabric/date": "^1.0.0-beta.30",
+    "@react-fabric/form": "^1.0.0-beta.30",
+    "@react-fabric/utilities": "^1.0.0-beta.30",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -52,5 +52,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "1011b13034b9f8f28c292468aed602217496da4a"
+  "gitHead": "5b10298b7627c2e56bcccf18100b6d85a02c9b06"
 }

package/src/table/HeaderCell.tsx

@@ -23,6 +23,7 @@
 
 import {
   CoreIcons,
+  Divider,
   DropdownTool,
   Icon,
   Menu,
@@ -94,15 +95,21 @@ export const HeaderCell = ({
         />,
       );
     }
+    if (sortable && actions) {
+      ret.push(<Divider />);
+    }
+    if (actions) {
+      ret.push(...actions);
+    }
     return ret;
-  }, [sortable]);
+  }, [sortable, actions]);
 
   return (
     <div
       role="none"
       data-id={id}
       onClick={() => handleSort()}
-      className="group font-medium border-e flex flex-nowrap text-start items-center table-header-cell"
+      className="group/tool font-medium border-e flex flex-nowrap text-start items-center table-header-cell"
       style={{
         width: width ?? COL_DEFAULT_WIDTH,
         minWidth: minWidth ?? COL_MIN_WIDTH,

package/src/table/Table.tsx

@@ -21,8 +21,15 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { EmptyContent, Loading, useDebounce } from "@react-fabric/core";
+import {
+  CoreIcons,
+  EmptyContent,
+  Icon,
+  Loading,
+  useDebounce,
+} from "@react-fabric/core";
 import { debounce } from "@react-fabric/utilities";
+import classNames from "classnames";
 import {
   useEffect,
   useImperativeHandle,
@@ -45,13 +52,16 @@ export const Table = <T extends KeyValue = KeyValue>({
   ref,
   data,
   columns,
-  keyProperty,
+  keyProperty = "id",
+  groupProperty,
   checkableRows,
   initialScroll,
   hideableColumns,
   sort,
   loading,
+  checked,
   emptyDisplay,
+  groupRenderer,
   canExpand,
   children,
   onSort,
@@ -72,13 +82,21 @@ export const Table = <T extends KeyValue = KeyValue>({
     top,
     checkState,
     virtualizer,
+    hasActiveSticky,
     toggleExpand,
     toggleChecked,
     toggleAllChecked,
+    toggleGroupExpand,
     getData,
     totalSize,
+    isActiveSticky,
     measureElement,
-  } = useVirtualTable(data, keyProperty, fireCheckChanged);
+  } = useVirtualTable(data, {
+    checked,
+    keyProperty,
+    groupProperty,
+    onCheckChanged: fireCheckChanged,
+  });
   const refBody = useRef<HTMLDivElement>(null);
 
   const wrapperStart = useMemo(
@@ -184,10 +202,39 @@ export const Table = <T extends KeyValue = KeyValue>({
             style={{ height: totalSize() }}
             ref={refBody}
           >
-            <div style={{ height: items[0]?.start }} />
+            <div
+              style={{
+                height: items[hasActiveSticky ? 1 : 0]?.start,
+              }}
+            />
             {items.map(({ index, key }) => {
               const data = getData(index);
-              return (
+              return "__GROUP__" in data ? (
+                <div
+                  key={key}
+                  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",
+                    isActiveSticky(index) && "sticky top-8 z-30",
+                  )}
+                  role="none"
+                  onClick={() => toggleGroupExpand(data.key)}
+                >
+                  <Icon
+                    rtlFlip
+                    icon={
+                      data.open ? CoreIcons.chevronDown : CoreIcons.chevronRight
+                    }
+                  />
+                  {groupRenderer?.(data) ?? (
+                    <div className="flex gap-1 items-center">
+                      <span>{data.key}</span>
+                      <span className="text-sm">({data.itemCount})</span>
+                    </div>
+                  )}
+                </div>
+              ) : (
                 <BodyRow
                   rowKey={key}
                   index={index}

package/src/table/types.ts

@@ -41,7 +41,7 @@ export interface TableColumn<T = KeyValue>
   id: keyof T | string;
   label?: string;
   tooltip?: string;
-  actions?: ReactElement;
+  actions?: ReactElement[];
   align?: "start" | "center" | "end";
   locked?: "start" | "end";
   hidden?: boolean;
@@ -77,12 +77,16 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
   columns: Array<TableColumn<T>>;
   data: T[];
   keyProperty?: keyof T;
+  groupProperty?: keyof T;
+  groupRenderer?: (key: AnyObject) => ReactElement;
   emptyDisplay?: ReactElement;
+
   /**
    * checkable rows
    */
+  checked?: AnyObject[];
   checkableRows?: boolean;
-  onCheckedChanged?: (rows: Array<keyof T>) => void;
+  onCheckedChanged?: (rows: AnyObject[]) => void;
   /**
    * sorting
    */

package/src/table/useVirtualTable.ts

@@ -21,37 +21,55 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback, useReducer, useRef } from "react";
+import { compareValues, groupBy } from "@react-fabric/utilities";
+import {
+  defaultRangeExtractor,
+  type Range,
+  useVirtualizer,
+} from "@tanstack/react-virtual";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
 
-interface DataState {
-  expanded: Key[];
-  checked: Key[];
+interface DataState<T = KeyValue> {
+  items: T[];
+  grouped: KeyValue<T[]>;
+  groups: AnyObject[];
+  expanded: AnyObject[];
+  checked: AnyObject[];
   allChecked: 0 | 1 | 2;
 }
 
 type DataAction =
-  | { type: "expand"; key: Key }
-  | { type: "check"; key: Key }
+  | { type: "updateState"; checked: AnyObject[] }
+  | { type: "groupExpand"; key: AnyObject }
+  | { type: "grouped"; key: AnyObject }
+  | { type: "expand"; key: AnyObject }
+  | { type: "check"; key: AnyObject }
   | { type: "checkall" };
 
-export const useVirtualTable = (
-  data: KeyValue[],
-  keyProperty?: Key,
-  onCheckChanged?: (checked: Key[]) => void,
+export const useVirtualTable = <T extends KeyValue = KeyValue>(
+  data: T[],
+  options: {
+    checked?: AnyObject[];
+    keyProperty: keyof T;
+    groupProperty?: keyof T;
+    onCheckChanged?: (checked: AnyObject[]) => void;
+  },
 ) => {
   // 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}
 
-  const scrollerRef = useRef<HTMLDivElement>(null);
-  const virtualizer = useVirtualizer({
-    count: data.length,
-    getScrollElement: () => scrollerRef.current,
-    estimateSize: () => 24,
-  });
-
   const [state, dispatch] = useReducer(
-    (state: DataState, action: DataAction) => {
+    (state: DataState<T>, action: DataAction) => {
+      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);
@@ -61,51 +79,134 @@ export const useVirtualTable = (
         if (state.checked.includes(action.key))
           state.checked.splice(state.checked.indexOf(action.key), 1);
         else state.checked.push(action.key);
-        onCheckChanged?.(state.checked);
+        options.onCheckChanged?.(state.checked);
       }
       if (action.type === "checkall") {
         if (state.allChecked !== 0) {
           state.checked = [];
-        } else if (keyProperty) {
-          state.checked = data.map((item) => item[keyProperty]);
+        } else if (options.keyProperty) {
+          state.checked = data.map((item) => item[options.keyProperty]);
+        }
+        options.onCheckChanged?.(state.checked);
+      }
+      const checkList = data.filter((hit) =>
+        state.checked.includes(hit[options.keyProperty]),
+      );
+      if (action.type === "groupExpand") {
+        const group = state.groups.find((group) => group.key === action.key);
+        if (group) {
+          group.open = !group.open;
+          state.groups = state.groups.slice();
+          state.items = state.groups
+            .map((group) => [
+              group,
+              group.open ? state.grouped[group.key] : undefined,
+            ])
+            .flat(2)
+            .filter(Boolean) as any;
+        }
+      }
+      if (action.type === "grouped") {
+        if (action.key) {
+          state.grouped = groupBy<T>(data, action.key);
+          state.groups = Object.keys(state.grouped)
+            .sort(compareValues("asc"))
+            .map((group) => ({
+              __GROUP__: true,
+              open: true,
+              key: group,
+              items: state.grouped[group],
+              itemCount: state.grouped[group].length,
+            }));
+          state.items = state.groups
+            .map((group) => [group, ...state.grouped[group.key]])
+            .flat() as any;
+        } else {
+          state.items = data;
         }
-        onCheckChanged?.(state.checked);
       }
       return {
         ...state,
         allChecked:
-          state.checked.length === data.length
-            ? 1
-            : state.checked.length
-              ? 2
-              : 0,
-      } as DataState;
+          checkList.length === data.length ? 1 : state.checked.length ? 2 : 0,
+      } as DataState<T>;
     },
     {
+      items: data,
+      grouped: {},
+      groups: [],
       checked: [],
       expanded: [],
       allChecked: 0,
     },
   );
 
+  const activeStickyIndexRef = useRef(0);
+  const stickyIndexes = useMemo<number[]>(
+    () =>
+      state.items
+        .map((hit, idx) => ("__GROUP__" in hit ? idx : undefined))
+        .filter(Boolean) as number[],
+    [state.items],
+  );
+  const isActiveSticky = (index: number) =>
+    activeStickyIndexRef.current === index;
+
+  const [hasActiveSticky, setHasActiveSticky] = useState(false);
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: state.items.length,
+    getScrollElement: () => scrollerRef.current,
+    estimateSize: () => 32,
+    rangeExtractor: useCallback(
+      (range: Range) => {
+        activeStickyIndexRef.current =
+          [...stickyIndexes]
+            .reverse()
+            .find((index) => range.startIndex > index) ?? 0;
+
+        setHasActiveSticky(range.startIndex !== activeStickyIndexRef.current);
+
+        const next = new Set([
+          activeStickyIndexRef.current,
+          ...defaultRangeExtractor(range),
+        ]);
+
+        return [...next];
+      },
+      [stickyIndexes],
+    ),
+  });
+
   const virtualItems = virtualizer.getVirtualItems();
 
   const getData = useCallback(
     (index: number) => {
-      return data[index];
+      return state.items[index];
     },
-    [data],
+    [state.items],
   );
 
+  useEffect(() => {
+    dispatch({ type: "grouped", key: options.groupProperty });
+  }, [options.groupProperty]);
+
+  useEffect(() => {
+    dispatch({ type: "updateState", checked: options.checked ?? [] });
+  }, [options.checked]);
+
   return {
     scrollerRef,
     items: virtualItems,
     checkState: state,
     getData,
     virtualizer,
+    hasActiveSticky,
+    isActiveSticky,
     top: virtualizer.range?.startIndex,
     totalSize: virtualizer.getTotalSize,
     measureElement: virtualizer.measureElement,
+    toggleGroupExpand: (key: Key) => dispatch({ type: "groupExpand", key }),
     toggleExpand: (key: Key) => dispatch({ type: "expand", key }),
     toggleChecked: (key: Key) => dispatch({ type: "check", key }),
     toggleAllChecked: () => dispatch({ type: "checkall" }),