@react-fabric/data 1.0.0-beta.60 → 1.0.0-beta.62

package/dist/esm/i18n/index.js

@@ -1,8 +1,8 @@
 'use client';
 
 import { addTranslationBundle } from '@react-fabric/core';
-import ar from './ar.json.js';
-import en from './en.json.js';
+import ar from './ar/data.json.js';
+import en from './en/data.json.js';
 
 /*
  * React Fabric

package/dist/esm/index.js

@@ -5,6 +5,7 @@ export { CheckList } from './checklist/CheckList.js';
 export { Histogram } from './histogram/Histogram.js';
 export { JsonViewer } from './json/JsonViewer.js';
 export { Pagination } from './pagination/Pagination.js';
+export { HtmlTable } from './table/HtmlTable.js';
 export { Table } from './table/Table.js';
 export { TreePanel } from './tree/TreePanel.js';
 export { VirtualGallery } from './virtual/Gallery.js';

package/dist/esm/json/JsonViewer.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { EmptyContent, Text, Meter, Button, CoreIcons, Icon, Copy } from '@react-fabric/core';
+import { EmptyContent, Text, Meter, Button, Icon, Copy } from '@react-fabric/core';
 import { isEmpty, isArray, isObject, isNil, Format, isBoolean, isTrue } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, useState, Fragment } from 'react';
@@ -133,7 +133,7 @@ var JsonEntry = function JsonEntry(_ref3) {
           color: "danger",
           size: "xs",
           variant: "link",
-          icon: CoreIcons.funnelMinus,
+          icon: "icon-[mdi--filter-minus]",
           "aria-label": "Filter Negative",
           onClick: function onClick() {
             return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
@@ -142,7 +142,7 @@ var JsonEntry = function JsonEntry(_ref3) {
           color: "primary",
           size: "xs",
           variant: "link",
-          icon: CoreIcons.funnelPlus,
+          icon: "icon-[mdi--filter-plus]",
           "aria-label": "Filter",
           onClick: function onClick() {
             return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue);
@@ -168,7 +168,7 @@ var JsonEntry = function JsonEntry(_ref3) {
         },
         children: [canExpand && /*#__PURE__*/jsx(Icon, {
           rtlFlip: true,
-          icon: expanded ? CoreIcons.chevronDown : CoreIcons.chevronRight
+          icon: expanded ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]"
         }), labelDisplay]
       }), display && /*#__PURE__*/jsxs("div", {
         className: classNames("px-2 flex flex-nowrap overflow-hidden", inline && "flex-1"),

package/dist/esm/pagination/Pagination.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Icon, CoreIcons } from '@react-fabric/core';
+import { Icon } from '@react-fabric/core';
 import classNames from 'classnames';
 import { memo, useMemo, Fragment } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -33,7 +33,7 @@ var Pagination = /*#__PURE__*/memo(function (_ref) {
           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"),
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       }), mid && /*#__PURE__*/jsx("span", {
@@ -44,7 +44,7 @@ var Pagination = /*#__PURE__*/memo(function (_ref) {
           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"),
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       }), last && /*#__PURE__*/jsx("span", {
@@ -55,7 +55,7 @@ var Pagination = /*#__PURE__*/memo(function (_ref) {
           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"),
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       })]
@@ -67,18 +67,18 @@ var Pagination = /*#__PURE__*/memo(function (_ref) {
       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"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === 0 && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsx(Icon, {
-        icon: CoreIcons.chevronsLeft,
+        icon: "icon-[mdi--chevron-double-left]",
         rtlFlip: true
       })
     }), /*#__PURE__*/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"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === 0 && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsx(Icon, {
-        icon: CoreIcons.chevronLeft,
+        icon: "icon-[mdi--chevron-left]",
         rtlFlip: true
       })
     }), !minimal && pageBody, minimal && /*#__PURE__*/jsxs("label", {
@@ -88,18 +88,18 @@ var Pagination = /*#__PURE__*/memo(function (_ref) {
       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"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsx(Icon, {
-        icon: CoreIcons.chevronRight,
+        icon: "icon-[mdi--chevron-right]",
         rtlFlip: true
       })
     }), /*#__PURE__*/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"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsx(Icon, {
