@react-fabric/data 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/esm/table/BodyRow.js

@@ -0,0 +1,107 @@
+'use client';
+
+import classNames from 'classnames';
+import { BodyCell } from './BodyCell.js';
+import { CheckboxCell } from './CheckboxCell.js';
+import { Icon, CoreIcons } from '@react-fabric/core';
+import { jsxs, jsx } 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 BodyRow = function BodyRow(_ref) {
+  var _state$start, _state$cols, _state$end;
+  var rowKey = _ref.rowKey,
+    index = _ref.index,
+    data = _ref.data,
+    keyProperty = _ref.keyProperty,
+    measureElement = _ref.measureElement,
+    state = _ref.state,
+    hideableColumns = _ref.hideableColumns,
+    wrapperStart = _ref.wrapperStart,
+    wrapperEnd = _ref.wrapperEnd,
+    onRowClick = _ref.onRowClick,
+    checkableRows = _ref.checkableRows,
+    checked = _ref.checked,
+    toggleChecked = _ref.toggleChecked,
+    canExpand = _ref.canExpand,
+    expanded = _ref.expanded,
+    toggleExpand = _ref.toggleExpand,
+    expandRow = _ref.expandRow;
+  return /*#__PURE__*/jsxs("div", {
+    ref: measureElement,
+    "data-index": index,
+    className: index % 2 ? "bg-even" : "bg-odd",
+    children: [/*#__PURE__*/jsxs("div", {
+      role: "none",
+      "data-row": index,
+      className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500", onRowClick && "hover:bg-primary-50 active:bg-primary-100", index % 2 ? "bg-even" : "bg-odd"),
+      onClick: function onClick() {
+        return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        className: wrapperStart,
+        children: [!!canExpand && /*#__PURE__*/jsx("div", {
+          className: classNames("group font-medium w-6 flex flex-nowrap text-start py-1", !canExpand(data) && "pointer-events-none opacity-35"),
+          children: /*#__PURE__*/jsx(Icon, {
+            className: "p-1 text-tint-700 hover:text-primary-600",
+            icon: expanded ? CoreIcons.collapse : CoreIcons.expand,
+            onClick: function onClick(e) {
+              return [keyProperty && toggleExpand(data[keyProperty]), e.stopPropagation()];
+            }
+          })
+        }), checkableRows && keyProperty && /*#__PURE__*/jsx(CheckboxCell, {
+          onClick: function onClick() {
+            return toggleChecked(data[keyProperty]);
+          },
+          state: checked
+        }), (_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.map(function (col, ids) {
+          return /*#__PURE__*/jsx(BodyCell, {
+            column: col,
+            item: data,
+            index: ids
+          }, "".concat(String(rowKey), ":").concat(ids));
+        })]
+      }), (_state$cols = state.cols) === null || _state$cols === void 0 ? void 0 : _state$cols.map(function (col, idc) {
+        return /*#__PURE__*/jsx(BodyCell, {
+          column: col,
+          item: data,
+          index: idc
+        }, "".concat(String(rowKey), ":").concat(idc));
+      }), /*#__PURE__*/jsxs("div", {
+        className: wrapperEnd,
+        children: [(_state$end = state.end) === null || _state$end === void 0 ? void 0 : _state$end.map(function (col, ide) {
+          return /*#__PURE__*/jsx(BodyCell, {
+            column: col,
+            item: data,
+            index: ide
+          }, "".concat(String(rowKey), ":").concat(ide));
+        }), hideableColumns && /*#__PURE__*/jsx("div", {
+          className: "w-6"
+        })]
+      })]
+    }), expanded && expandRow(data)]
+  });
+};
+
+export { BodyRow };

package/dist/esm/table/CheckboxCell.js

