@react-fabric/data 1.0.0-beta.9 → 1.0.1

package/dist/cjs/table/BodyRow.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var classNames = require('classnames');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
 var BodyCell = require('./BodyCell.js');
 var CheckboxCell = require('./CheckboxCell.js');
-var core = require('@react-fabric/core');
 var jsxRuntime = require('react/jsx-runtime');
 
 /*
@@ -29,7 +29,7 @@ var jsxRuntime = require('react/jsx-runtime');
  * 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) {
+function BodyRow(_ref) {
   var _state$start, _state$cols, _state$end;
   var rowKey = _ref.rowKey,
     index = _ref.index,
@@ -55,20 +55,21 @@ var BodyRow = function BodyRow(_ref) {
     children: [/*#__PURE__*/jsxRuntime.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: utilities.cn("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);
+        if (checkableRows && keyProperty && !onRowClick) toggleChecked(data[keyProperty]);else onRowClick === null || onRowClick === void 0 || onRowClick(data);
       },
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: wrapperStart,
-        children: [!!canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classNames("group font-medium w-6 flex flex-nowrap text-start items-center", !canExpand(data) && "pointer-events-none opacity-35"),
+        children: [!!canExpand && /*#__PURE__*/jsxRuntime.jsx("button", {
+          type: "button",
+          className: utilities.cn("group font-medium w-6 flex flex-nowrap text-start py-1", !canExpand(data) && "pointer-events-none opacity-35"),
+          onClick: function onClick(e) {
+            return [keyProperty && toggleExpand(data[keyProperty]), e.stopPropagation()];
+          },
           children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
             className: "p-1 text-tint-700 hover:text-primary-600",
-            icon: expanded ? core.CoreIcons.collapse : core.CoreIcons.expand,
-            onClick: function onClick(e) {
-              return [keyProperty && toggleExpand(data[keyProperty]), e.stopPropagation()];
-            }
+            icon: expanded ? "icon-[mdi--minus-box]" : "icon-[mdi--plus-box]"
           })
         }), checkableRows && keyProperty && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
           onClick: function onClick() {
@@ -76,32 +77,44 @@ var BodyRow = function BodyRow(_ref) {
           },
           state: checked
         }), (_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.map(function (col, ids) {
-          return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
-            column: col,
-            item: data,
-            index: ids
-          }, "".concat(String(rowKey), ":").concat(ids));
+          return (
+            /*#__PURE__*/
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            jsxRuntime.jsx(BodyCell.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__*/jsxRuntime.jsx(BodyCell.BodyCell, {
-          column: col,
-          item: data,
-          index: idc
-        }, "".concat(String(rowKey), ":").concat(idc));
+        return (
+          /*#__PURE__*/
+          // eslint-disable-next-line @eslint-react/no-array-index-key
+          jsxRuntime.jsx(BodyCell.BodyCell, {
+            column: col,
+            item: data,
+            index: idc
+          }, "".concat(String(rowKey), ":").concat(idc))
+        );
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: wrapperEnd,
         children: [(_state$end = state.end) === null || _state$end === void 0 ? void 0 : _state$end.map(function (col, ide) {
-          return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
-            column: col,
-            item: data,
-            index: ide
-          }, "".concat(String(rowKey), ":").concat(ide));
+          return (
+            /*#__PURE__*/
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            jsxRuntime.jsx(BodyCell.BodyCell, {
+              column: col,
+              item: data,
+              index: ide
+            }, "".concat(String(rowKey), ":").concat(ide))
+          );
         }), hideableColumns && /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "w-6"
         })]
       })]
-    }), expanded && expandRow(data)]
+    }), expanded && (expandRow === null || expandRow === void 0 ? void 0 : expandRow(data))]
   });
-};
+}
 
 exports.BodyRow = BodyRow;

package/dist/cjs/table/CheckboxCell.js

@@ -26,19 +26,20 @@ var jsxRuntime = require('react/jsx-runtime');
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var CheckboxCell = function CheckboxCell(_ref) {
+function CheckboxCell(_ref) {
   var state = _ref.state,
     _onClick = _ref.onClick;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "group font-medium border-e w-6 flex flex-nowrap text-start items-center",
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    type: "button",
+    className: "group font-medium border-e w-6 flex flex-nowrap text-start py-1",
+    onClick: function onClick(e) {
+      return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(), e.stopPropagation()];
+    },
     children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-      icon: state === 2 ? core.CoreIcons.checkboxInt : state === 1 ? core.CoreIcons.checkboxOn : core.CoreIcons.checkboxOff,
-      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()];
-      }
+      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"
     })
   });
-};
+}
 
 exports.CheckboxCell = CheckboxCell;

package/dist/cjs/table/ColumnFilters.js

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

