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

package/dist/cjs/virtual/Gallery.js

@@ -1,6 +1,8 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var reactVirtual = require('@tanstack/react-virtual');
@@ -10,6 +12,9 @@ var react = require('react');
 var Scroller = require('./Scroller.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+var _excluded = ["items", "children", "columns", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
+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 createItemList = memoizeOne(function (items) {
   return items;
 });
@@ -29,7 +34,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     loading = _ref.loading,
     onLoadMore = _ref.onLoadMore,
     onScroll = _ref.onScroll,
-    galleryRef = _ref.galleryRef;
+    galleryRef = _ref.galleryRef,
+    aria = _objectWithoutProperties(_ref, _excluded);
   var count = react.useDeferredValue(items.length);
   var extraSize = react.useMemo(function () {
     return onLoadMore ? 64 : 0;
@@ -163,10 +169,11 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
       }
     };
   }, [virtualizer, columnCount]);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict"),
+    className: classNames("area-content bg-base overflow-auto contain-strict")
+  }, aria), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full"),
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -220,7 +227,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
         })
       })]
     })
-  });
+  }));
 };
 _VirtualGallery.displayName = "VirtualGallery";
 var GenericMemo = react.memo;

package/dist/cjs/virtual/List.js

@@ -1,6 +1,8 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var reactVirtual = require('@tanstack/react-virtual');
@@ -10,6 +12,9 @@ var react = require('react');
 var Scroller = require('./Scroller.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+var _excluded = ["items", "children", "fullWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
+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 createItemList = memoizeOne(function (items) {
   return items;
 });
@@ -31,7 +36,8 @@ var _VirtualList = function _VirtualList(_ref) {
     loading = _ref.loading,
     onLoadMore = _ref.onLoadMore,
     onScroll = _ref.onScroll,
-    listRef = _ref.listRef;
+    listRef = _ref.listRef,
+    aria = _objectWithoutProperties(_ref, _excluded);
   var count = react.useDeferredValue(items.length);
   var extraSize = react.useMemo(function () {
     return onLoadMore ? 64 : 0;
@@ -154,10 +160,11 @@ var _VirtualList = function _VirtualList(_ref) {
       }
     };
   }, [virtualizer]);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict"),
+    className: classNames("area-content bg-base overflow-auto contain-strict")
+  }, aria), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -209,7 +216,7 @@ var _VirtualList = function _VirtualList(_ref) {
         })
       })]
     })
-  });
+  }));
 };
 _VirtualList.displayName = "VirtualList";
 var GenericMemo = react.memo;

package/dist/esm/checklist/CheckList.js

@@ -2,19 +2,20 @@
 
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { Icon, CoreIcons, Badge, EmptyContent } from '@react-fabric/core';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { EmptyContent, Icon, CoreIcons, Badge } from '@react-fabric/core';
 import { isString } from '@react-fabric/utilities';
