@react-fabric/data 1.0.0-beta.0

package/dist/cjs/json/JsonViewer.js

@@ -0,0 +1,246 @@
+'use strict';
+
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+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 jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["className", "json", "copy", "propertyScheme", "filters", "inline", "labelWidth", "formatter", "labeler", "onFilter", "emptyMessage", "showPropertyTree"];
+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 reduceObject = function reduceObject(json) {
+  var keys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
+  var ret = [];
+  Object.entries(json).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    if (utilities.isArray(value) && utilities.isObject(value[0])) {
+      ret.push.apply(ret, _toConsumableArray(reduceObject(value, [].concat(_toConsumableArray(keys), [key]), key)));
+    } else {
+      var obj = {
+        field: prefix ? "".concat(prefix, ".").concat(key) : key,
+        value: value,
+        path: [].concat(_toConsumableArray(keys), [key]).join(".")
+      };
+      if (utilities.isObject(value) && !utilities.isEmpty(value) && !("_score_" in value)) {
+        obj.children = reduceObject(value, [].concat(_toConsumableArray(keys), [key]));
+      }
+      ret.push(obj);
+    }
+  });
+  return ret.flat(99);
+};
+var JsonEntry = function JsonEntry(_ref3) {
+  var value = _ref3.value,
+    path = _ref3.path,
+    field = _ref3.field,
+    children = _ref3.children,
+    copy = _ref3.copy,
+    filters = _ref3.filters,
+    labeler = _ref3.labeler,
+    formatter = _ref3.formatter,
+    propertyScheme = _ref3.propertyScheme,
+    showPropertyTree = _ref3.showPropertyTree,
+    onFilter = _ref3.onFilter,
+    inline = _ref3.inline,
+    _ref3$labelWidth = _ref3.labelWidth,
+    labelWidth = _ref3$labelWidth === void 0 ? "30%" : _ref3$labelWidth,
+    _ref3$level = _ref3.level,
+    level = _ref3$level === void 0 ? 0 : _ref3$level;
+  var _useTranslation = reactI18next.useTranslation("data"),
+    t = _useTranslation.t;
+  var _useState = react.useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var canExpand = react.useMemo(function () {
+    return !!children;
+  }, [children]);
+  var actualValue = react.useMemo(function () {
+    var _ref4, _value$_label_;
+    return (_ref4 = (_value$_label_ = value === null || value === void 0 ? void 0 : value._label_) !== null && _value$_label_ !== void 0 ? _value$_label_ : value) !== null && _ref4 !== void 0 ? _ref4 : "";
+  }, [value]);
+  var display = react.useMemo(function () {
+    var _propertyScheme$date, _propertyScheme$time, _propertyScheme$numbe, _propertyScheme$bytes, _propertyScheme$perce, _propertyScheme$numbe2, _propertyScheme$boole, _ret;
+    if (children) return null;
+    if (utilities.isNil(value)) return /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "text-muted",
+      children: "null"
+    });
+    if (utilities.isEmpty(value)) return /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "text-muted",
+      children: "empty"
+    });
+    var ret = actualValue;
+    if (formatter) {
+      var formatted = formatter === null || formatter === void 0 ? void 0 : formatter(path, actualValue);
+      if (!utilities.isNil(formatted)) ret = formatted;
+    }
+    if (utilities.isArray(actualValue)) {
+      ret = "[".concat(actualValue.join(", "), "]");
+    }
+    if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$date = propertyScheme.date) !== null && _propertyScheme$date !== void 0 && _propertyScheme$date.includes(path)) ;
+    if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$time = propertyScheme.time) !== null && _propertyScheme$time !== void 0 && _propertyScheme$time.includes(path)) ret = utilities.Format.date(actualValue, "pp");
+    if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$numbe = propertyScheme.number) !== null && _propertyScheme$numbe !== void 0 && _propertyScheme$numbe.phone(path)) ret = utilities.Format.phone(actualValue);
+    if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$bytes = propertyScheme.bytes) !== null && _propertyScheme$bytes !== void 0 && _propertyScheme$bytes.includes(path)) ret = utilities.Format.bytes(actualValue);
+    if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$perce = propertyScheme.percent) !== null && _propertyScheme$perce !== void 0 && _propertyScheme$perce.includes(path)) ret = utilities.Format.percent(actualValue);
+    if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$numbe2 = propertyScheme.number) !== null && _propertyScheme$numbe2 !== void 0 && _propertyScheme$numbe2.includes(path)) ret = utilities.Format.number(actualValue);
+    if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$boole = propertyScheme["boolean"]) !== null && _propertyScheme$boole !== void 0 && _propertyScheme$boole.includes(path) || utilities.isBoolean(actualValue)) ret = actualValue ? t("json.true") : t("json.false");
+    if (((_ret = ret) === null || _ret === void 0 ? void 0 : _ret.length) > 128) {
+      ret = /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        clamp: 3,
+        children: ret
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+      children: [ret, utilities.isObject(value) && value._score_ > 0 && /*#__PURE__*/jsxRuntime.jsx(core.Meter, {
+        className: "text-xs",
+        value: value._score_
+      })]
+    });
+  }, [value, path, formatter, propertyScheme, actualValue]);
+  var pathWithoutOrdinal = react.useMemo(function () {
+    return path.replace(/\.\d*\./, ".");
+  }, [path]);
+  var canCopy = react.useMemo(function () {
+    var _copy$includes, _copy$includes2;
+    return !utilities.isEmpty(value) && (utilities.isTrue(copy) || (copy === null || copy === void 0 || (_copy$includes = copy.includes) === null || _copy$includes === void 0 ? void 0 : _copy$includes.call(copy, path)) || (copy === null || copy === void 0 || (_copy$includes2 = copy.includes) === null || _copy$includes2 === void 0 ? void 0 : _copy$includes2.call(copy, pathWithoutOrdinal)));
+  }, [copy, value, path, pathWithoutOrdinal]);
+  var canFilter = react.useMemo(function () {
+    var _filters$includes, _filters$includes2;
+    return utilities.isTrue(filters) || (filters === null || filters === void 0 || (_filters$includes = filters.includes) === null || _filters$includes === void 0 ? void 0 : _filters$includes.call(filters, path)) || (filters === null || filters === void 0 || (_filters$includes2 = filters.includes) === null || _filters$includes2 === void 0 ? void 0 : _filters$includes2.call(filters, pathWithoutOrdinal));
+  }, [filters, path, pathWithoutOrdinal]);
+  var labelDisplay = react.useMemo(function () {
+    var _labeler;
+    return /*#__PURE__*/jsxRuntime.jsx(core.ActionLabel, {
+      className: "text-dimmed text-sm px-2 flex-1 truncate",
+      actions: !canExpand && canFilter ? [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        color: "danger",
+        size: "sm",
+        variant: "link",
+        icon: core.CoreIcons.funnelMinus,
+        "aria-label": "Filter Negative",
+        onClick: function onClick() {
+          return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
+        }
+      }, "negative"), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        color: "primary",
+        size: "sm",
+        variant: "link",
+        icon: core.CoreIcons.funnelPlus,
+        "aria-label": "Filter",
+        onClick: function onClick() {
+          return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue);
+        }
+      }, "positive")] : [],
+      children: (_labeler = labeler === null || labeler === void 0 ? void 0 : labeler(path)) !== null && _labeler !== void 0 ? _labeler : field
+    });
+  }, [field, labeler, pathWithoutOrdinal, actualValue, canExpand, canFilter]);
+  return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+    children: [showPropertyTree && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classNames("py-2", inline && "flex flex-nowrap items-center"),
+      style: {
+        paddingInlineStart: level * 8
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        role: "none",
+        className: classNames("flex overflow-hidden items-center", inline && "flex-content"),
+        style: {
+          flexBasis: labelWidth
+        },
+        onClick: function onClick() {
+          return canExpand && setExpanded(!expanded);
+        },
+        children: [canExpand && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+          rtlFlip: true,
+          icon: expanded ? core.CoreIcons.chevronDown : core.CoreIcons.chevronRight
+        }), labelDisplay]
+      }), display && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classNames("px-2", inline && "flex-1"),
+        children: [canCopy && /*#__PURE__*/jsxRuntime.jsx(core.Copy, {
+          size: "xs",
+          text: actualValue
+        }), display]
+      })]
+    }), !showPropertyTree && !children && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classNames("py-2", inline && "flex flex-nowrap items-center"),
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        role: "none",
+        className: classNames("flex overflow-hidden items-center", inline && "flex-content"),
+        style: {
+          flexBasis: labelWidth
+        },
+        children: labelDisplay
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classNames("px-2", inline && "flex-1"),
+        children: [canCopy && /*#__PURE__*/jsxRuntime.jsx(core.Copy, {
+          size: "xs",
+          text: value
+        }), display]
+      })]
+    }), expanded && (children === null || children === void 0 ? void 0 : children.map(function (item) {
+      return /*#__PURE__*/jsxRuntime.jsx(JsonEntry, _objectSpread(_objectSpread({}, item), {}, {
+        level: level + 1,
+        copy: copy,
+        inline: inline,
+        showPropertyTree: showPropertyTree,
+        propertyScheme: propertyScheme,
+        filters: filters,
+        labelWidth: labelWidth,
+        formatter: formatter,
+        labeler: labeler,
+        onFilter: onFilter
+      }), item.path);
+    }))]
+  });
+};
+var JsonViewer = function JsonViewer(_ref5) {
+  var className = _ref5.className,
+    json = _ref5.json,
+    copy = _ref5.copy,
+    propertyScheme = _ref5.propertyScheme,
+    filters = _ref5.filters,
+    inline = _ref5.inline,
+    labelWidth = _ref5.labelWidth,
+    formatter = _ref5.formatter,
+    labeler = _ref5.labeler,
+    onFilter = _ref5.onFilter,
+    emptyMessage = _ref5.emptyMessage,
+    _ref5$showPropertyTre = _ref5.showPropertyTree,
+    showPropertyTree = _ref5$showPropertyTre === void 0 ? true : _ref5$showPropertyTre,
+    rest = _objectWithoutProperties(_ref5, _excluded);
+  var _useTranslation2 = reactI18next.useTranslation("data"),
+    t = _useTranslation2.t;
+  var list = react.useMemo(function () {
+    return reduceObject(json);
+  }, [json]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
+    className: classNames(className, "p-4 bg-alternate"),
+    children: !utilities.isEmpty(json) ? list.map(function (item) {
+      return /*#__PURE__*/jsxRuntime.jsx(JsonEntry, _objectSpread(_objectSpread({}, item), {}, {
+        copy: copy,
+        inline: inline,
+        showPropertyTree: showPropertyTree,
+        propertyScheme: propertyScheme,
+        filters: filters,
+        labelWidth: labelWidth,
+        formatter: formatter,
+        labeler: labeler,
+        onFilter: onFilter
+      }), item.path);
+    }) : /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
+      size: "sm",
+      message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("json.empty")
+    })
+  }));
+};
+
+exports.JsonViewer = JsonViewer;