package/dist/cjs/table/EmptyCell.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var react = require('react');
-var Context = require('./Context.js');
+var context = require('./context.js');
 var types = require('./types.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -28,12 +28,12 @@ var jsxRuntime = require('react/jsx-runtime');
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var EmptyCell = function EmptyCell(_ref) {
+function EmptyCell(_ref) {
   var id = _ref.id,
     _width = _ref.width,
     maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth;
-  var _useTableContext = Context.useTableContext(),
+  var _useTableContext = context.useTableContext(),
     widths = _useTableContext.widths;
   var width = react.useMemo(function () {
     var _widths$get;
@@ -47,6 +47,6 @@ var EmptyCell = function EmptyCell(_ref) {
       maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : types.COL_MAX_WIDTH
     }
   }, "blank:".concat(id.toString()));
-};
+}
 
 exports.EmptyCell = EmptyCell;

package/dist/cjs/table/HeaderCell.js

@@ -1,82 +1,105 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
-var Context = require('./Context.js');
+var ColumnFilters = require('./ColumnFilters.js');
+var context = require('./context.js');
 var types = require('./types.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-var HeaderCell = function HeaderCell(_ref) {
+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), true).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; }
+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;
-    _ref.locked;
-    var tooltip = _ref.tooltip,
+    actions = _ref.actions,
+    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;
-  var _useTableContext = Context.useTableContext(),
+    onSort = _ref.onSort,
+    _onFilter = _ref.onFilter;
+  var _useTableContext = context.useTableContext(),
     startResize = _useTableContext.startResize,
     widths = _useTableContext.widths;
   var width = react.useMemo(function () {
     var _widths$get;
     return (_widths$get = widths.get(id.toString())) !== null && _widths$get !== void 0 ? _widths$get : _width;
   }, [widths, _width, id]);
-  var handleSort = react.useCallback(function () {
-    sortable && (onSort === null || onSort === void 0 ? void 0 : onSort({
+  var handleSort = react.useCallback(function (order) {
+    if (sortable) onSort === null || onSort === void 0 || onSort({
       id: id.toString(),
-      order: (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
-    }));
-  }, [onSort, name, sort, sortable]);
+      order: order !== null && order !== void 0 ? order : (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
+    });
+  }, [id, onSort, sort, sortable]);
   var menus = react.useMemo(function () {
     var ret = [];
+    if (filterable && (dataType !== null && dataType !== void 0 ? dataType : filterOptions)) {
+      ret.push(/*#__PURE__*/jsxRuntime.jsx(core.Menu, {
+        label: "Filter",
+        icon: filter ? "icon-[mdi--check]" : "",
+        trigger: "click",
+        children: /*#__PURE__*/jsxRuntime.jsx(ColumnFilters.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__*/jsxRuntime.jsx(core.MenuItem, {
+      ret.push(/*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
         label: "Sort ascending",
-        icon: core.CoreIcons.sortAsc
+        icon: "icon-[mdi--sort-ascending]",
+        onClick: function onClick() {
+          return handleSort("asc");
+        }
       }, "sort-asc"), /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
         label: "Sort descending",
-        icon: core.CoreIcons.sortDesc
+        icon: "icon-[mdi--sort-descending]",
+        onClick: function onClick() {
+          return handleSort("desc");
+        }
       }, "sort-desc"));
     }
+    if (actions) {
+      var _ret;
+      ret.push(/*#__PURE__*/jsxRuntime.jsx(core.Divider, {}, "div"));
+      (_ret = ret).push.apply(_ret, _toConsumableArray(actions));
+    }
+    if (ret.length === 1) {
+      ret = [/*#__PURE__*/jsxRuntime.jsx(ColumnFilters.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]);
+  }, [filterable, dataType, filterOptions, sortable, actions, filter, _onFilter, field, id, handleSort]);
   return /*#__PURE__*/jsxRuntime.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 : types.COL_DEFAULT_WIDTH,
       minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : types.COL_MIN_WIDTH,
@@ -86,13 +109,8 @@ var HeaderCell = function HeaderCell(_ref) {
       content: tooltip !== null && tooltip !== void 0 ? tooltip : label,
       disabled: !(tooltip !== null && tooltip !== void 0 ? tooltip : label),
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex-initial 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", {
+        className: "flex-initial px-2 py-1 text-sm truncate sticky inset-s-0",
+        children: [icon && /*#__PURE__*/jsxRuntime.jsx(core.Icon, _objectSpread({}, core.getIconProps(icon))), /*#__PURE__*/jsxRuntime.jsx("span", {
           children: label !== null && label !== void 0 ? label : " "
         })]
       })
@@ -112,14 +130,22 @@ var HeaderCell = function HeaderCell(_ref) {
         className: "text-sm",
         children: menus
       })
+    }), filterable && !utilities.isEmpty(filter) && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+      size: "sm",
+      variant: "link",
+      "aria-label": "clear filter",
+      icon: "icon-[mdi--filter-remove]",
+      onClick: function onClick(e) {
+        return e !== null && e !== void 0 && e.stopPropagation(), _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id);
+      }
     }), resizable && /*#__PURE__*/jsxRuntime.jsx("div", {
       role: "none",
-      className: "cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch",
+      className: "cursor-col-resize border-e bg-transparent border-tint-200 w-[calc(5px)] self-stretch",
       onMouseDown: function onMouseDown(e) {
         return e.currentTarget.parentElement && startResize(e.currentTarget.parentElement);
       }
     })]
   });
-};
+}
 
 exports.HeaderCell = HeaderCell;