-import { memo, Fragment, isValidElement, useState, useEffect, useMemo, createElement } from 'react';
+import { useState, useEffect, useMemo, createElement, Fragment, isValidElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelectableList } from '../hooks/useSelectableList.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["items", "maxCount", "allowNegative", "emptyMessage", "sortItems"];
+var _excluded = ["id", "allowNegative", "selected", "icon", "label", "isDisabled", "onClick", "badge"],
+  _excluded2 = ["items", "maxCount", "allowNegative", "emptyMessage", "sortItems", "selected", "nonselected", "onChange", "onClick"];
 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 CheckItem = /*#__PURE__*/memo(function (_ref) {
+var CheckItem = function CheckItem(_ref) {
   var id = _ref.id,
     allowNegative = _ref.allowNegative,
     selected = _ref.selected,
@@ -22,8 +23,9 @@ var CheckItem = /*#__PURE__*/memo(function (_ref) {
     label = _ref.label,
     isDisabled = _ref.isDisabled,
     _onClick = _ref.onClick,
-    badge = _ref.badge;
-  return /*#__PURE__*/jsxs("div", {
+    badge = _ref.badge,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     role: "none",
     className: "ax-checkList__item",
     "data-disabled": isDisabled,
@@ -32,7 +34,8 @@ var CheckItem = /*#__PURE__*/memo(function (_ref) {
     },
     onContextMenu: function onContextMenu(e) {
       return [allowNegative && _onClick(id, true), e.preventDefault()];
-    },
+    }
+  }, aria), {}, {
     children: [!allowNegative && /*#__PURE__*/jsx(Icon, {
       "data-type": "checkbox",
       className: "ax-checkList__checkbox",
@@ -67,9 +70,8 @@ var CheckItem = /*#__PURE__*/memo(function (_ref) {
     }), /*#__PURE__*/jsx("label", {
       children: label
     }), /*#__PURE__*/jsx(Badge, _objectSpread({}, badge))]
-  });
-});
-CheckItem.displayName = "CheckItem";
+  }));
+};
 var CheckList = function CheckList(_ref2) {
   var _ref2$items = _ref2.items,
     items = _ref2$items === void 0 ? [] : _ref2$items,
@@ -79,12 +81,20 @@ var CheckList = function CheckList(_ref2) {
     emptyMessage = _ref2.emptyMessage,
     _ref2$sortItems = _ref2.sortItems,
     sortItems = _ref2$sortItems === void 0 ? true : _ref2$sortItems,
-    props = _objectWithoutProperties(_ref2, _excluded);
+    selected = _ref2.selected,
+    nonselected = _ref2.nonselected,
+    onChange = _ref2.onChange,
+    onClick = _ref2.onClick,
+    aria = _objectWithoutProperties(_ref2, _excluded2);
   var _useTranslation = useTranslation("data"),
     t = _useTranslation.t;
-  var _useSelectableList = useSelectableList(_objectSpread({
-      items: items
-    }, props)),
+  var _useSelectableList = useSelectableList({
+      items: items,
+      selected: selected,
+      nonselected: nonselected,
+      onChange: onChange,
+      onClick: onClick
+    }),
     selection = _useSelectableList.selection,
     toggleSelection = _useSelectableList.toggleSelection;
   var _useState = useState(false),
@@ -105,8 +115,7 @@ var CheckList = function CheckList(_ref2) {
       return 0;
     }).slice(0, !showMore && maxCount > 0 ? maxCount : undefined);
   }, [items, selection, maxCount, showMore, sortItems]);
-  return /*#__PURE__*/jsxs("div", {
-    className: "ax-checkList",
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, aria), {}, {
     children: [listItems.map(function (item, index) {
       return /*#__PURE__*/createElement(CheckItem, _objectSpread(_objectSpread({}, item), {}, {
         key: index,
@@ -128,7 +137,7 @@ var CheckList = function CheckList(_ref2) {
       className: "text-sm",
       message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("checkList.empty")
     })]
-  });
+  }));
 };
 
 export { CheckList };

package/dist/esm/histogram/Histogram.js

@@ -1,6 +1,8 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { EmptyContent, Icon, ActionLabel, Button, CoreIcons } from '@react-fabric/core';
 import { compareValues, Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
@@ -9,6 +11,9 @@ import { useTranslation } from 'react-i18next';
 import classes from './Histogram.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var _excluded = ["items", "total", "color", "sortBy", "emptyTitle", "emptyMessage", "onClick"];
+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 emptyIcon = "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z";
 var Histogram = function Histogram(_ref) {
   var _ref$items = _ref.items,
@@ -20,7 +25,8 @@ var Histogram = function Histogram(_ref) {
     sortBy = _ref$sortBy === void 0 ? "count" : _ref$sortBy,
     emptyTitle = _ref.emptyTitle,
     emptyMessage = _ref.emptyMessage,
-    _onClick = _ref.onClick;
+    _onClick = _ref.onClick,
+    aria = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = useTranslation("data"),
     t = _useTranslation.t;
   var maxTotal = useMemo(function () {
@@ -32,8 +38,9 @@ var Histogram = function Histogram(_ref) {
   var sorted = useMemo(function () {
     return items.sort(compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
   }, [items, sortBy]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classes.histogram,
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    className: classes.histogram
+  }, aria), {}, {
     style: {
       "--color": "var(--".concat(color, ")")
     },
@@ -49,6 +56,7 @@ var Histogram = function Histogram(_ref) {
         role: "none",
         "data-disabled": item.count === 0 || item.disabled,
         className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", classes.histoLabel, (item.count === 0 || item.disabled) && "pointer-events-none"),
+        "data-testid": item.id,
         onClick: function onClick(e) {
           return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id), e.stopPropagation()];
         },
@@ -83,7 +91,7 @@ var Histogram = function Histogram(_ref) {
         })]
       }, item.id);
     })]