package/dist/cjs/pagination/Pagination.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var classNames = require('classnames');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Pagination = /*#__PURE__*/react.memo(function (_ref) {
+  var page = _ref.page,
+    ranges = _ref.ranges,
+    totalPages = _ref.totalPages,
+    minimal = _ref.minimal,
+    onPageChange = _ref.onPageChange;
+  var _ranges = _slicedToArray(ranges, 3),
+    start = _ranges[0],
+    mid = _ranges[1],
+    last = _ranges[2];
+  var pageBody = react.useMemo(function () {
+    return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+      children: [start === null || start === void 0 ? void 0 : start.map(function (pg) {
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          onClick: function onClick() {
+            return onPageChange(pg);
+          },
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          children: pg + 1
+        }, pg);
+      }), mid && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "leading-none inline-block w-8 text-center text-dimmed",
+        children: "..."
+      }), mid === null || mid === void 0 ? void 0 : mid.map(function (pg) {
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          onClick: function onClick() {
+            return onPageChange(pg);
+          },
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          children: pg + 1
+        }, pg);
+      }), last && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "leading-none inline-block w-8 text-center text-dimmed",
+        children: "..."
+      }), last === null || last === void 0 ? void 0 : last.map(function (pg) {
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          onClick: function onClick() {
+            return onPageChange(pg);
+          },
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          children: pg + 1
+        }, pg);
+      })]
+    });
+  }, [start, mid, last, page]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "inline-flex items-center",
+    children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: function onClick() {
+        return onPageChange(0);
+      },
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === 0 && "pointer-events-none text-tint-300"),
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        icon: core.CoreIcons.chevronsLeft,
+        rtlFlip: true
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: function onClick() {
+        return onPageChange(page - 1);
+      },
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === 0 && "pointer-events-none text-tint-300"),
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        icon: core.CoreIcons.chevronLeft,
+        rtlFlip: true
+      })
+    }), !minimal && pageBody, minimal && /*#__PURE__*/jsxRuntime.jsxs("label", {
+      className: "leading-none inline-block px-1 text-center text-sm select-none fixed-numbers",
+      children: [page + 1, "/", totalPages]
+    }), /*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: function onClick() {
+        return onPageChange(page + 1);
+      },
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        icon: core.CoreIcons.chevronRight,
+        rtlFlip: true
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: function onClick() {
+        return onPageChange(totalPages - 1);
+      },
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        icon: core.CoreIcons.chevronsRight,
+        rtlFlip: true
+      })
+    })]
+  });
+});
+Pagination.displayName = "Pagination";
+
+exports.Pagination = Pagination;

package/dist/cjs/table/BodyCell.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var classNames = require('classnames');
+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 BodyCell = function BodyCell(_ref) {
+  var _column$width, _column$minWidth, _column$maxWidth, _column$renderer, _column$renderer2;
+  var column = _ref.column,
+    item = _ref.item;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "overflow-hidden bg-inherit start-0",
+    style: {
+      width: (_column$width = column.width) !== null && _column$width !== void 0 ? _column$width : "12rem",
+      minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : "2rem",
+      maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : "32rem"
+    },
+    children: /*#__PURE__*/jsxRuntime.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]
+    })
+  });
+};
+
+exports.BodyCell = BodyCell;

