@react-fabric/data 1.0.0-beta.47 → 1.0.0-beta.49

package/dist/cjs/table/AddColumn.js

@@ -30,7 +30,7 @@ var AddColumn = function AddColumn(_ref) {
   var columns = _ref.columns,
     onClick = _ref.onClick;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "group font-medium w-6 flex flex-nowrap text-start items-end",
+    className: "group font-medium w-6 flex flex-nowrap text-start items-center",
     children: /*#__PURE__*/jsxRuntime.jsxs(core.Dropdown, {
       placement: "bottom-end",
       children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {

package/dist/cjs/table/ColumnFilters.js

@@ -0,0 +1,97 @@
+'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');
+
+var ListFilter = 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(new Set(filter)),
+    _useState2 = _slicedToArray(_useState, 2),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var _useFilteredList = useFilteredList.useFilteredList(list, function (item, query) {
+      var _item$id;
+      return utilities.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__*/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) {
+        var _v$id, _v$label;
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex gap-x-1 text-xs items-center",
+          children: /*#__PURE__*/jsxRuntime.jsx(form.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__*/jsxRuntime.jsx("span", {
+              className: "truncate",
+              children: (_v$label = v.label) !== null && _v$label !== void 0 ? _v$label : v
+            })
+          })
+        }, 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"
+        })
+      })
+    })]
+  });
+};
+var ColumnFilters = 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$target$value;
+        return onFilter((_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : "");
+      }
+    })]
+  });
+};
+
+exports.ColumnFilters = ColumnFilters;

package/dist/cjs/table/HeaderCell.js

@@ -2,13 +2,16 @@
 
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
+var ColumnFilters = require('./ColumnFilters.js');
 var Context = require('./Context.js');
 var types = require('./types.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var HeaderCell = function HeaderCell(_ref) {
   var id = _ref.id,
+    dataType = _ref.dataType,
     label = _ref.label,
     icon = _ref.icon,
     iconBg = _ref.iconBg,
@@ -16,14 +19,18 @@ var HeaderCell = function HeaderCell(_ref) {
     rtlFlip = _ref.rtlFlip,
     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 = Context.useTableContext(),
     startResize = _useTableContext.startResize,
     widths = _useTableContext.widths;
@@ -39,6 +46,21 @@ var HeaderCell = function HeaderCell(_ref) {
   }, [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 ? core.CoreIcons.tick : "",
+        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(id, value);
+          }
+        })
+      }, "filters"));
+    }
     if (sortable) {
       ret.push( /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
         label: "Sort ascending",
@@ -54,14 +76,23 @@ var HeaderCell = function HeaderCell(_ref) {
         }
       }, "sort-desc"));
     }
-    if (sortable && actions) {
-      ret.push( /*#__PURE__*/jsxRuntime.jsx(core.Divider, {}));
-    }
     if (actions) {
-      ret.push.apply(ret, _toConsumableArray(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(id, value);
+        }
+      }, "filters")];
     }
     return ret;
-  }, [sortable, actions]);
+  }, [sortable, actions, _onFilter, handleSort]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "none",
     "data-id": id,
