@rainbow-oh/yee-c 0.12.2 → 0.13.0

package/dist/cjs/Table/demo/controlled-filter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/cjs/Table/demo/controlled-filter.js

@@ -0,0 +1,105 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Table/demo/controlled-filter.tsx
+var controlled_filter_exports = {};
+__export(controlled_filter_exports, {
+  default: () => controlled_filter_default
+});
+module.exports = __toCommonJS(controlled_filter_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var allData = [
+  { key: "1", name: "John Brown", age: 32, gender: "male" },
+  { key: "2", name: "Jim Green", age: 42, gender: "male" },
+  { key: "3", name: "Joe Black", age: 32, gender: "male" },
+  { key: "4", name: "Jon Snow", age: 42, gender: "female" },
+  { key: "5", name: "Arya Stark", age: 16, gender: "female" }
+];
+var controlled_filter_default = () => {
+  const { messageApi, messageHolder } = import_yee_c.message.useMessage();
+  const [nameKeyword, setNameKeyword] = (0, import_react.useState)("");
+  const [genders, setGenders] = (0, import_react.useState)([]);
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+      filter: {
+        searchable: true,
+        // No onFilter: no local matching, the search hits the "server".
+        filteredValue: nameKeyword
+      }
+    },
+    {
+      title: "Age",
+      dataIndex: "age",
+      key: "age"
+    },
+    {
+      title: "Gender",
+      dataIndex: "gender",
+      key: "gender",
+      filter: {
+        filterMode: "tree",
+        items: [
+          { label: "Male", key: "male" },
+          { label: "Female", key: "female" }
+        ],
+        filteredValue: genders,
+        onFilter: (value, record) => value === record.gender
+      }
+    }
+  ];
+  const handleChange = (info) => {
+    var _a, _b, _c;
+    if (info.action !== "filter")
+      return;
+    const filters = (_a = info.filters) != null ? _a : {};
+    const name = (_b = filters.name) != null ? _b : "";
+    if (name !== nameKeyword) {
+      messageApi.info(`Fetch: /api/users?name=${name}`);
+      setNameKeyword(name);
+    }
+    setGenders((_c = filters.gender) != null ? _c : []);
+  };
+  const data = allData.filter((item) => {
+    const matchName = nameKeyword ? item.name.toLowerCase().includes(nameKeyword.toLowerCase()) : true;
+    const matchGender = genders.length ? genders.includes(item.gender) : true;
+    return matchName && matchGender;
+  });
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, messageHolder, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true, style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { onClick: () => setNameKeyword("") }, "Reset name search"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { onClick: () => setGenders([]) }, "Reset gender filter")), /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Table,
+    {
+      columns,
+      dataSource: data,
+      onChange: handleChange,
+      pagination: false
+    }
+  ));
+};

package/dist/cjs/Table/hooks/useFilter.d.ts

@@ -8,12 +8,16 @@ type FilterRecord = {
     value: FilterInput;
     dataIndex: string;
 };
+export declare const isControlledFilter: (column?: ColumnProps) => boolean;
 export default function useFilter({ data, columns, }: {
     data: Array<Record<string, unknown>>;
     columns: ColumnProps[];
 }): {
     data: Record<string, unknown>[];
     filterRecords: FilterRecord[];
-    onFilter: ({ value, dataIndex }: FilterOptions) => void;
+    onFilter: ({ value, dataIndex }: FilterOptions) => {
+        data: Record<string, unknown>[];
+        filterRecords: FilterRecord[];
+    };
 };
 export {};

package/dist/cjs/Table/hooks/useFilter.js

@@ -36,17 +36,71 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/Table/hooks/useFilter.ts
 var useFilter_exports = {};
 __export(useFilter_exports, {
-  default: () => useFilter
+  default: () => useFilter,
+  isControlledFilter: () => isControlledFilter
 });
 module.exports = __toCommonJS(useFilter_exports);
 var import_react = require("react");
 var isEmptyFilterValue = (value) => value === "" || Array.isArray(value) && value.length === 0;
+var isControlledFilter = (column) => {
+  var _a;
+  return ((_a = column == null ? void 0 : column.filter) == null ? void 0 : _a.filteredValue) !== void 0;
+};
 var normalizeValue = (value) => value === null || value === void 0 ? "" : String(value).toLowerCase();