-        icon: CoreIcons.chevronsRight,
+        icon: "icon-[mdi--chevron-double-right]",
         rtlFlip: true
       })
     })]

package/dist/esm/table/AddColumn.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { Dropdown, Icon, CoreIcons, Menu, MenuItem } from '@react-fabric/core';
+import { Dropdown, Icon, Menu, MenuItem } from '@react-fabric/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 /*
@@ -34,7 +34,7 @@ var AddColumn = function AddColumn(_ref) {
     children: /*#__PURE__*/jsxs(Dropdown, {
       placement: "bottom-end",
       children: [/*#__PURE__*/jsx(Icon, {
-        icon: CoreIcons.insert,
+        icon: "icon-[mdi--plus-circle-outline]",
         className: "p-1 rounded-t rounded-b-none hover:outline"
       }), /*#__PURE__*/jsx(Menu, {
         className: "text-sm",
@@ -45,7 +45,7 @@ var AddColumn = function AddColumn(_ref) {
             id: String(col.id),
             "data-dropdown-dismiss": "false",
             label: "".concat((_col$label = col.label) !== null && _col$label !== void 0 ? _col$label : String(col.id)),
-            icon: !col.hidden ? CoreIcons.tick : ""
+            icon: !col.hidden ? "icon-[mdi--check]" : ""
           }, String(col.id));
         })
       })]

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,7 +43,7 @@ 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$dataType;
+    var _column$dataType2;
     var value = getByPath(item, column.id.toString());
     if (column.renderer != null) {
       return column.renderer(value, item, index);
@@ -52,16 +52,17 @@ var BodyCell = function BodyCell(_ref) {
       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 (["date", "time", "datetime"].includes((_column$dataType = column.dataType) !== null && _column$dataType !== void 0 ? _column$dataType : "")) {
+    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
@@ -70,6 +71,12 @@ 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", {

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';
 
 /*
@@ -65,7 +65,7 @@ var BodyRow = function BodyRow(_ref) {
           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';
 
 /*
@@ -32,7 +32,7 @@ var CheckboxCell = function CheckboxCell(_ref) {
   return /*#__PURE__*/jsx("div", {
     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/HeaderCell.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { Menu, CoreIcons, MenuItem, Divider, Tooltip, Icon, getIconProps, DropdownTool, Button } from '@react-fabric/core';
+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';
@@ -50,7 +50,7 @@ var HeaderCell = function HeaderCell(_ref) {
     if (filterable && (dataType !== null && dataType !== void 0 ? dataType : filterOptions)) {
       ret.push( /*#__PURE__*/jsx(Menu, {
         label: "Filter",
-        icon: filter ? CoreIcons.tick : "",
+        icon: filter ? "icon-[mdi--check]" : "",
         trigger: "click",
         children: /*#__PURE__*/jsx(ColumnFilters, {
           type: dataType,
@@ -65,13 +65,13 @@ var HeaderCell = function HeaderCell(_ref) {
     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");
         }
@@ -136,7 +136,7 @@ var HeaderCell = function HeaderCell(_ref) {
       variant: "link",
       "aria-label": "clear filter",
       stopPropagation: true,
-      icon: CoreIcons.funnelRemove,
+      icon: "icon-[mdi--filter-remove]",
       onClick: function onClick() {
         return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id);
       }

package/dist/esm/table/HtmlTable.js

@@ -0,0 +1,78 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { Footer } from '@react-fabric/core';
+import { getByPath } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { usePagination } from '../hooks/usePagination.js';
+import { Pagination } from '../pagination/Pagination.js';
+import { jsxs, jsx } 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 HtmlTable = 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({
+    totalRecords: data.length,
+    perPage: paginationSize
+  });
+  var startIndex = useMemo(function () {
+    return paginator.page * paginationSize;
+  }, [paginator.page, paginationSize]);
+  var dataPage = useMemo(function () {
+    return paginationSize > 0 ? data.slice(startIndex, startIndex + paginationSize) : data;
+  }, [data, paginationSize, startIndex]);
+  return /*#__PURE__*/jsxs("div", {
+    className: className,
+    children: [/*#__PURE__*/jsxs("table", {
+      className: "table-fixed border-spacing-1 border-separate w-full text-sm",
+      children: [/*#__PURE__*/jsx("thead", {
+        className: "sticky top-0 z-1",
+        children: /*#__PURE__*/jsx("tr", {
+          children: columns.map(function (col, idx) {
+            var _ref2, _col$headRenderer;
+            return /*#__PURE__*/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__*/jsx("tbody", {
+        className: "bg-alternate",
+        children: dataPage.map(function (row, idx) {
+          return /*#__PURE__*/jsx("tr", {
+            children: columns.map(function (col, cidx) {
+              var _col$renderer, _col$renderer2;
+              return /*#__PURE__*/jsx("td", {
+                className: classNames("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, getByPath(row, col.id.toString()), row, startIndex + idx)) !== null && _col$renderer !== void 0 ? _col$renderer : getByPath(row, col.id.toString())
+              }, "".concat(idx, "-").concat(cidx));
+            })
+          }, idx);
+        })
+      })]
+    }), paginationSize > 0 && /*#__PURE__*/jsx(Footer, {
+      flex: true,
+      justify: "end",
+      className: "px-2 py-1 sticky bottom-0 bg-tint-50",
+      children: /*#__PURE__*/jsx(Pagination, _objectSpread({
+        minimal: true
+      }, paginator))
+    })]
+  });
+};
+
+export { HtmlTable };

package/dist/esm/table/Table.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { useDebounce, Loading, Icon, CoreIcons, 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';
@@ -168,7 +168,7 @@ var Table = function Table(_ref) {
             })
           })]
         })]
-      }), loading && /*#__PURE__*/jsx(Loading, {}), data.length > 0 && /*#__PURE__*/jsxs("div", {
+      }), loading && /*#__PURE__*/jsx(LoadingLine, {}), data.length > 0 && /*#__PURE__*/jsxs("div", {
         className: "area-content flex flex-col flex-nowrap min-h-full",
         style: {
           height: totalSize()
@@ -183,26 +183,29 @@ var Table = function Table(_ref) {
           var index = _ref2.index,
             key = _ref2.key;
           var data = getData(index);
-          return "__GROUP__" in data ? /*#__PURE__*/jsxs("div", {
+          return "__GROUP__" in data ? /*#__PURE__*/jsx("div", {
             ref: measureElement,
             "data-index": index,
-            className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-2", isActiveSticky(index) && "sticky top-8"),
+            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__*/jsx(Icon, {
-              rtlFlip: true,
-              icon: data.open ? CoreIcons.chevronDown : CoreIcons.chevronRight
-            }), (_groupRenderer = groupRenderer === null || groupRenderer === void 0 ? void 0 : groupRenderer(data)) !== null && _groupRenderer !== void 0 ? _groupRenderer : /*#__PURE__*/jsxs("div", {
-              className: "flex gap-1 items-center",
-              children: [/*#__PURE__*/jsx("span", {
-                children: data.key
-              }), /*#__PURE__*/jsxs("span", {
-                className: "text-sm",
-                children: ["(", data.itemCount, ")"]
+            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,

package/dist/esm/tree/TreeNode.js

@@ -1,8 +1,8 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { getBadgeProps, Icon, CoreIcons, getIconProps, Badge } from '@react-fabric/core';
-import { isString, isEmpty } from '@react-fabric/utilities';
+import { getBadgeProps, Icon, getIconProps, Badge } from '@react-fabric/core';
+import { isTrue, isString, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, isValidElement } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -57,7 +57,7 @@ var TreeNode = function TreeNode(_ref) {
     };
   }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
   var canCheck = useMemo(function () {
-    return checkable === true || checkable === "leafOnly" && node.leaf;
+    return isTrue(checkable) || checkable === "leafOnly" && node.leaf;
   }, [node.leaf, checkable]);
   var canSelect = useMemo(function () {
     return !node.disabled && (selectable === true || selectable === "leafOnly" && node.leaf);
@@ -72,8 +72,8 @@ var TreeNode = function TreeNode(_ref) {
     children: [filler, node.loading && /*#__PURE__*/jsx("div", {
       className: "flex-initial w-6",
       children: /*#__PURE__*/jsx(Icon, {
-        icon: CoreIcons.spinner,
-        className: "animate-spin text-muted"
+        icon: "icon-[svg-spinners--eclipse]",
+        className: "text-muted"
       })
     }), !node.leaf && !node.childFiltered && !node.loading && /*#__PURE__*/jsx("div", {
       className: "flex-initial w-6",
@@ -91,7 +91,7 @@ var TreeNode = function TreeNode(_ref) {
         onClick: function onClick() {
           return !node.disabled && onChecked(node.id);
         },
-        icon: node.checked === 2 ? CoreIcons.checkboxInt : node.checked === 1 ? CoreIcons.checkboxOn : CoreIcons.checkboxOff,
+        icon: node.checked === 2 ? "icon-[mdi--checkbox-intermediate]" : node.checked === 1 ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]",
         className: classNames(node.disabled ? "text-muted" : "text-primary-500 hover:text-primary-600")
       })
     }), !node.empty && /*#__PURE__*/jsxs("div", {

package/dist/esm/tree/TreePanel.js

@@ -2,12 +2,11 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { CoreIcons, Section, Header, Icon, ButtonGroup, Button } from '@react-fabric/core';
+import { Section, Header, Icon, ButtonGroup, Button } from '@react-fabric/core';
 import { Search } from '@react-fabric/form';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useRef, useMemo, useImperativeHandle, useEffect } from 'react';
 import { TreeNode } from './TreeNode.js';
-import { iconExpandAll, iconCollapseAll } from './types.js';
 import { useTree } from './useTree.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -81,10 +80,10 @@ var TreePanel = function TreePanel(_ref) {
   });
   var virtualItems = virtualizer.getVirtualItems();
   var expanders = useMemo(function () {
-    if (expander === "caret") return [CoreIcons.caretRight, CoreIcons.caretDown];
-    if (expander === "chevron") return [CoreIcons.chevronRight, CoreIcons.chevronDown];
-    if (expander === "folder") return [CoreIcons.folderClosed, CoreIcons.folderOpen];
-    return [CoreIcons.expand, CoreIcons.collapse];
+    if (expander === "caret") return ["icon-[mdi--menu-right]", "icon-[mdi--menu-down]"];
+    if (expander === "chevron") return ["icon-[mdi--chevron-right]", "icon-[mdi--chevron-down]"];
+    if (expander === "folder") return ["icon-[mdi--folder-outline]", "icon-[mdi--folder-open-outline]"];
+    return ["icon-[mdi--plus-box-outline]", "icon-[mdi--minus-box-outline]"];
   }, [expander]);
   useImperativeHandle(ref, function () {
     return {
@@ -118,7 +117,7 @@ var TreePanel = function TreePanel(_ref) {
         placeholder: filterPlaceholder,
         noBorder: true,
         decorateStart: /*#__PURE__*/jsx(Icon, {
-          icon: CoreIcons.filter,
+          icon: "icon-[mdi--filter-variant]",
           className: "p-1"
         })
       }), /*#__PURE__*/jsxs(ButtonGroup, {
@@ -127,12 +126,12 @@ var TreePanel = function TreePanel(_ref) {
         children: [/*#__PURE__*/jsx(Button, {
           size: "sm",
           "aria-label": "expand all",
-          icon: iconExpandAll,
+          icon: "icon-[mdi--arrow-expand-vertical]",
           onClick: expandAll
         }), /*#__PURE__*/jsx(Button, {
           size: "sm",
           "aria-label": "collapse all",
-          icon: iconCollapseAll,
+          icon: "icon-[mdi--arrow-collapse-vertical]",
           onClick: collapseAll
         })]
       })]

package/dist/esm/virtual/Scroller.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { ButtonGroup, Button, CoreIcons } from '@react-fabric/core';
+import { ButtonGroup, Button } from '@react-fabric/core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /*
@@ -43,7 +43,7 @@ var Scroller = function Scroller(_ref) {
       variant: "link",
       "aria-label": "scroll to top",
       icon: {
-        icon: vertical ? CoreIcons.chevronsUp : CoreIcons.chevronsLeft,
+        icon: vertical ? "icon-[mdi--chevron-double-up]" : "icon-[mdi--chevron-double-left]",
         rtlFlip: true
       },
       disabled: (scrollActive & 2) === 0,
@@ -53,7 +53,7 @@ var Scroller = function Scroller(_ref) {
       variant: "link",
       "aria-label": "scroll up",
       icon: {
-        icon: vertical ? CoreIcons.chevronUp : CoreIcons.chevronLeft,
+        icon: vertical ? "icon-[mdi--chevron-up]" : "icon-[mdi--chevron-left]",
         rtlFlip: true
       },
       disabled: (scrollActive & 2) === 0,
@@ -63,7 +63,7 @@ var Scroller = function Scroller(_ref) {
       variant: "link",
       "aria-label": "scroll down",
       icon: {
-        icon: vertical ? CoreIcons.chevronDown : CoreIcons.chevronRight,
+        icon: vertical ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]",
         rtlFlip: true
       },
       disabled: scrollActive % 2 === 0,
@@ -73,7 +73,7 @@ var Scroller = function Scroller(_ref) {
       variant: "link",
       "aria-label": "scroll to bottom",
       icon: {
-        icon: vertical ? CoreIcons.chevronsDown : CoreIcons.chevronsRight,
+        icon: vertical ? "icon-[mdi--chevron-double-down]" : "icon-[mdi--chevron-double-right]",
         rtlFlip: true
       },
       disabled: scrollActive % 2 === 0,

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@ export { CheckList } from "./checklist/CheckList";
 export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
+export { HtmlTable } from "./table/HtmlTable";
 export { Table } from "./table/Table";
 export { type TableColumn, type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";

package/dist/types/table/HtmlTable.d.ts

@@ -0,0 +1,21 @@
+interface Props<T = KeyValue> {
+    data: T[];
+    columns: Array<{
+        id: keyof T;
+        label?: string;
+        width?: number | string;
+        maxWidth?: number | string;
+        align?: "start" | "center" | "end";
+        className?: string;
+        headRenderer?: React.ReactNode;
+        renderer?: (value: any, row: T, index: number) => React.ReactNode;
+    }>;
+    /**
+     * Number of pagination buttons to show, default is 25
+     * If set to 0, pagination will be hidden
+     */
+    paginationSize?: number;
+    className?: string;
+}
+export declare const HtmlTable: <T extends KeyValue = KeyValue>({ data, columns, paginationSize, className, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/table/types.d.ts

@@ -1,5 +1,5 @@
 import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
-import { type CssProp, type Elements, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type CssProp, type Elements, type NestedKeys, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement } from "react";
 export declare const COL_MIN_WIDTH = "3rem";
 export declare const COL_MAX_WIDTH = "64rem";
@@ -33,7 +33,7 @@ export declare const COL_DEFAULT_WIDTH = "12rem";
  * @property {(value: AnyObject, data: T, index: number) => Elements<AnyObject>} [renderer] - Custom renderer function for the column values.
  */
 export interface TableColumn<T = KeyValue> extends CssProp, TestProps {
-    id: keyof T | string;
+    id: NestedKeys<T>;
     field?: string;
     label?: string;
     tooltip?: string;
@@ -65,8 +65,8 @@ export interface TableRef {
 export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
     columns: Array<TableColumn<T>>;
     data: T[];
-    keyProperty?: keyof T;
-    groupProperty?: keyof T;
+    keyProperty?: NestedKeys<T>;
+    groupProperty?: NestedKeys<T>;
     groupRenderer?: (key: AnyObject) => ReactElement;
     emptyDisplay?: ReactElement;
     /**
@@ -93,7 +93,7 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
     onScroll?: (firstItem: number) => void;
     canExpand?: (record: T) => boolean;
     children?: (record: T) => Elements<AnyObject>;
-    onFilter?: (id: keyof T | string, value?: AnyObject) => void;
+    onFilter?: (id: NestedKeys<T> | string, value?: AnyObject) => void;
     total?: number;
     onLoadMore?: (lastIndex?: number) => void;
 }