@@ -104,6 +135,15 @@ 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",
+      stopPropagation: true,
+      icon: core.CoreIcons.funnelRemove,
+      onClick: function onClick() {
+        return _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",

package/dist/cjs/table/Table.js

@@ -37,6 +37,7 @@ var Table = function Table(_ref) {
     canExpand = _ref.canExpand,
     children = _ref.children,
     onSort = _ref.onSort,
+    onFilter = _ref.onFilter,
     onScroll = _ref.onScroll,
     onRowClick = _ref.onRowClick,
     onCheckedChanged = _ref.onCheckedChanged;
@@ -136,20 +137,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__*/jsxRuntime.jsx(HeaderCell.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__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
             sort: sort,
-            onSort: onSort
+            onSort: onSort,
+            onFilter: onFilter
           }), idx);
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: wrapperEnd,
           children: [(_state$end = state.end) === null || _state$end === void 0 ? void 0 : _state$end.map(function (col, idx) {
             return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
               sort: sort,
-              onSort: onSort
+              onSort: onSort,
+              onFilter: onFilter
             }), idx);
           }), hideableColumns && /*#__PURE__*/jsxRuntime.jsx(AddColumn.AddColumn, {
             onClick: onHide,
@@ -194,7 +198,7 @@ var Table = function Table(_ref) {
               })]
             })]
           }, key) : /*#__PURE__*/jsxRuntime.jsx(BodyRow.BodyRow, {
-            rowKey: key,
+            rowKey: key.toString(),
             index: index,
             checkableRows: checkableRows,
             checked: keyProperty && checkState.checked.includes(data[keyProperty]) ? 1 : 0,

package/dist/cjs/tree/TreeNode.js

@@ -19,7 +19,7 @@ var TreeNode = function TreeNode(_ref) {
     defaultLeafIcon = _ref.defaultLeafIcon,
     defaultNodeIcon = _ref.defaultNodeIcon,
     onToggle = _ref.onToggle,
-    _onClick = _ref.onClick,
+    onClick = _ref.onClick,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
     children = _ref.children,
@@ -63,7 +63,7 @@ var TreeNode = function TreeNode(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "treeitem",
     "aria-selected": node.selected,
-    className: classNames("flex flex-nowrap items-center", node.leaf ? leafClassName : nodeClassName),
+    className: classNames("flex flex-nowrap items-center", node.className, node.leaf ? leafClassName : nodeClassName),
     "data-testid": node["data-testid"],
     "data-test-value": node["data-test-value"],
     children: [filler, node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -93,10 +93,10 @@ var TreeNode = function TreeNode(_ref) {
       })
     }), !node.empty && /*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "none",
-      className: classNames("group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", (canSelect || _onClick) && "hover:bg-primary-50 cursor-pointer"),
+      className: classNames("group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", node.disabled && "text-muted opacity-65", !node.disabled && (canSelect || onClick) && "hover:bg-primary-50 cursor-pointer"),
       "data-selected": node.selected,
-      onClick: function onClick() {
-        _onClick === null || _onClick === void 0 || _onClick(node.id, node.data);
+      onClick: node.disabled ? undefined : function () {
+        onClick === null || onClick === void 0 || onClick(node.id, node.data);
         canSelect ? onSelect(node.id) : canCheck ? onChecked(node.id) : onToggle(node.id);
       },
       children: [nodeIcon && /*#__PURE__*/jsxRuntime.jsxs("div", {

package/dist/cjs/virtual/Gallery.js

@@ -85,7 +85,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     },
     estimateSize: function estimateSize() {
       return height;
-    }
+    },
+    overscan: 2
   });
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = react.useRef(0);
@@ -127,14 +128,15 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
       var _virtualItems$2, _virtualItems$slice$p;
       var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
       var lastItem = virtualItems === null || virtualItems === void 0 || (_virtualItems$slice$p = virtualItems.slice(-1).pop()) === null || _virtualItems$slice$p === void 0 ? void 0 : _virtualItems$slice$p.index;
+      var firstIndex = firstItem * columnCount;
       var lastIndex = (lastItem !== null && lastItem !== void 0 ? lastItem : 0) * columnCount + columnCount;
-      var canLoadPrevPage = firstItem !== undefined && items[firstItem * columnCount] === null;
+      var canLoadPrevPage = firstItem !== undefined && items[firstIndex] === null;
       var canLoadNextPage = lastItem !== undefined && lastIndex >= count - 1 && count < total;
       var db = utilities.debounce(onLoadMore);
       if (canLoadPrevPage) {
-        db(firstItem);
+        db(firstIndex);
       } else if (!loading && canLoadNextPage) {
-        db(lastItem + 1);
+        db(lastIndex + 1);
       }
       return function () {
         return db.cancel();
@@ -175,7 +177,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict")
+    className: classNames("area-content bg-base overflow-auto")
   }, aria), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full"),