@@ -30,7 +30,7 @@ var CheckboxCell = function CheckboxCell(_ref) {
   var state = _ref.state,
     _onClick = _ref.onClick;
   return /*#__PURE__*/jsx("div", {
-    className: "group font-medium border-e w-6 flex flex-nowrap text-start items-center",
+    className: "group font-medium border-e w-6 flex flex-nowrap text-start py-1",
     children: /*#__PURE__*/jsx(Icon, {
       icon: state === 2 ? CoreIcons.checkboxInt : state === 1 ? CoreIcons.checkboxOn : CoreIcons.checkboxOff,
       className: "p-1 text-tint-700 hover:text-primary-600",

package/dist/esm/table/HeaderCell.js

@@ -1,44 +1,23 @@
 '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 sortable = _ref.sortable,
+    var tooltip = _ref.tooltip,
+    sortable = _ref.sortable,
     resizable = _ref.resizable,
     _width = _ref.width,
     maxWidth = _ref.maxWidth,
@@ -52,38 +31,52 @@ var HeaderCell = function HeaderCell(_ref) {
     var _widths$get;
     return (_widths$get = widths.get(id.toString())) !== null && _widths$get !== void 0 ? _widths$get : _width;
   }, [widths, _width, id]);
-  var handleSort = useCallback(function () {
+  var handleSort = useCallback(function (order) {
     sortable && (onSort === null || onSort === void 0 ? void 0 : onSort({
       id: id.toString(),
-      order: (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
+      order: order !== null && order !== void 0 ? order : (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
     }));
-  }, [onSort, name, sort, sortable]);
+  }, [onSort, sort, sortable]);
   var menus = useMemo(function () {
     var ret = [];
     if (sortable) {
       ret.push( /*#__PURE__*/jsx(MenuItem, {
         label: "Sort ascending",
-        icon: CoreIcons.sortAsc
+        icon: CoreIcons.sortAsc,
+        onClick: function onClick() {
+          return handleSort("asc");
+        }
       }, "sort-asc"), /*#__PURE__*/jsx(MenuItem, {
         label: "Sort descending",
-        icon: CoreIcons.sortDesc
+        icon: CoreIcons.sortDesc,
+        onClick: function onClick() {
+          return handleSort("desc");
+        }
       }, "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: handleSort,
-    className: "group font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
+    onClick: function onClick() {
+      return handleSort();
+    },
+    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,
       maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : COL_MAX_WIDTH
     },
     children: [/*#__PURE__*/jsx(Tooltip, {
-      content: label,
-      disabled: !label,
+      content: tooltip !== null && tooltip !== void 0 ? tooltip : label,
+      disabled: !(tooltip !== null && tooltip !== void 0 ? tooltip : label),
       children: /*#__PURE__*/jsxs("div", {
         className: "flex-initial px-2 py-1 text-sm truncate sticky start-0",
         children: [icon && /*#__PURE__*/jsx(Icon, {

package/dist/esm/table/Table.js

@@ -1,12 +1,13 @@
 '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, useImperativeHandle } from 'react';
+import { useRef, useMemo, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AddColumn } from './AddColumn.js';
-import { BodyCell } from './BodyCell.js';
+import { BodyRow } from './BodyRow.js';
 import { CheckboxCell } from './CheckboxCell.js';
 import { TableProvider } from './Context.js';
 import { EmptyCell } from './EmptyCell.js';
@@ -18,16 +19,25 @@ 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$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,
+    onScroll = _ref.onScroll,
     onRowClick = _ref.onRowClick,
     onCheckedChanged = _ref.onCheckedChanged;
   var _useTranslation = useTranslation("data"),
@@ -38,14 +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 () {
@@ -54,47 +75,62 @@ var Table = function Table(_ref) {
   var wrapperEnd = useMemo(function () {
     return "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px";
   }, []);
+  useLayoutEffect(function () {
+    setTimeout(function () {
+      initialScroll && virtualizer.scrollToIndex(initialScroll, {
+        align: "start"
+      });
+    }, 100);
+  }, []);
   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");
       }
     };
   }, []);
+  useEffect(function () {
+    var handle = 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__*/jsx(TableProvider, {
     children: /*#__PURE__*/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__*/jsxs("div", {
+        "data-ref": "tableHeader",
         className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
         children: [/*#__PURE__*/jsxs("div", {
           className: wrapperStart,
-          children: [checkableRows && /*#__PURE__*/jsx(CheckboxCell, {
+          children: [canExpand && /*#__PURE__*/jsx("div", {
+            className: "w-6"
+          }), checkableRows && /*#__PURE__*/jsx(CheckboxCell, {
             state: checkState.allChecked,
             onClick: toggleAllChecked
           }), (_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.map(function (col, idx) {
@@ -130,77 +166,79 @@ 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 _state$start2, _state$cols2, _state$end2;
+          var _groupRenderer;
           var index = _ref2.index,
             key = _ref2.key;
           var data = getData(index);
-          return /*#__PURE__*/jsxs("div", {
+          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",
-            "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 && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
+              return toggleGroupExpand(data.key);
             },
-            "data-index": index,
-            ref: measureElement,
-            children: [/*#__PURE__*/jsxs("div", {
-              className: wrapperStart,
-              children: [checkableRows && /*#__PURE__*/jsx(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__*/jsx(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__*/jsx(BodyCell, {
-                column: col,
-                item: data
-              }, "".concat(key, ":").concat(idc));
-            }), /*#__PURE__*/jsxs("div", {
-              className: wrapperEnd,
-              children: [(_state$end2 = state.end) === null || _state$end2 === void 0 ? void 0 : _state$end2.map(function (col, ide) {
-                return /*#__PURE__*/jsx(BodyCell, {
-                  column: col,
-                  item: data
-                }, "".concat(key, ":").concat(ide));
-              }), hideableColumns && /*#__PURE__*/jsx("div", {
-                className: "w-6"
+            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,
+            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__*/jsxs("div", {
           className: "flex-1 flex flex-nowrap",
           children: [/*#__PURE__*/jsxs("div", {
             className: wrapperStart,
-            children: [checkableRows && /*#__PURE__*/jsx("div", {
+            children: [canExpand && /*#__PURE__*/jsx("div", {
+              className: "w-6"
+            }), checkableRows && /*#__PURE__*/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__*/jsx(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__*/jsx(EmptyCell, _objectSpread({}, col), String(col.id));
           }), /*#__PURE__*/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__*/jsx(EmptyCell, _objectSpread({}, col), String(col.id));
             }), hideableColumns && /*#__PURE__*/jsx("div", {
               className: "w-6"
             })]
           })]
         })]
-      }), !loading && data.length === 0 && /*#__PURE__*/jsx(EmptyContent, {
+      }), !loading && data.length === 0 && (emptyDisplay !== null && emptyDisplay !== void 0 ? emptyDisplay : /*#__PURE__*/jsx(EmptyContent, {
         size: "sm",
         className: "bg-dimmed",
         message: t("datagrid.empty")
-      })]
+      }))]
     })
   });
 };

package/dist/esm/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");