@react-fabric/data 1.0.0-beta.6 → 1.0.0-beta.61

package/dist/esm/table/BodyCell.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { DateDisplay } from '@react-fabric/date';
-import { getByPath, isTrue, Format } from '@react-fabric/utilities';
+import { getByPath, isTrue, Format, isObject, isArray } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import { useTableContext } from './Context.js';
@@ -43,24 +43,26 @@ var BodyCell = function BodyCell(_ref) {
     return (_widths$get = widths.get(column.id.toString())) !== null && _widths$get !== void 0 ? _widths$get : column.width;
   }, [widths, column]);
   var content = useMemo(function () {
+    var _column$dataType2;
     var value = getByPath(item, column.id.toString());
     if (column.renderer != null) {
-      return column.renderer(item[column.id], item, index);
+      return column.renderer(value, 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"
+        "false": "No"
       };
       return map["".concat(isTrue(value) ? "true" : "false")];
     }
     if (column.valueMap != null) {
-      if (column.dataType === "string" && value in column.valueMap) {
+      var _column$dataType;
+      if (["number", "string"].includes((_column$dataType = column.dataType) !== null && _column$dataType !== void 0 ? _column$dataType : "string") && value in column.valueMap) {
         return column.valueMap[value];
       }
     }
-    if (column.dataType === "date") {
+    if (["date", "time", "datetime"].includes((_column$dataType2 = column.dataType) !== null && _column$dataType2 !== void 0 ? _column$dataType2 : "")) {
       return /*#__PURE__*/jsx(DateDisplay, {
         date: value,
         format: column.format
@@ -69,17 +71,23 @@ var BodyCell = function BodyCell(_ref) {
     if (column.dataType === "number") {
       return Format.number(value, column.format);
     }
+    if (isObject(value)) {
+      return JSON.stringify(value);
+    }
+    if (isArray(value)) {
+      return value.join(", ");
+    }
     return value !== null && value !== void 0 ? value : "";
   }, [item, column]);
   return /*#__PURE__*/jsx("div", {
-    className: "overflow-hidden bg-inherit start-0",
+    className: "overflow-hidden bg-inherit start-0 border-e group/table-col",
     style: {
       width: width !== null && width !== void 0 ? width : COL_DEFAULT_WIDTH,
       minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : COL_MIN_WIDTH,
       maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : COL_MAX_WIDTH
     },
     children: /*#__PURE__*/jsx("div", {
-      className: classNames("px-2 py-1 border-e truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
+      className: classNames("px-2 py-1", column.className, column.truncate && "truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
       children: content
     })
   });

package/dist/esm/table/BodyRow.js

@@ -1,9 +1,9 @@
 'use client';
 
+import { Icon } from '@react-fabric/core';
 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';
 
 /*
@@ -55,17 +55,17 @@ var BodyRow = function BodyRow(_ref) {
     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"),
+      className: classNames("flex flex-nowrap datatable-row data-hilight:outline-1 -outline-offset-1 outline-primary-500 group/table-row", 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 items-center", !canExpand(data) && "pointer-events-none opacity-35"),
+          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,
+            icon: expanded ? "icon-[mdi--minus-box]" : "icon-[mdi--plus-box]",
             onClick: function onClick(e) {
               return [keyProperty && toggleExpand(data[keyProperty]), e.stopPropagation()];
             }

package/dist/esm/table/CheckboxCell.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon, CoreIcons } from '@react-fabric/core';
+import { Icon } from '@react-fabric/core';
 import { jsx } from 'react/jsx-runtime';
 
 /*
@@ -30,9 +30,9 @@ 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,
+      icon: state === 2 ? "icon-[mdi--checkbox-intermediate]" : state === 1 ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]",
       className: "p-1 text-tint-700 hover:text-primary-600",
       onClick: function onClick(e) {
         return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(), e.stopPropagation()];

package/dist/esm/table/ColumnFilters.js

@@ -0,0 +1,97 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { DropdownDismiss, Button } from '@react-fabric/core';
+import { Input, Search, Checkbox } from '@react-fabric/form';
+import { matchString, EMPTY_ARRAY } from '@react-fabric/utilities';
+import { useState } from 'react';
+import { useFilteredList } from '../hooks/useFilteredList.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ListFilter = function ListFilter(_ref) {
+  var _ref$list = _ref.list,
+    list = _ref$list === void 0 ? EMPTY_ARRAY : _ref$list,
+    filter = _ref.filter,
+    onFilter = _ref.onFilter;
+  var _useState = useState(new Set(filter)),
+    _useState2 = _slicedToArray(_useState, 2),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var _useFilteredList = useFilteredList(list, function (item, query) {
+      var _item$id;
+      return matchString((_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : item, query);
+    }),
+    filteredList = _useFilteredList.filteredList,
+    query = _useFilteredList.query,
+    onSearch = _useFilteredList.onSearch;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col",
+    children: [/*#__PURE__*/jsx("div", {
+      children: /*#__PURE__*/jsx(Search, {
+        autoFocus: true,
+        value: query,
+        onSearch: onSearch,
+        searchOnChange: true
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex-1 overflow-auto scroll-thin",
+      children: [filteredList.map(function (v, idx) {
+        var _v$id, _v$label;
+        return /*#__PURE__*/jsx("div", {
+          className: "flex gap-x-1 text-xs items-center",
+          children: /*#__PURE__*/jsx(Checkbox, {
+            checked: selected.has((_v$id = v.id) !== null && _v$id !== void 0 ? _v$id : v),
+            onChange: function onChange(b) {
+              var _v$id2, _v$id3;
+              var set = new Set(Array.from(selected.values()));
+              b ? set.add((_v$id2 = v.id) !== null && _v$id2 !== void 0 ? _v$id2 : v) : set["delete"]((_v$id3 = v.id) !== null && _v$id3 !== void 0 ? _v$id3 : v);
+              setSelected(set);
+            },
+            label: /*#__PURE__*/jsx("span", {
+              className: "truncate",
+              children: (_v$label = v.label) !== null && _v$label !== void 0 ? _v$label : v
+            })
+          })
+        }, idx);
+      }), filteredList.length === 0 && /*#__PURE__*/jsx("span", {
+        className: "text-muted text-xs",
+        children: "No items found"
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex justify-end",
+      children: /*#__PURE__*/jsx(DropdownDismiss, {
+        children: /*#__PURE__*/jsx(Button, {
+          size: "xs",
+          onClick: function onClick() {
+            return onFilter === null || onFilter === void 0 ? void 0 : onFilter(Array.from(selected));
+          },
+          children: "Apply"
+        })
+      })
+    })]
+  });
+};
+var ColumnFilters = function ColumnFilters(_ref2) {
+  var type = _ref2.type,
+    list = _ref2.list,
+    filter = _ref2.filter,
+    onFilter = _ref2.onFilter;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col min-w-[16rem]",
+    children: [list && /*#__PURE__*/jsx(ListFilter, {
+      list: list,
+      filter: filter,
+      onFilter: onFilter
+    }), !list && type === "string" && /*#__PURE__*/jsx(Input, {
+      autoFocus: true,
+      allowClear: true,
+      value: filter,
+      onEnterPressed: function onEnterPressed(e) {
+        var _e$target$value;
+        return onFilter((_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : "");
+      }
+    })]
+  });
+};
+
+export { ColumnFilters };

package/dist/esm/table/HeaderCell.js

@@ -1,51 +1,37 @@
 'use client';
 
-import { MenuItem, CoreIcons, Tooltip, Icon, DropdownTool, Menu } from '@react-fabric/core';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { Menu, MenuItem, Divider, Tooltip, Icon, getIconProps, DropdownTool, Button } from '@react-fabric/core';
+import { isEmpty } from '@react-fabric/utilities';
 import { useMemo, useCallback } from 'react';
+import { ColumnFilters } from './ColumnFilters.js';
 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.
- */
-
+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 HeaderCell = function HeaderCell(_ref) {
   var id = _ref.id,
+    field = _ref.field,
+    dataType = _ref.dataType,
     label = _ref.label,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip;
-    _ref.actions;
+    actions = _ref.actions;
     _ref.locked;
-    var tooltip = _ref.tooltip,
+    var filter = _ref.filter,
+    filterable = _ref.filterable,
+    filterOptions = _ref.filterOptions,
+    tooltip = _ref.tooltip,
     sortable = _ref.sortable,
     resizable = _ref.resizable,
     _width = _ref.width,
     maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,
     sort = _ref.sort,
-    onSort = _ref.onSort;
+    onSort = _ref.onSort,
+    _onFilter = _ref.onFilter;
   var _useTableContext = useTableContext(),
     startResize = _useTableContext.startResize,
     widths = _useTableContext.widths;
@@ -53,30 +39,68 @@ 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 (filterable && (dataType !== null && dataType !== void 0 ? dataType : filterOptions)) {
+      ret.push( /*#__PURE__*/jsx(Menu, {
+        label: "Filter",
+        icon: filter ? "icon-[mdi--check]" : "",
+        trigger: "click",
+        children: /*#__PURE__*/jsx(ColumnFilters, {
+          type: dataType,
+          list: filterOptions,
+          filter: filter,
+          onFilter: function onFilter(value) {
+            return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(field !== null && field !== void 0 ? field : id, value);
+          }
+        })
+      }, "filters"));
+    }
     if (sortable) {
       ret.push( /*#__PURE__*/jsx(MenuItem, {
         label: "Sort ascending",
-        icon: CoreIcons.sortAsc
+        icon: "icon-[mdi--sort-ascending]",
+        onClick: function onClick() {
+          return handleSort("asc");
+        }
       }, "sort-asc"), /*#__PURE__*/jsx(MenuItem, {
         label: "Sort descending",
-        icon: CoreIcons.sortDesc
+        icon: "icon-[mdi--sort-descending]",
+        onClick: function onClick() {
+          return handleSort("desc");
+        }
       }, "sort-desc"));
     }
+    if (actions) {
+      var _ret;
+      ret.push( /*#__PURE__*/jsx(Divider, {}, "div"));
+      (_ret = ret).push.apply(_ret, _toConsumableArray(actions));
+    }
+    if (ret.length === 1) {
+      ret = [/*#__PURE__*/jsx(ColumnFilters, {
+        type: dataType,
+        list: filterOptions,
+        filter: filter,
+        onFilter: function onFilter(value) {
+          return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(field !== null && field !== void 0 ? field : id, value);
+        }
+      }, "filters")];
+    }
     return ret;
-  }, [sortable]);
+  }, [sortable, actions, _onFilter, handleSort]);
   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,
@@ -87,12 +111,7 @@ var HeaderCell = function HeaderCell(_ref) {
       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, {
-          icon: icon,
-          bg: iconBg,
-          color: iconColor,
-          rtlFlip: rtlFlip
-        }), /*#__PURE__*/jsx("span", {
+        children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({}, getIconProps(icon))), /*#__PURE__*/jsx("span", {
           children: label !== null && label !== void 0 ? label : " "
         })]
       })
@@ -112,6 +131,15 @@ var HeaderCell = function HeaderCell(_ref) {
         className: "text-sm",
         children: menus
       })
+    }), filterable && !isEmpty(filter) && /*#__PURE__*/jsx(Button, {
+      size: "sm",
+      variant: "link",
+      "aria-label": "clear filter",
+      stopPropagation: true,
+      icon: "icon-[mdi--filter-remove]",
+      onClick: function onClick() {
+        return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id);
+      }
     }), resizable && /*#__PURE__*/jsx("div", {
       role: "none",
       className: "cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch",

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, LoadingLine, Icon, 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,23 +19,31 @@ 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,
+    onFilter = _ref.onFilter,
     onScroll = _ref.onScroll,
     onRowClick = _ref.onRowClick,
-    onCheckedChanged = _ref.onCheckedChanged;
+    onCheckedChanged = _ref.onCheckedChanged,
+    _ref$total = _ref.total,
+    total = _ref$total === void 0 ? 0 : _ref$total,
+    onLoadMore = _ref.onLoadMore;
   var _useTranslation = useTranslation("data"),
     t = _useTranslation.t;
   var fireCheckChanged = useDebounce(function (checkedIds) {
@@ -43,17 +52,28 @@ 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,
+      total: total,
+      loading: loading,
+      onLoadMore: onLoadMore,
+      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 () {
@@ -108,9 +128,11 @@ var Table = function Table(_ref) {
       style: {
         gridTemplate: "\"head\" auto \"loader\" auto \"content\" 1fr \"foot\" auto/1fr"
       },
+      "data-ref": "tableScroller",
       ref: scrollerRef,
       children: [/*#__PURE__*/jsxs("div", {
-        className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
+        "data-ref": "tableHeader",
+        className: "bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-3",
         children: [/*#__PURE__*/jsxs("div", {
           className: wrapperStart,
           children: [canExpand && /*#__PURE__*/jsx("div", {
@@ -121,20 +143,23 @@ var Table = function Table(_ref) {
           }), (_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.map(function (col, idx) {
             return /*#__PURE__*/jsx(HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
               sort: sort,
-              onSort: onSort
+              onSort: onSort,
+              onFilter: onFilter
             }), idx);
           })]
         }), (_state$cols = state.cols) === null || _state$cols === void 0 ? void 0 : _state$cols.map(function (col, idx) {
           return /*#__PURE__*/jsx(HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
             sort: sort,
-            onSort: onSort
+            onSort: onSort,
+            onFilter: onFilter
           }), idx);
         }), /*#__PURE__*/jsxs("div", {
           className: wrapperEnd,
           children: [(_state$end = state.end) === null || _state$end === void 0 ? void 0 : _state$end.map(function (col, idx) {
             return /*#__PURE__*/jsx(HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
               sort: sort,
-              onSort: onSort
+              onSort: onSort,
+              onFilter: onFilter
             }), idx);
           }), hideableColumns && /*#__PURE__*/jsx(AddColumn, {
             onClick: onHide,
@@ -143,22 +168,46 @@ var Table = function Table(_ref) {
             })
           })]
         })]
-      }), loading && /*#__PURE__*/jsx(Loading, {}), data.length > 0 && /*#__PURE__*/jsxs("div", {
-        className: "area-content flex flex-col flex-nowrap",
+      }), loading && /*#__PURE__*/jsx(LoadingLine, {}), data.length > 0 && /*#__PURE__*/jsxs("div", {
+        className: "area-content flex flex-col flex-nowrap min-h-full",
         style: {
           height: totalSize()
         },
         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, {
-            rowKey: key,
+          return "__GROUP__" in data ? /*#__PURE__*/jsx("div", {
+            ref: measureElement,
+            "data-index": index,
+            className: classNames("text-md bg-base border-y border-tint-100 border-t-0 cursor-pointer flex items-center justify-start gap-1 z-2", isActiveSticky(index) && "sticky top-8"),
+            role: "none",
+            onClick: function onClick() {
+              return toggleGroupExpand(data.key);
+            },
+            children: /*#__PURE__*/jsxs("div", {
+              className: classNames("px-2 py-1 flex items-center gap-1 z-2 sticky start-0"),
+              children: [/*#__PURE__*/jsx(Icon, {
+                rtlFlip: true,
+                icon: data.open ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]"
+              }), (_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.toString(),
             index: index,
             checkableRows: checkableRows,
             checked: keyProperty && checkState.checked.includes(data[keyProperty]) ? 1 : 0,

package/dist/esm/table/types.js

@@ -27,4 +27,33 @@ var COL_MIN_WIDTH = "3rem";
 var COL_MAX_WIDTH = "64rem";
 var COL_DEFAULT_WIDTH = "12rem";
 
+/**
+ * TableColumn interface defines the structure of a column in a table.
+ * It includes properties for column identification, display options, alignment,
+ * visibility, resizing, sorting, filtering, and rendering.
+ *
+ * @template T - The type of data the column will represent, defaulting to KeyValue.
+ * @property {keyof T | string} id - Unique identifier for the column.
+ * @property {"string" | "number" | "boolean" | "datetime" | "date" | "time" | "unknown"} [dataType] - Data type of the column values.
+ * @property {string} [label] - Display label for the column header.
+ * @property {string} [tooltip] - Tooltip text for the column header.
+ * @property {string} [format] - Format string for displaying the column values.
+ * @property {"start" | "center" | "end"} [align] - Text alignment within the column.
+ * @property {"start" | "end"} [locked] - Indicates if the column is locked at the start or end.
+ * @property {boolean} [hidden] - Whether the column is hidden.
+ * @property {boolean} [truncate] - Whether to truncate the text in the column.
+ * @property {boolean} [hideable] - Whether the column can be hidden by the user.
+ * @property {boolean} [resizable] - Whether the column can be resized by the user.
+ * @property {boolean} [sortable] - Whether the column can be sorted.
+ * @property {boolean} [filterable] - Whether the column can be filtered.
+ * @property {AnyObject} [filter] - Filter criteria for the column.
+ * @property {ReactElement[]} [actions] - Array of action elements to be displayed in the column.
+ * @property {AnyObject[]} [filterOptions] - Options for filtering the column.
+ * @property {string | number} [width] - Width of the column.
+ * @property {string | number} [minWidth] - Minimum width of the column.
+ * @property {string | number} [maxWidth] - Maximum width of the column.
+ * @property {KeyValue} [valueMap] - Mapping of values for the column.
+ * @property {(value: AnyObject, data: T, index: number) => Elements<AnyObject>} [renderer] - Custom renderer function for the column values.
+ */
+
 export { COL_DEFAULT_WIDTH, COL_MAX_WIDTH, COL_MIN_WIDTH };

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");