@@ -195,12 +197,11 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
             }
           }), virtualItems.map(function (_ref3) {
             var key = _ref3.key,
-              index = _ref3.index,
-              measureElement = _ref3.measureElement;
+              index = _ref3.index;
             return /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "flex justify-start",
               "data-index": index,
-              ref: measureElement,
+              ref: virtualizer.measureElement,
               children: columnMap.map(function (col) {
                 return /*#__PURE__*/jsxRuntime.jsx("div", {
                   "data-index": index * columnCount + col,

package/dist/cjs/virtual/List.js

@@ -56,6 +56,7 @@ var _VirtualList = function _VirtualList(_ref) {
   var scrollerRef = react.useRef(null);
   var virtualizer = reactVirtual.useVirtualizer({
     count: count,
+    overscan: 2,
     horizontal: orientation === "horizontal",
     getScrollElement: function getScrollElement() {
       return scrollerRef.current;
@@ -164,7 +165,7 @@ var _VirtualList = function _VirtualList(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict")
+    className: classNames("area-content bg-base overflow-auto")
   }, aria), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),

package/dist/esm/table/AddColumn.js

@@ -30,7 +30,7 @@ var AddColumn = function AddColumn(_ref) {
   var columns = _ref.columns,
     onClick = _ref.onClick;
   return /*#__PURE__*/jsx("div", {
-    className: "group font-medium w-6 flex flex-nowrap text-start items-end",
+    className: "group font-medium w-6 flex flex-nowrap text-start items-center",
     children: /*#__PURE__*/jsxs(Dropdown, {
       placement: "bottom-end",
       children: [/*#__PURE__*/jsx(Icon, {

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,14 +1,17 @@
 'use client';
 
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { MenuItem, CoreIcons, Divider, Tooltip, Icon, DropdownTool, Menu } from '@react-fabric/core';
+import { Menu, CoreIcons, MenuItem, Divider, Tooltip, Icon, 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';
 
 var HeaderCell = function HeaderCell(_ref) {
   var id = _ref.id,
+    dataType = _ref.dataType,
     label = _ref.label,
     icon = _ref.icon,
     iconBg = _ref.iconBg,
@@ -16,14 +19,18 @@ var HeaderCell = function HeaderCell(_ref) {
     rtlFlip = _ref.rtlFlip,
     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;
@@ -39,6 +46,21 @@ var HeaderCell = function HeaderCell(_ref) {
   }, [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 ? CoreIcons.tick : "",
+        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(id, value);
+          }
+        })
+      }, "filters"));
+    }
     if (sortable) {
       ret.push( /*#__PURE__*/jsx(MenuItem, {
         label: "Sort ascending",
@@ -54,14 +76,23 @@ var HeaderCell = function HeaderCell(_ref) {
         }
       }, "sort-desc"));
     }
-    if (sortable && actions) {
-      ret.push( /*#__PURE__*/jsx(Divider, {}));
-    }
     if (actions) {
-      ret.push.apply(ret, _toConsumableArray(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(id, value);
+        }
+      }, "filters")];
     }
     return ret;
-  }, [sortable, actions]);
+  }, [sortable, actions, _onFilter, handleSort]);
   return /*#__PURE__*/jsxs("div", {
     role: "none",
     "data-id": id,
@@ -104,6 +135,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: CoreIcons.funnelRemove,
+      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

@@ -37,6 +37,7 @@ var Table = function Table(_ref) {
     canExpand = _ref.canExpand,
     children = _ref.children,
     onSort = _ref.onSort,
+    onFilter = _ref.onFilter,
     onScroll = _ref.onScroll,
     onRowClick = _ref.onRowClick,
     onCheckedChanged = _ref.onCheckedChanged;
@@ -136,20 +137,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,
@@ -194,7 +198,7 @@ var Table = function Table(_ref) {
               })]
             })]
           }, key) : /*#__PURE__*/jsx(BodyRow, {
-            rowKey: key,
+            rowKey: key.toString(),
             index: index,
             checkableRows: checkableRows,
             checked: keyProperty && checkState.checked.includes(data[keyProperty]) ? 1 : 0,

package/dist/esm/tree/TreeNode.js

@@ -19,7 +19,7 @@ var TreeNode = function TreeNode(_ref) {
     defaultLeafIcon = _ref.defaultLeafIcon,
     defaultNodeIcon = _ref.defaultNodeIcon,
     onToggle = _ref.onToggle,
-    _onClick = _ref.onClick,
+    onClick = _ref.onClick,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
     children = _ref.children,
@@ -63,7 +63,7 @@ var TreeNode = function TreeNode(_ref) {
   return /*#__PURE__*/jsxs("div", {
     role: "treeitem",
     "aria-selected": node.selected,
-    className: classNames("flex flex-nowrap items-center", node.leaf ? leafClassName : nodeClassName),
+    className: classNames("flex flex-nowrap items-center", node.className, node.leaf ? leafClassName : nodeClassName),
     "data-testid": node["data-testid"],
     "data-test-value": node["data-test-value"],
     children: [filler, node.loading && /*#__PURE__*/jsx("div", {
@@ -93,10 +93,10 @@ var TreeNode = function TreeNode(_ref) {
       })
     }), !node.empty && /*#__PURE__*/jsxs("div", {
       role: "none",
-      className: classNames("group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", (canSelect || _onClick) && "hover:bg-primary-50 cursor-pointer"),
+      className: classNames("group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", node.disabled && "text-muted opacity-65", !node.disabled && (canSelect || onClick) && "hover:bg-primary-50 cursor-pointer"),
       "data-selected": node.selected,
-      onClick: function onClick() {
-        _onClick === null || _onClick === void 0 || _onClick(node.id, node.data);
+      onClick: node.disabled ? undefined : function () {
+        onClick === null || onClick === void 0 || onClick(node.id, node.data);
         canSelect ? onSelect(node.id) : canCheck ? onChecked(node.id) : onToggle(node.id);
       },
       children: [nodeIcon && /*#__PURE__*/jsxs("div", {

package/dist/esm/virtual/Gallery.js

@@ -85,7 +85,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     },
     estimateSize: function estimateSize() {
       return height;
-    }
+    },
+    overscan: 2
   });
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = useRef(0);
@@ -127,14 +128,15 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
       var _virtualItems$2, _virtualItems$slice$p;
       var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
       var lastItem = virtualItems === null || virtualItems === void 0 || (_virtualItems$slice$p = virtualItems.slice(-1).pop()) === null || _virtualItems$slice$p === void 0 ? void 0 : _virtualItems$slice$p.index;
+      var firstIndex = firstItem * columnCount;
       var lastIndex = (lastItem !== null && lastItem !== void 0 ? lastItem : 0) * columnCount + columnCount;
-      var canLoadPrevPage = firstItem !== undefined && items[firstItem * columnCount] === null;
+      var canLoadPrevPage = firstItem !== undefined && items[firstIndex] === null;
       var canLoadNextPage = lastItem !== undefined && lastIndex >= count - 1 && count < total;
       var db = debounce(onLoadMore);
       if (canLoadPrevPage) {
-        db(firstItem);
+        db(firstIndex);
       } else if (!loading && canLoadNextPage) {
-        db(lastItem + 1);
+        db(lastIndex + 1);
       }
       return function () {
         return db.cancel();
@@ -175,7 +177,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict")
+    className: classNames("area-content bg-base overflow-auto")
   }, aria), {}, {
     children: /*#__PURE__*/jsxs("div", {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full"),
@@ -195,12 +197,11 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
             }
           }), virtualItems.map(function (_ref3) {
             var key = _ref3.key,
-              index = _ref3.index,
-              measureElement = _ref3.measureElement;
+              index = _ref3.index;
             return /*#__PURE__*/jsx("div", {
               className: "flex justify-start",
               "data-index": index,
-              ref: measureElement,
+              ref: virtualizer.measureElement,
               children: columnMap.map(function (col) {
                 return /*#__PURE__*/jsx("div", {
                   "data-index": index * columnCount + col,

package/dist/esm/virtual/List.js

@@ -56,6 +56,7 @@ var _VirtualList = function _VirtualList(_ref) {
   var scrollerRef = useRef(null);
   var virtualizer = useVirtualizer({
     count: count,
+    overscan: 2,
     horizontal: orientation === "horizontal",
     getScrollElement: function getScrollElement() {
       return scrollerRef.current;
@@ -164,7 +165,7 @@ var _VirtualList = function _VirtualList(_ref) {
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict")
+    className: classNames("area-content bg-base overflow-auto")
   }, aria), {}, {
     children: /*#__PURE__*/jsxs("div", {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),

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

@@ -0,0 +1,9 @@
+import { type TableColumn } from "./types";
+interface FilterProps {
+    type: TableColumn["dataType"];
+    onFilter: (value: AnyObject) => void;
+    list?: AnyObject[];
+    filter: AnyObject;
+}
+export declare const ColumnFilters: ({ type, list, filter, onFilter, }: FilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,2 +1,2 @@
 import { type TableColumn, type TableProps } from "./types";
-export declare const HeaderCell: ({ id, label, icon, iconBg, iconColor, rtlFlip, actions, locked, tooltip, sortable, resizable, width: _width, maxWidth, minWidth, sort, onSort, }: TableColumn & Pick<TableProps, "sort" | "onSort">) => import("react/jsx-runtime").JSX.Element;
+export declare const HeaderCell: ({ id, dataType, label, icon, iconBg, iconColor, rtlFlip, actions, locked, filter, filterable, filterOptions, tooltip, sortable, resizable, width: _width, maxWidth, minWidth, sort, onSort, onFilter, }: TableColumn & Pick<TableProps, "sort" | "onSort" | "onFilter">) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { type TableProps } from "./types";
-export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ ref, data, columns, keyProperty, groupProperty, checkableRows, initialScroll, hideableColumns, sort, loading, checked, emptyDisplay, groupRenderer, canExpand, children, onSort, onScroll, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ ref, data, columns, keyProperty, groupProperty, checkableRows, initialScroll, hideableColumns, sort, loading, checked, emptyDisplay, groupRenderer, canExpand, children, onSort, onFilter, onScroll, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -16,7 +16,8 @@ export interface TableColumn<T = KeyValue> extends CssProp, IconProps, TestProps
     resizable?: boolean;
     sortable?: boolean;
     filterable?: boolean;
-    filterList?: AnyObject[];
+    filter?: AnyObject;
+    filterOptions?: AnyObject[];
     width?: string | number;
     minWidth?: string | number;
     maxWidth?: string | number;
@@ -61,4 +62,5 @@ 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;
 }

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

@@ -15,7 +15,7 @@ export declare const useVirtualTable: <T extends KeyValue<any> = KeyValue<any>>(
     onCheckChanged?: (checked: AnyObject[]) => void;
 }) => {
     scrollerRef: import("react").RefObject<HTMLDivElement>;
-    items: import("@tanstack/virtual-core").VirtualItem<Element>[];
+    items: import("@tanstack/virtual-core").VirtualItem[];
     checkState: DataState<T>;
     getData: (index: number) => T;
     virtualizer: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;

package/dist/types/virtual/Gallery.d.ts

@@ -51,13 +51,13 @@ export interface VirtualGalleryProps<T> extends TestProps {
     /**
      * load more callback
      */
-    onLoadMore?: (page?: number) => void;
+    onLoadMore?: (lastIndex?: number) => void;
     /**
      * scroll handler
      */
     onScroll?: (top: number) => void;
 }
 export declare const VirtualGallery: {
-    <T extends KeyValue<any>>({ items, children, columns, fullWidth, maxWidth, minWidth, total, padding, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, galleryRef, ...aria }: VirtualGalleryProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends unknown>({ items, children, columns, fullWidth, maxWidth, minWidth, total, padding, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, galleryRef, ...aria }: VirtualGalleryProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/types/virtual/List.d.ts

@@ -51,13 +51,13 @@ export interface VirtualListProps<T> extends TestProps {
     /**
      * load more callback
      */
-    onLoadMore?: (page?: number) => void;
+    onLoadMore?: (lastIndex?: number) => void;
     /**
      * scroll handler
      */
     onScroll?: (top: number) => void;
 }
 export declare const VirtualList: {
-    <T extends KeyValue<any>>({ items, total, children, fullWidth, maxWidth, minWidth, padding, orientation, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, listRef, ...aria }: VirtualListProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends unknown>({ items, total, children, fullWidth, maxWidth, minWidth, padding, orientation, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, listRef, ...aria }: VirtualListProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.47",
+  "version": "1.0.0-beta.49",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,11 +35,11 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.47",
-    "@react-fabric/date": "^1.0.0-beta.47",
-    "@react-fabric/form": "^1.0.0-beta.47",
-    "@react-fabric/utilities": "^1.0.0-beta.47",
-    "@tanstack/react-virtual": "^3.8.6",
+    "@react-fabric/core": "^1.0.0-beta.49",
+    "@react-fabric/date": "^1.0.0-beta.49",
+    "@react-fabric/form": "^1.0.0-beta.49",
+    "@react-fabric/utilities": "^1.0.0-beta.49",
+    "@tanstack/react-virtual": "^3.13.9",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "memoize-one": "^6.0.0"
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "832a1bce055337127ba17c505731f419248cc15e"
+  "gitHead": "29b3ed65e9f9687d738dd7c6facdb9fedafb4219"
 }

package/src/table/AddColumn.tsx

@@ -32,7 +32,7 @@ export const AddColumn = ({
   onClick: (id: string) => void;
 }) => {
   return (
-    <div className="group font-medium w-6 flex flex-nowrap text-start items-end">
+    <div className="group font-medium w-6 flex flex-nowrap text-start items-center">
       <Dropdown placement="bottom-end">
         <Icon
           icon={CoreIcons.insert}

package/src/table/ColumnFilters.tsx

@@ -0,0 +1,105 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 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.
+ */
+
+import { Button, DropdownDismiss } from "@react-fabric/core";
+import { Checkbox, Input, Search } from "@react-fabric/form";
+import { EMPTY_ARRAY, matchString } from "@react-fabric/utilities";
+import { useState } from "react";
+import { useFilteredList } from "../hooks/useFilteredList";
+import { type TableColumn } from "./types";
+
+interface FilterProps {
+  type: TableColumn["dataType"];
+  onFilter: (value: AnyObject) => void;
+  list?: AnyObject[];
+  filter: AnyObject;
+}
+
+const ListFilter = ({
+  list = EMPTY_ARRAY,
+  filter,
+  onFilter,
+}: Partial<FilterProps>) => {
+  const [selected, setSelected] = useState<Set<string>>(new Set(filter));
+
+  const { filteredList, query, onSearch } = useFilteredList(
+    list,
+    (item, query) => {
+      return matchString(item.id ?? item, query);
+    },
+  );
+
+  return (
+    <div className="flex flex-col">
+      <div>
+        <Search autoFocus value={query} onSearch={onSearch} searchOnChange />
+      </div>
+      <div className="flex-1 overflow-auto scroll-thin">
+        {filteredList.map((v, idx) => (
+          <div key={idx} className="flex gap-x-1 text-xs items-center">
+            <Checkbox
+              checked={selected.has(v.id ?? v)}
+              onChange={(b) => {
+                const set = new Set(Array.from(selected.values()));
+                b ? set.add(v.id ?? v) : set.delete(v.id ?? v);
+                setSelected(set);
+              }}
+              label={<span className="truncate">{v.label ?? v}</span>}
+            />
+          </div>
+        ))}
+        {filteredList.length === 0 && (
+          <span className="text-muted text-xs">No items found</span>
+        )}
+      </div>
+      <div className="flex justify-end">
+        <DropdownDismiss>
+          <Button size="xs" onClick={() => onFilter?.(Array.from(selected))}>
+            Apply
+          </Button>
+        </DropdownDismiss>
+      </div>
+    </div>
+  );
+};
+
+export const ColumnFilters = ({
+  type,
+  list,
+  filter,
+  onFilter,
+}: FilterProps) => {
+  return (
+    <div className="flex flex-col min-w-[16rem]">
+      {list && <ListFilter list={list} filter={filter} onFilter={onFilter} />}
+      {!list && type === "string" && (
+        <Input
+          autoFocus
+          allowClear
+          value={filter}
+          onEnterPressed={(e: AnyObject) => onFilter(e.target.value ?? "")}
+        />
+      )}
+    </div>
+  );
+};

package/src/table/HeaderCell.tsx

@@ -22,6 +22,7 @@
  */
 
 import {
+  Button,
   CoreIcons,
   Divider,
   DropdownTool,
@@ -30,7 +31,9 @@ import {
   MenuItem,
   Tooltip,
 } from "@react-fabric/core";
+import { isEmpty } from "@react-fabric/utilities";
 import { useCallback, useMemo } from "react";
+import { ColumnFilters } from "./ColumnFilters";
 import { useTableContext } from "./Context";
 import {
   COL_DEFAULT_WIDTH,
@@ -42,6 +45,7 @@ import {
 
 export const HeaderCell = ({
   id,
+  dataType,
   label,
   icon,
   iconBg,
@@ -49,6 +53,9 @@ export const HeaderCell = ({
   rtlFlip,
   actions,
   locked,
+  filter,
+  filterable,
+  filterOptions,
   tooltip,
   sortable,
   resizable,
@@ -57,7 +64,8 @@ export const HeaderCell = ({
   minWidth,
   sort,
   onSort,
-}: TableColumn & Pick<TableProps, "sort" | "onSort">) => {
+  onFilter,
+}: TableColumn & Pick<TableProps, "sort" | "onSort" | "onFilter">) => {
   const { startResize, widths } = useTableContext();
 
   const width = useMemo(
@@ -78,7 +86,24 @@ export const HeaderCell = ({
   );
 
   const menus = useMemo(() => {
-    const ret = [];
+    let ret = [];
+    if (filterable && (dataType ?? filterOptions)) {
+      ret.push(
+        <Menu
+          key="filters"
+          label="Filter"
+          icon={filter ? CoreIcons.tick : ""}
+          trigger="click"
+        >
+          <ColumnFilters
+            type={dataType}
+            list={filterOptions}
+            filter={filter}
+            onFilter={(value) => onFilter?.(id, value)}
+          />
+        </Menu>,
+      );
+    }
     if (sortable) {
       ret.push(
         <MenuItem
@@ -95,14 +120,23 @@ export const HeaderCell = ({
         />,
       );
     }
-    if (sortable && actions) {
-      ret.push(<Divider />);
-    }
     if (actions) {
+      ret.push(<Divider key="div" />);
       ret.push(...actions);
     }
+    if (ret.length === 1) {
+      ret = [
+        <ColumnFilters
+          key="filters"
+          type={dataType}
+          list={filterOptions}
+          filter={filter}
+          onFilter={(value) => onFilter?.(id, value)}
+        />,
+      ];
+    }
     return ret;
-  }, [sortable, actions]);
+  }, [sortable, actions, onFilter, handleSort]);
 
   return (
     <div
@@ -136,6 +170,16 @@ export const HeaderCell = ({
           <Menu className="text-sm">{menus}</Menu>
         </DropdownTool>
       )}
+      {filterable && !isEmpty(filter) && (
+        <Button
+          size="sm"
+          variant="link"
+          aria-label="clear filter"
+          stopPropagation
+          icon={CoreIcons.funnelRemove}
+          onClick={() => onFilter?.(id)}
+        />
+      )}
       {resizable && (
         <div
           role="none"

package/src/table/Table.tsx

@@ -65,6 +65,7 @@ export const Table = <T extends KeyValue = KeyValue>({
   canExpand,
   children,
   onSort,
+  onFilter,
   onScroll,
   onRowClick,
   onCheckedChanged,
@@ -176,15 +177,33 @@ export const Table = <T extends KeyValue = KeyValue>({
               />
             )}
             {state.start?.map((col, idx) => (
-              <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
+              <HeaderCell
+                key={idx}
+                {...col}
+                sort={sort}
+                onSort={onSort}
+                onFilter={onFilter}
+              />
             ))}
           </div>
           {state.cols?.map((col, idx) => (
-            <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
+            <HeaderCell
+              key={idx}
+              {...col}
+              sort={sort}
+              onSort={onSort}
+              onFilter={onFilter}
+            />
           ))}
           <div className={wrapperEnd}>
             {state.end?.map((col, idx) => (
-              <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
+              <HeaderCell
+                key={idx}
+                {...col}
+                sort={sort}
+                onSort={onSort}
+                onFilter={onFilter}
+              />
             ))}
 
             {hideableColumns && (
@@ -236,7 +255,7 @@ export const Table = <T extends KeyValue = KeyValue>({
                 </div>
               ) : (
                 <BodyRow
-                  rowKey={key}
+                  rowKey={key.toString()}
                   index={index}
                   checkableRows={checkableRows}
                   checked={

package/src/table/types.ts

@@ -50,7 +50,8 @@ export interface TableColumn<T = KeyValue>
   resizable?: boolean;
   sortable?: boolean;
   filterable?: boolean;
-  filterList?: AnyObject[];
+  filter?: AnyObject;
+  filterOptions?: AnyObject[];
   width?: string | number;
   minWidth?: string | number;
   maxWidth?: string | number;
@@ -103,4 +104,6 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
 
   canExpand?: (record: T) => boolean;
   children?: (record: T) => Elements<AnyObject>;
+
+  onFilter?: (id: keyof T | string, value?: AnyObject) => void;
 }

package/src/tree/TreeNode.tsx

@@ -99,6 +99,7 @@ export const TreeNode = ({
       aria-selected={node.selected}
       className={classNames(
         "flex flex-nowrap items-center",
+        node.className,
         node.leaf ? leafClassName : nodeClassName,
       )}
       data-testid={node["data-testid"]}
@@ -145,17 +146,24 @@ export const TreeNode = ({
           className={classNames(
             "group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none",
             node.childSelected && "font-medium",
-            (canSelect || onClick) && "hover:bg-primary-50 cursor-pointer",
+            node.disabled && "text-muted opacity-65",
+            !node.disabled &&
+              (canSelect || onClick) &&
+              "hover:bg-primary-50 cursor-pointer",
           )}
           data-selected={node.selected}
-          onClick={() => {
-            onClick?.(node.id, node.data);
-            canSelect
-              ? onSelect(node.id)
-              : canCheck
-                ? onChecked(node.id)
-                : onToggle(node.id);
-          }}
+          onClick={
+            node.disabled
+              ? undefined
+              : () => {
+                  onClick?.(node.id, node.data);
+                  canSelect
+                    ? onSelect(node.id)
+                    : canCheck
+                      ? onChecked(node.id)
+                      : onToggle(node.id);
+                }
+          }
         >
           {nodeIcon && (
             <div className="flex-content w-6 self-center leading-none">

package/src/virtual/Gallery.tsx

@@ -94,7 +94,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
   /**
    * load more callback
    */
-  onLoadMore?: (page?: number) => void;
+  onLoadMore?: (lastIndex?: number) => void;
   /**
    * scroll handler
    */
@@ -103,7 +103,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
 
 const createItemList = memoize((items) => items);
 
-const _VirtualGallery = <T extends KeyValue>({
+const _VirtualGallery = <T extends AnyObject>({
   items,
   children,
   columns,
@@ -172,6 +172,7 @@ const _VirtualGallery = <T extends KeyValue>({
     count: Math.ceil(count / columnCount),
     getScrollElement: () => scrollerRef.current,
     estimateSize: () => height,
+    overscan: 2,
   });
 
   const virtualItems = virtualizer.getVirtualItems();
@@ -219,16 +220,17 @@ const _VirtualGallery = <T extends KeyValue>({
     if (onLoadMore) {
       const firstItem = virtualItems[0]?.index;
       const lastItem = virtualItems?.slice(-1).pop()?.index;
+      const firstIndex = firstItem * columnCount;
       const lastIndex = (lastItem ?? 0) * columnCount + columnCount;
       const canLoadPrevPage =
-        firstItem !== undefined && items[firstItem * columnCount] === null;
+        firstItem !== undefined && items[firstIndex] === null;
       const canLoadNextPage =
         lastItem !== undefined && lastIndex >= count - 1 && count < total;
       const db = debounce(onLoadMore);
       if (canLoadPrevPage) {
-        db(firstItem);
+        db(firstIndex);
       } else if (!loading && canLoadNextPage) {
-        db(lastItem + 1);
+        db(lastIndex + 1);
       }
       return () => db.cancel();
     }
@@ -277,9 +279,7 @@ const _VirtualGallery = <T extends KeyValue>({
     <div
       ref={scrollerRef}
       onScroll={handleScroll}
-      className={classNames(
-        "area-content bg-base overflow-auto contain-strict",
-      )}
+      className={classNames("area-content bg-base overflow-auto")}
       {...aria}
     >
       <div
@@ -306,12 +306,12 @@ const _VirtualGallery = <T extends KeyValue>({
             }}
           >
             <div style={{ height: virtualItems[0]?.start }} />
-            {virtualItems.map(({ key, index, measureElement }) => (
+            {virtualItems.map(({ key, index }) => (
               <div
                 className="flex justify-start"
                 key={key}
                 data-index={index}
-                ref={measureElement}
+                ref={virtualizer.measureElement}
               >
                 {columnMap.map((col) => (
                   <div

package/src/virtual/List.tsx

@@ -101,7 +101,7 @@ export interface VirtualListProps<T> extends TestProps {
   /**
    * load more callback
    */
-  onLoadMore?: (page?: number) => void;
+  onLoadMore?: (lastIndex?: number) => void;
   /**
    * scroll handler
    */
@@ -110,7 +110,7 @@ export interface VirtualListProps<T> extends TestProps {
 
 const createItemList = memoizeOne((items) => items);
 
-const _VirtualList = <T extends KeyValue>({
+const _VirtualList = <T extends AnyObject>({
   items,
   total = 0,
   children,
@@ -149,6 +149,7 @@ const _VirtualList = <T extends KeyValue>({
   const scrollerRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({
     count,
+    overscan: 2,
     horizontal: orientation === "horizontal",
     getScrollElement: () => scrollerRef.current,
     estimateSize: () => (orientation === "horizontal" ? width : height),
@@ -263,9 +264,7 @@ const _VirtualList = <T extends KeyValue>({
     <div
       ref={scrollerRef}
       onScroll={handleScroll}
-      className={classNames(
-        "area-content bg-base overflow-auto contain-strict",
-      )}
+      className={classNames("area-content bg-base overflow-auto")}
       {...aria}
     >
       <div