package/dist/cjs/table/HeaderCell.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var core = require('@react-fabric/core');
+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 label = _ref.label,
+    icon = _ref.icon,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    rtlFlip = _ref.rtlFlip;
+    _ref.actions;
+    _ref.locked;
+    var resizable = _ref.resizable,
+    width = _ref.width,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "group font-medium border-e flex flex-nowrap text-start items-center",
+    style: {
+      width: width !== null && width !== void 0 ? width : "12rem",
+      minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : "2rem",
+      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : "32rem"
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-1 px-2 py-1 text-sm truncate sticky start-0",
+      children: [icon && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        icon: icon,
+        bg: iconBg,
+        color: iconColor,
+        rtlFlip: rtlFlip
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: label !== null && label !== void 0 ? label : " "
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs(core.Dropdown, {
+      placement: "bottom-start",
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        icon: core.CoreIcons.caretDown,
+        className: "outline bg-base me-0.5 flex-content hidden group-hover:inline-block data-[dropdown-open]:inline-block"
+      }), /*#__PURE__*/jsxRuntime.jsxs(core.Menu, {
+        className: "text-sm",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+          label: "Sort ascending",
+          icon: core.CoreIcons.sortAsc
+        }), /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+          label: "Sort descending",
+          icon: core.CoreIcons.sortDesc
+        })]
+      })]
+    }), resizable && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch"
+    })]
+  });
+};
+
+exports.HeaderCell = HeaderCell;