package/dist/cjs/table/HtmlTable.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var usePagination = require('../hooks/usePagination.js');
+var Pagination = require('../pagination/Pagination.js');
+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), true).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; }
+function HtmlTable(_ref) {
+  var data = _ref.data,
+    columns = _ref.columns,
+    _ref$paginationSize = _ref.paginationSize,
+    paginationSize = _ref$paginationSize === void 0 ? 25 : _ref$paginationSize,
+    className = _ref.className;
+  var paginator = usePagination.usePagination({
+    totalRecords: data.length,
+    perPage: paginationSize
+  });
+  var startIndex = react.useMemo(function () {
+    return paginator.page * paginationSize;
+  }, [paginator.page, paginationSize]);
+  var dataPage = react.useMemo(function () {
+    return paginationSize > 0 ? data.slice(startIndex, startIndex + paginationSize) : data;
+  }, [data, paginationSize, startIndex]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: className,
+    children: /*#__PURE__*/jsxRuntime.jsxs("table", {
+      className: "table-fixed border-spacing-1 border-separate w-full text-sm",
+      children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
+        className: "sticky top-0 z-1 bg-dimmed",
+        children: /*#__PURE__*/jsxRuntime.jsx("tr", {
+          children: columns.map(function (col, idx) {
+            var _ref2, _col$headRenderer;
+            return /*#__PURE__*/jsxRuntime.jsx("th", {
+              className: "text-start truncate bg-accent-100 px-2 py-1 font-medium text-accent-800",
+              style: {
+                width: col.width,
+                maxWidth: col.maxWidth
+              },
+              children: (_ref2 = (_col$headRenderer = col.headRenderer) !== null && _col$headRenderer !== void 0 ? _col$headRenderer : col.label) !== null && _ref2 !== void 0 ? _ref2 : " "
+            }, idx);
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("tbody", {
+        className: "bg-alternate",
+        children: dataPage.map(function (row, idx) {
+          return (
+            /*#__PURE__*/
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            jsxRuntime.jsx("tr", {
+              children: columns.map(function (col, cidx) {
+                var _col$renderer, _col$renderer2;
+                return /*#__PURE__*/jsxRuntime.jsx("td", {
+                  className: utilities.cn("px-2 py-1 truncate", col.align === "center" && "text-center", col.align === "end" && "text-end", col.className),
+                  style: {
+                    width: col.width,
+                    maxWidth: col.maxWidth
+                  },
+                  children: (_col$renderer = (_col$renderer2 = col.renderer) === null || _col$renderer2 === void 0 ? void 0 : _col$renderer2.call(col, utilities.getByPath(row, col.id.toString()), row, startIndex + idx)) !== null && _col$renderer !== void 0 ? _col$renderer : utilities.getByPath(row, col.id.toString())
+                }, "".concat(idx, "-").concat(cidx));
+              })
+            }, idx)
+          );
+        })
+      }), paginationSize > 0 && /*#__PURE__*/jsxRuntime.jsx("tfoot", {
+        className: "sticky bottom-0 bg-dimmed z-1",
+        children: /*#__PURE__*/jsxRuntime.jsx("tr", {
+          children: /*#__PURE__*/jsxRuntime.jsx("td", {
+            colSpan: columns.length,
+            className: "text-end py-1",
+            children: /*#__PURE__*/jsxRuntime.jsx(Pagination.Pagination, _objectSpread({
+              minimal: true
+            }, paginator))
+          })
+        })
+      })]
+    })
+  });
+}
+
+exports.HtmlTable = HtmlTable;

package/dist/cjs/table/{Context.js → Provider.js}

@@ -2,26 +2,28 @@
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
+var context = require('./context.js');
 var useResizer = require('./useResizer.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var TableContext = /*#__PURE__*/react.createContext({});
-var TableProvider = function TableProvider(_ref) {
+function TableProvider(_ref) {
   var children = _ref.children;
   var ghostRef = react.useRef(null);
-  var _useState = react.useState(new Map()),
+  var _useState = react.useState(function () {
+      return new Map();
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     widths = _useState2[0],
     setWidths = _useState2[1];
   var startResize = react.useCallback(function (col) {
     if (col) {
-      ghostRef.current != null && useResizer.useResizer(col, ghostRef.current, function (width) {
+      if (ghostRef.current != null) useResizer.startResizer(col, ghostRef.current, function (width) {
         var _col$dataset$id;
         setWidths(new Map(widths.set((_col$dataset$id = col.dataset.id) !== null && _col$dataset$id !== void 0 ? _col$dataset$id : "", width)));
       });
     }
   }, [widths]);
-  return /*#__PURE__*/jsxRuntime.jsxs(TableContext.Provider, {
+  return /*#__PURE__*/jsxRuntime.jsxs(context.TableContext, {
     value: {
       startResize: startResize,
       widths: widths
@@ -34,10 +36,6 @@ var TableProvider = function TableProvider(_ref) {
       })
     })]
   });
-};
-var useTableContext = function useTableContext() {
-  return react.useContext(TableContext);
-};
+}
 
 exports.TableProvider = TableProvider;
-exports.useTableContext = useTableContext;