-  });
+  }));
 };
 
 export { Histogram };

package/dist/esm/table/BodyCell.js

@@ -1,5 +1,7 @@
 'use client';
 
+import { DateDisplay } from '@react-fabric/date';
+import { getByPath, isTrue, Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import { useTableContext } from './Context.js';
@@ -30,15 +32,45 @@ import { jsx } from 'react/jsx-runtime';
  */
 
 var BodyCell = function BodyCell(_ref) {
-  var _column$minWidth, _column$maxWidth, _column$renderer, _column$renderer2;
+  var _column$minWidth, _column$maxWidth;
   var column = _ref.column,
-    item = _ref.item;
+    item = _ref.item,
+    index = _ref.index;
   var _useTableContext = useTableContext(),
     widths = _useTableContext.widths;
   var width = useMemo(function () {
     var _widths$get;
     return (_widths$get = widths.get(column.id.toString())) !== null && _widths$get !== void 0 ? _widths$get : column.width;
   }, [widths, column]);
+  var content = useMemo(function () {
+    var value = getByPath(item, column.id.toString());
+    if (column.renderer != null) {
+      return column.renderer(item[column.id], item, index);
+    }
+    if (column.dataType === "boolean") {
+      var _column$valueMap;
+      var map = (_column$valueMap = column.valueMap) !== null && _column$valueMap !== void 0 ? _column$valueMap : {
+        "true": "Yes",
+        "false": "no"
+      };
+      return map["".concat(isTrue(value) ? "true" : "false")];
+    }
+    if (column.valueMap != null) {
+      if (column.dataType === "string" && value in column.valueMap) {
+        return column.valueMap[value];
+      }
+    }
+    if (column.dataType === "date") {
+      return /*#__PURE__*/jsx(DateDisplay, {
+        date: value,
+        format: column.format
+      });
+    }
+    if (column.dataType === "number") {
+      return Format.number(value, column.format);
+    }
+    return value !== null && value !== void 0 ? value : "";
+  }, [item, column]);
   return /*#__PURE__*/jsx("div", {
     className: "overflow-hidden bg-inherit start-0",
     style: {
@@ -48,7 +80,7 @@ var BodyCell = function BodyCell(_ref) {
     },
     children: /*#__PURE__*/jsx("div", {
       className: classNames("px-2 py-1 border-e truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
-      children: (_column$renderer = (_column$renderer2 = column.renderer) === null || _column$renderer2 === void 0 ? void 0 : _column$renderer2.call(column, item[column.id], item)) !== null && _column$renderer !== void 0 ? _column$renderer : item[column.id]
+      children: content
     })
   });
 };

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"),
+      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 items-center", !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/HeaderCell.js

@@ -38,7 +38,8 @@ var HeaderCell = function HeaderCell(_ref) {
     rtlFlip = _ref.rtlFlip;
     _ref.actions;
     _ref.locked;
-    var sortable = _ref.sortable,
+    var tooltip = _ref.tooltip,
+    sortable = _ref.sortable,
     resizable = _ref.resizable,
     _width = _ref.width,
     maxWidth = _ref.maxWidth,
@@ -82,8 +83,8 @@ var HeaderCell = function HeaderCell(_ref) {
       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, {