package/dist/cjs/table/Table.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var react = require('react');
+var BodyCell = require('./BodyCell.js');
+var HeaderCell = require('./HeaderCell.js');
+var useTableColumns = require('./useTableColumns.js');
+var useVirtualTable = require('./useVirtualTable.js');
+var classNames = require('classnames');
+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 _columnMap$start, _columnMap$cols, _columnMap$end, _items$, _columnMap$start3, _columnMap$cols3, _columnMap$end3, _columnMap$start4, _columnMap$cols4, _columnMap$end4;
+  var data = _ref.data,
+    columns = _ref.columns;
+  var _useTableColumns = useTableColumns.useTableColumns(columns),
+    columnMap = _useTableColumns.columnMap;
+  var _useVirtualTable = useVirtualTable.useVirtualTable(data),
+    scrollerRef = _useVirtualTable.scrollerRef,
+    items = _useVirtualTable.items,
+    getData = _useVirtualTable.getData,
+    totalSize = _useVirtualTable.totalSize,
+    measureElement = _useVirtualTable.measureElement;
+  var wrapperStart = react.useMemo(function () {
+    return "bg-inherit sticky start-0 flex flex-nowrap z-1";
+  }, []);
+  var wrapperEnd = react.useMemo(function () {
+    return "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px";
+  }, []);
+  var emptyCol = react.useCallback(function (col, idc) {
+    var _col$width, _col$minWidth, _col$maxWidth;
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "overflow-hidden border-e",
+      style: {
+        width: (_col$width = col.width) !== null && _col$width !== void 0 ? _col$width : "12rem",
+        minWidth: (_col$minWidth = col.minWidth) !== null && _col$minWidth !== void 0 ? _col$minWidth : "2rem",
+        maxWidth: (_col$maxWidth = col.maxWidth) !== null && _col$maxWidth !== void 0 ? _col$maxWidth : "32rem"
+      }
+    }, "blank:".concat(idc));
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "grid area-content overflow-auto relative",
+    style: {
+      gridTemplate: "\"head\" auto \"content\" 1fr \"foot\" auto/1fr"
+    },
+    ref: scrollerRef,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: wrapperStart,
+        children: (_columnMap$start = columnMap.start) === null || _columnMap$start === void 0 ? void 0 : _columnMap$start.map(function (col, idx) {
+          return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread({}, col), idx);
+        })
+      }), (_columnMap$cols = columnMap.cols) === null || _columnMap$cols === void 0 ? void 0 : _columnMap$cols.map(function (col, idx) {
+        return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread({}, col), idx);
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: wrapperEnd,
+        children: (_columnMap$end = columnMap.end) === null || _columnMap$end === void 0 ? void 0 : _columnMap$end.map(function (col, idx) {
+          return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread({}, col), idx);
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "area-content flex flex-col flex-nowrap",
+      style: {
+        height: totalSize()
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          height: (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.start
+        }
+      }), items.map(function (_ref2) {
+        var _columnMap$start2, _columnMap$cols2, _columnMap$end2;
+        var index = _ref2.index,
+          key = _ref2.key;
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: classNames("flex flex-nowrap", index % 2 ? "bg-even" : "bg-odd"),
+          "data-index": index,
+          ref: measureElement,
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: wrapperStart,
+            children: (_columnMap$start2 = columnMap.start) === null || _columnMap$start2 === void 0 ? void 0 : _columnMap$start2.map(function (col, ids) {
+              return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
+                column: col,
+                item: getData(index)
+              }, "".concat(key, ":").concat(ids));
+            })
+          }), (_columnMap$cols2 = columnMap.cols) === null || _columnMap$cols2 === void 0 ? void 0 : _columnMap$cols2.map(function (col, idc) {
+            return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
+              column: col,
+              item: getData(index)
+            }, "".concat(key, ":").concat(idc));
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: wrapperEnd,
+            children: (_columnMap$end2 = columnMap.end) === null || _columnMap$end2 === void 0 ? void 0 : _columnMap$end2.map(function (col, ide) {
+              return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
+                column: col,
+                item: getData(index)
+              }, "".concat(key, ":").concat(ide));
+            })
+          })]
+        }, key);
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-1 flex flex-nowrap",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: wrapperStart,
+          children: (_columnMap$start3 = columnMap.start) === null || _columnMap$start3 === void 0 ? void 0 : _columnMap$start3.map(emptyCol)
+        }), (_columnMap$cols3 = columnMap.cols) === null || _columnMap$cols3 === void 0 ? void 0 : _columnMap$cols3.map(emptyCol), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: wrapperEnd,
+          children: (_columnMap$end3 = columnMap.end) === null || _columnMap$end3 === void 0 ? void 0 : _columnMap$end3.map(emptyCol)
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "area-foot bg-dimmed border-t sticky bottom-0 flex flex-nowrap z-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: wrapperStart,
+        children: (_columnMap$start4 = columnMap.start) === null || _columnMap$start4 === void 0 ? void 0 : _columnMap$start4.map(function (col, idx) {
+          return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread({}, col), idx);
+        })
+      }), (_columnMap$cols4 = columnMap.cols) === null || _columnMap$cols4 === void 0 ? void 0 : _columnMap$cols4.map(function (col, idx) {
+        return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread({}, col), idx);
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: wrapperEnd,
+        children: (_columnMap$end4 = columnMap.end) === null || _columnMap$end4 === void 0 ? void 0 : _columnMap$end4.map(function (col, idx) {
+          return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread({}, col), idx);
+        })
+      })]
+    })]
+  });
+};
+
+exports.Table = Table;

package/dist/cjs/table/useTableColumns.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+
+var useTableColumns = function useTableColumns(columns) {
+  var _useState = react.useState({
+      start: [],
+      end: [],
+      cols: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    columnMap = _useState2[0],
+    setColumnMap = _useState2[1];
+  react.useEffect(function () {
+    setColumnMap(utilities.groupBy(columns.filter(function (col) {
+      return !(col.hideable && col.hidden);
+    }), "locked", "cols"));
+  }, [columns]);
+  return {
+    columnMap: columnMap
+  };
+};
+
+exports.useTableColumns = useTableColumns;