+var mergeRecords = (internalRecords, columnMap) => {
+  const controlled = [];
+  columnMap.forEach((column, dataIndex) => {
+    var _a;
+    if (!isControlledFilter(column))
+      return;
+    const value = (_a = column.filter) == null ? void 0 : _a.filteredValue;
+    if (!isEmptyFilterValue(value)) {
+      controlled.push({ dataIndex, value });
+    }
+  });
+  const merged = internalRecords.filter(
+    (record) => !isControlledFilter(columnMap.get(record.dataIndex))
+  );
+  if (!controlled.length && merged.length === internalRecords.length) {
+    return internalRecords;
+  }
+  return [...merged, ...controlled];
+};
+var applyFilters = (data, records, columnMap) => {
+  const handled = records.filter(
+    ({ dataIndex, value }) => Boolean(dataIndex) && columnMap.has(dataIndex) && !isEmptyFilterValue(value)
+  );
+  if (!handled.length) {
+    return data;
+  }
+  return data.filter((item) => {
+    return handled.every(({ dataIndex, value }) => {
+      var _a, _b;
+      const column = columnMap.get(dataIndex);
+      if (isControlledFilter(column) && !((_a = column == null ? void 0 : column.filter) == null ? void 0 : _a.onFilter)) {
+        return true;
+      }
+      const customFilter = (_b = column == null ? void 0 : column.filter) == null ? void 0 : _b.onFilter;
+      if (customFilter) {
+        return Array.isArray(value) ? value.some((filterValue) => customFilter(filterValue, item)) : customFilter(value, item);
+      }
+      const targetValue = normalizeValue(item[dataIndex]);
+      if (Array.isArray(value)) {
+        return value.some(
+          (filterValue) => targetValue === normalizeValue(filterValue)
+        );
+      }
+      return targetValue.includes(normalizeValue(value));
+    });
+  });
+};
 function useFilter({
   data,
   columns
 }) {
-  const [filterRecords, setFilterRecords] = (0, import_react.useState)([]);
+  const [internalRecords, setInternalRecords] = (0, import_react.useState)(
+    []
+  );
   const columnMap = (0, import_react.useMemo)(
     () => new Map(
       columns.flatMap(
@@ -56,52 +110,36 @@ function useFilter({
     [columns]
   );
   (0, import_react.useEffect)(() => {
-    setFilterRecords((current) => {
+    setInternalRecords((current) => {
       const next = current.filter(({ dataIndex }) => columnMap.has(dataIndex));
       return next.length === current.length ? current : next;
     });
   }, [columnMap]);
-  const onFilter = ({ value, dataIndex }) => {
-    setFilterRecords((current) => {
-      if (isEmptyFilterValue(value)) {
-        return current.filter((item) => item.dataIndex !== dataIndex);
-      }
-      const index = current.findIndex((item) => item.dataIndex === dataIndex);
-      if (index === -1) {
-        return [...current, { dataIndex, value }];
-      }
-      return current.map(
-        (item, itemIndex) => itemIndex === index ? __spreadProps(__spreadValues({}, item), { value }) : item
-      );
-    });
-  };
-  const filtered = (0, import_react.useMemo)(() => {
-    const handled = filterRecords.filter(
-      ({ dataIndex, value }) => Boolean(dataIndex) && columnMap.has(dataIndex) && !isEmptyFilterValue(value)
-    );
-    if (!handled.length) {
-      return data;
-    }
-    return data.filter((item) => {
-      return handled.every(({ dataIndex, value }) => {
-        var _a, _b;
-        const customFilter = (_b = (_a = columnMap.get(dataIndex)) == null ? void 0 : _a.filter) == null ? void 0 : _b.onFilter;
-        if (customFilter) {
-          return Array.isArray(value) ? value.some((filterValue) => customFilter(filterValue, item)) : customFilter(value, item);
-        }
-        const targetValue = normalizeValue(item[dataIndex]);
-        if (Array.isArray(value)) {
-          return value.some(
-            (filterValue) => targetValue === normalizeValue(filterValue)
-          );
-        }
-        return targetValue.includes(normalizeValue(value));
-      });
-    });
-  }, [columnMap, data, filterRecords]);
+  const activeRecords = (0, import_react.useMemo)(
+    () => mergeRecords(internalRecords, columnMap),
+    [internalRecords, columnMap]
+  );
+  const filtered = (0, import_react.useMemo)(
+    () => applyFilters(data, activeRecords, columnMap),
+    [columnMap, data, activeRecords]
+  );
+  const onFilter = (0, import_react.useCallback)(
+    ({ value, dataIndex }) => {
+      const nextInternal = isEmptyFilterValue(value) ? internalRecords.filter((item) => item.dataIndex !== dataIndex) : internalRecords.some((item) => item.dataIndex === dataIndex) ? internalRecords.map(
+        (item) => item.dataIndex === dataIndex ? __spreadProps(__spreadValues({}, item), { value }) : item
+      ) : [...internalRecords, { dataIndex, value }];
+      setInternalRecords(nextInternal);
+      const nextActive = mergeRecords(nextInternal, columnMap);
+      return {
+        data: applyFilters(data, nextActive, columnMap),
+        filterRecords: nextActive
+      };
+    },
+    [internalRecords, columnMap, data]
+  );
   return {
     data: filtered,
-    filterRecords,
+    filterRecords: activeRecords,
     onFilter
   };
 }

package/dist/cjs/Table/index.d.ts

@@ -2,7 +2,7 @@ import Column from './column';
 import Summary from './summary';
 import InternalTable from './table';
 import Head from './theader';
-export type { ColumnProps, HeaderCell, PaginationType, RowSelectionType, TableBodyComponents, TableComponents, TableProps, TableRowRendererProps, onChangeParams, } from './interface';
+export type { ColumnProps, FilterValue, HeaderCell, PaginationType, RowSelectionType, TableBodyComponents, TableComponents, TableProps, TableRowRendererProps, onChangeParams, } from './interface';
 type TableType = typeof InternalTable & {
     Column: typeof Column;
     Summary: typeof Summary;

package/dist/cjs/Table/interface.d.ts

@@ -62,11 +62,13 @@ export interface HeadCellProps extends Omit<WrapedColumnProps, 'title'> {
         [prop: string]: number;
     };
     showSorterTooltip?: boolean;
-    internalFilters?: {
-        [dataIndex: string]: boolean;
-    };
     onSort?: (dataIndex: string, sorter: any) => void;
-    onInternalFilter?: (dataIndex: string, value: string) => void;
+    onInternalFilter?: (options: {
+        dataIndex: string;
+        value: FilterValue | FilterValue[];
+        type?: 'filter' | 'search';
+        column: WrapedColumnProps;
+    }) => void;
     /**
      * `resizeKey` of the column currently being dragged, if any
      */
@@ -188,6 +190,14 @@ export interface ColumnProps {
          * Whether searchable, when items is undefined, it acts as a search component
          */
         searchable?: boolean;
+        /**
+         * Controlled filter state. When defined, this column's filter state is
+         * controlled: the dropdown echo, icon highlight and the `filters` in
+         * onChange all derive from it. With no `onFilter`, local matching is
+         * skipped entirely (server mode — filter in your onChange handler).
+         * Reset with `[]` / `''`.
+         */
+        filteredValue?: FilterValue | FilterValue[];
         /**
          * Filter icon
          */

package/dist/cjs/Table/table.js

@@ -248,6 +248,27 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     },
     [onSortInternal, onChange, pagination, current, pageSize, filters]
   );
+  const handleFilter = import_react.default.useCallback(
+    (options) => {
+      const next = onFilterInternal(options);
+      const emitted = next.filterRecords.filter(
+        (record) => record.dataIndex !== options.dataIndex
+      );
+      emitted.push({ dataIndex: options.dataIndex, value: options.value });
+      onChange == null ? void 0 : onChange({
+        pagination: pagination === false ? void 0 : { current, pageSize },
+        sorter: sorters,
+        filters: Object.fromEntries(
+          emitted.map(({ dataIndex, value }) => [dataIndex, value])
+        ),
+        // Filtered but not yet re-sorted; symmetric with handleSort, whose
+        // payload is sorted but not re-paginated.
+        currentDataSource: next.data,
+        action: "filter"
+      });
+    },
+    [onFilterInternal, onChange, pagination, current, pageSize, sorters]
+  );
   const { expandedRowKeys, onExpand } = (0, import_useExpand.default)(
     expandable,
     allKeys,
@@ -259,7 +280,6 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     onCheckAll,
     onChange: onSelectionChange
   } = (0, import_useSelection.default)({ pageData, dataSource, getRowKey, rowSelection, allKeys });
-  const prevFilterRecordsRef = (0, import_react.useRef)(filterRecords);
   const [horizontalScroll, setHorizontalScroll] = import_react.default.useState({
     left: false,
     right: false
@@ -309,29 +329,6 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
       return unchanged ? current2 : nextWidths;
     });
   }, [wrapedColumnsRef]);
-  (0, import_react.useEffect)(() => {
-    if (prevFilterRecordsRef.current === filterRecords)
-      return;
-    prevFilterRecordsRef.current = filterRecords;
-    if (!onChange)
-      return;
-    onChange({
-      pagination: pagination === false ? void 0 : { current, pageSize },
-      sorter: sorters,
-      filters,
-      currentDataSource: sortedData,
-      action: "filter"
-    });
-  }, [
-    filterRecords,
-    filters,
-    sortedData,
-    pagination,
-    current,
-    pageSize,
-    sorters,
-    onChange
-  ]);
   (0, import_react.useEffect)(() => {
     const content = contentRef.current;
     const tableElement = tableRef.current;
@@ -387,7 +384,7 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
         sorters,
         onSort: handleSort,
         onCheckAll,
-        onInternalFilter: onFilterInternal,
+        onInternalFilter: handleFilter,
         resizingKey,
         onResizeStart,
         onResizeStep

package/dist/cjs/Table/theader/cell.js

@@ -84,7 +84,6 @@ var HeadCell = (props) => {
     classNames,
     showSorterTooltip = true,
     tableActionBarShowOnHover,
-    internalFilters,
     style,
     width,
     colSpan,
@@ -112,7 +111,6 @@ var HeadCell = (props) => {
     "classNames",
     "showSorterTooltip",
     "tableActionBarShowOnHover",
-    "internalFilters",
     "style",
     "width",
     "colSpan",
@@ -190,7 +188,6 @@ var HeadCell = (props) => {
         __spreadProps(__spreadValues({}, rest), {
           filter,
           column: props,
-          internalFilters,
           onInternalFilter,
           dataIndex
         })

package/dist/cjs/Table/theader/filter.js

@@ -56,6 +56,7 @@ var areFilterValuesEqual = (a, b) => {
 };
 var hasFilterValue = (value) => Array.isArray(value) ? value.length > 0 : value !== "";
 var HeaderFilter = import_react.default.memo((props) => {
+  var _a;
   const { filter, column, getPopupContainer, onInternalFilter } = props;
   const { prefixCls } = (0, import_react.useContext)(import_table.TableCtx);
   const { locale } = (0, import_locale.useLocale)();
@@ -77,12 +78,28 @@ var HeaderFilter = import_react.default.memo((props) => {
   const [open, setOpen] = (0, import_react.useState)(false);
   const [selectNodes, setSelectNodes] = (0, import_react.useState)([]);
   const [searchValue, setSearchValue] = (0, import_react.useState)("");
+  const controlled = filter.filteredValue !== void 0;
+  (0, import_react.useEffect)(() => {
+    if (!controlled || open)
+      return;
+    const value = filter.filteredValue;
+    if (Array.isArray(value)) {
+      setSelectNodes([...value]);
+      setSearchValue("");
+    } else {
+      setSearchValue(String(value));
+      setSelectNodes([]);
+    }
+    const committed = Array.isArray(value) ? [...value] : value;
+    committedValueRef.current = committed;
+    setCommittedValue(committed);
+  }, [controlled, filter.filteredValue, open]);
   (0, import_react.useEffect)(() => {
     if (!open)
       return;
     const raf = requestAnimationFrame(() => {
-      var _a;
-      (_a = inputRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+      var _a2;
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
     });
     return () => cancelAnimationFrame(raf);
   }, [open]);
@@ -139,8 +156,8 @@ var HeaderFilter = import_react.default.memo((props) => {
     const inputValue = getStrLower(searchValue);
     const filteredItems = inputValue ? items.filter(
       (item) => {
-        var _a;
-        return (_a = getStrLower(item.label)) == null ? void 0 : _a.includes(getStrLower(searchValue));
+        var _a2;
+        return (_a2 = getStrLower(item.label)) == null ? void 0 : _a2.includes(getStrLower(searchValue));
       }
     ) : items;
     if (filterMode === "menu") {
@@ -186,7 +203,7 @@ var HeaderFilter = import_react.default.memo((props) => {
     }
     setOpen(nextOpen);
   };
-  const isFiltered = filtered != null ? filtered : hasFilterValue(committedValue);
+  const isFiltered = filtered != null ? filtered : controlled ? hasFilterValue((_a = filter.filteredValue) != null ? _a : "") : hasFilterValue(committedValue);
   const renderTrigger = () => {
     const trigger = typeof icon === "function" ? icon(isFiltered) : /* @__PURE__ */ import_react.default.createElement(
       import_Button.default,

package/dist/cjs/style/themes.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-09-14T02:29:50.905Z
+ * Generated on 2026-09-14T07:04:58.616Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/cjs/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-09-14T02:29:50.905Z
+ * Generated on 2026-09-14T07:04:58.616Z
  */
 
 /* ========== color.css ========== */

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@ declare global {
         __yee_c_version__: string;
     }
 }
-export declare const version = "0.12.2";
+export declare const version = "0.13.0";

package/dist/cjs/version.js

@@ -22,7 +22,7 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-var version = "0.12.2";
+var version = "0.13.0";
 if (typeof window !== "undefined") {
   window.__yee_c_version__ = version;
 }

package/dist/esm/Table/demo/controlled-filter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/esm/Table/demo/controlled-filter.js

@@ -0,0 +1,122 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, message, Space, Table } from "../..";
+import React, { useState } from 'react';
+var allData = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  gender: 'male'
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 42,
+  gender: 'male'
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 32,
+  gender: 'male'
+}, {
+  key: '4',
+  name: 'Jon Snow',
+  age: 42,
+  gender: 'female'
+}, {
+  key: '5',
+  name: 'Arya Stark',
+  age: 16,
+  gender: 'female'
+}];
+export default (function () {
+  var _message$useMessage = message.useMessage(),
+    messageApi = _message$useMessage.messageApi,
+    messageHolder = _message$useMessage.messageHolder;
+
+  // Server-side search: keep the keyword controlled, refetch in onChange.
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    nameKeyword = _useState2[0],
+    setNameKeyword = _useState2[1];
+
+  // Controlled local filter: the tree selection lives in the parent state.
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    genders = _useState4[0],
+    setGenders = _useState4[1];
+  var columns = [{
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    filter: {
+      searchable: true,
+      // No onFilter: no local matching, the search hits the "server".
+      filteredValue: nameKeyword
+    }
+  }, {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age'
+  }, {
+    title: 'Gender',
+    dataIndex: 'gender',
+    key: 'gender',
+    filter: {
+      filterMode: 'tree',
+      items: [{
+        label: 'Male',
+        key: 'male'
+      }, {
+        label: 'Female',
+        key: 'female'
+      }],
+      filteredValue: genders,
+      onFilter: function onFilter(value, record) {
+        return value === record.gender;
+      }
+    }
+  }];
+  var handleChange = function handleChange(info) {
+    var _info$filters, _filters$name, _filters$gender;
+    if (info.action !== 'filter') return;
+    var filters = (_info$filters = info.filters) !== null && _info$filters !== void 0 ? _info$filters : {};
+
+    // The committing column's key is always present in the payload — with its
+    // empty value on clear — so both setting and clearing are mirrored here.
+    var name = (_filters$name = filters.name) !== null && _filters$name !== void 0 ? _filters$name : '';
+    if (name !== nameKeyword) {
+      // Pretend to refetch with ?name=<keyword>.
+      messageApi.info("Fetch: /api/users?name=".concat(name));
+      setNameKeyword(name);
+    }
+    setGenders((_filters$gender = filters.gender) !== null && _filters$gender !== void 0 ? _filters$gender : []);
+  };
+  var data = allData.filter(function (item) {
+    var matchName = nameKeyword ? item.name.toLowerCase().includes(nameKeyword.toLowerCase()) : true;
+    var matchGender = genders.length ? genders.includes(item.gender) : true;
+    return matchName && matchGender;
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, messageHolder, /*#__PURE__*/React.createElement(Space, {
+    block: true,
+    style: {
+      marginBottom: 16
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setNameKeyword('');
+    }
+  }, "Reset name search"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setGenders([]);
+    }
+  }, "Reset gender filter")), /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    dataSource: data,
+    onChange: handleChange,
+    pagination: false
+  }));
+});

package/dist/esm/Table/hooks/useFilter.d.ts

@@ -8,12 +8,16 @@ type FilterRecord = {
     value: FilterInput;
     dataIndex: string;
 };
+export declare const isControlledFilter: (column?: ColumnProps) => boolean;
 export default function useFilter({ data, columns, }: {
     data: Array<Record<string, unknown>>;
     columns: ColumnProps[];
 }): {
     data: Record<string, unknown>[];
     filterRecords: FilterRecord[];
-    onFilter: ({ value, dataIndex }: FilterOptions) => void;
+    onFilter: ({ value, dataIndex }: FilterOptions) => {
+        data: Record<string, unknown>[];
+        filterRecords: FilterRecord[];
+    };
 };
 export {};