@ant-design/pro-components 3.1.12-0 → 3.1.13-0

package/lib/table/Store/Provide.js

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableContext = exports.Container = void 0;
+exports.TableProvider = exports.TableContext = exports.Container = void 0;
 var _util = require("@rc-component/util");
 var _merge = _interopRequireDefault(require("lodash-es/merge"));
 var _react = require("react");
 var _utils = require("../utils");
+var _utils2 = require("../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function useContainer(props = {}) {
   const actionRef = (0, _react.useRef)();
@@ -24,13 +25,13 @@ function useContainer(props = {}) {
   // 用于排序的数组
   const sortKeyColumns = (0, _react.useRef)([]);
   const [tableSize, setTableSizeInner] = (0, _util.useControlledState)(() => props.size || props.defaultSize || 'middle', props.size);
-  const setTableSize = (0, _react.useCallback)(updater => {
+  const setTableSize = (0, _utils2.useRefFunction)(updater => {
     setTableSizeInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
       props.onSizeChange?.(next);
       return next;
     });
-  }, [props.onSizeChange]);
+  });
 
   /** 默认全选中 */
   const defaultColumnKeyMap = (0, _react.useMemo)(() => {
@@ -77,42 +78,63 @@ function useContainer(props = {}) {
     return props.columnsState?.value || props.columnsState?.defaultValue || defaultColumnKeyMap;
   }, props.columnsState?.value);
   const onColumnsMapChange = props.columnsState?.onChange;
-  const setColumnsMap = (0, _react.useCallback)(updater => {
+  const setColumnsMap = (0, _utils2.useRefFunction)(updater => {
     setColumnsMapInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
       onColumnsMapChange?.(next);
       return next;
     });
-  }, [onColumnsMapChange]);
+  });
 
-  /**  配置或列更改时对columnsMap重新赋值 */
+  /**
+   * 配置或列更改时对 columnsMap 重新赋值。
+   *
+   * 协议（被 `tests/table/dynamic-columns-state.test.tsx#51 columnSetting
+   * columnsState.persistenceKey change` 明确锁定）：
+   *   - persistenceKey / persistenceType 切换到新键时，
+   *     - 新键 storage 中已有数据 → 用 storage 数据（含 defaultValue merge）覆盖；
+   *     - 新键 storage 中无数据 → 必须把 columnsMap 重置回 defaultColumnKeyMap，
+   *       不能保留旧键的修改痕迹。这是「切到新表/新场景应该用默认值打底」
+   *       的有意行为，不是 bug。
+   *   - defaultColumnKeyMap（依赖 props.columns）重算时同样按上述规则同步。
+   *
+   * 历史教训：曾经把 else 分支当成「覆盖用户修改」的 bug 删除，
+   * 立刻击穿上面的测试用例（rerender 切 persistenceKey 后新键应回到默认全选）。
+   * 不要再误判这是 bug。
+   */
   (0, _react.useEffect)(() => {
     const {
       persistenceType,
-      persistenceKey
+      persistenceKey,
+      defaultValue
     } = props.columnsState || {};
-    if (persistenceKey && persistenceType && typeof window !== 'undefined') {
-      /** 从持久化中读取数据 */
-      const storage = window[persistenceType];
-      try {
-        const storageValue = storage?.getItem(persistenceKey);
-        if (storageValue) {
-          if (props?.columnsState?.defaultValue) {
-            setColumnsMap((0, _merge.default)({}, props?.columnsState?.defaultValue, JSON.parse(storageValue)));
-          } else {
-            setColumnsMap(JSON.parse(storageValue));
-          }
-        } else {
-          setColumnsMap(defaultColumnKeyMap);
-        }
-      } catch (error) {
-        console.warn(error);
+    if (!persistenceKey || !persistenceType || typeof window === 'undefined') {
+      return;
+    }
+
+    /** 从持久化中读取数据 */
+    const storage = window[persistenceType];
+    try {
+      const storageValue = storage?.getItem(persistenceKey);
+      if (!storageValue) {
+        // 切到新的 persistenceKey 且 storage 中没有数据时，回退到默认值
+        // （不能保留旧键的修改痕迹，详见上方注释）
+        setColumnsMap(defaultColumnKeyMap);
+        return;
       }
+      if (defaultValue) {
+        // defaultValue 作为系统方默认配置，优先级低于用户在 storage 中的修改
+        setColumnsMap((0, _merge.default)({}, defaultValue, JSON.parse(storageValue)));
+      } else {
+        setColumnsMap(JSON.parse(storageValue));
+      }
+    } catch (error) {
+      console.warn(error);
     }
   }, [props.columnsState?.persistenceKey, props.columnsState?.persistenceType, defaultColumnKeyMap]);
 
   /** 清空一下当前的 key */
-  const clearPersistenceStorage = (0, _react.useCallback)(() => {
+  const clearPersistenceStorage = (0, _utils2.useRefFunction)(() => {
     const {
       persistenceType,
       persistenceKey
@@ -126,7 +148,7 @@ function useContainer(props = {}) {
     } catch (error) {
       console.warn(error);
     }
-  }, [props.columnsState]);
+  });
   (0, _react.useEffect)(() => {
     if (!props.columnsState?.persistenceKey || !props.columnsState?.persistenceType) {
       return;
@@ -145,48 +167,72 @@ function useContainer(props = {}) {
       clearPersistenceStorage();
     }
   }, [props.columnsState?.persistenceKey, columnsMap, props.columnsState?.persistenceType]);
-  const renderValue = {
-    action: actionRef.current,
+  /**
+   * Context value：暴露给所有 useContext(TableContext) 的消费者。
+   *
+   * 注意三点设计：
+   * 1. `action` / `prefixName` / `sortKeyColumns` 用 ES6 getter 暴露 ref 的当前值，
+   *    保证消费者每次读取都能拿到最新值（ref 写入不会触发重渲染，但读取必须实时）。
+   *    使用 getter 语法而非 Object.defineProperty，让 TS 推导出的字段类型与 runtime
+   *    行为一致（避免 IDE 类型提示停留在首次值）。
+   * 2. `setSortKeyColumns` / `setPrefixName` 对外是 mutator 函数 API，内部直接写
+   *    对应 ref，不触发重渲染。这是有意的协议，请勿改成 useState。
+   * 3. 不要把 `props.columns` 放进 context —— 所有消费者都直接从 `props.columns`
+   *    或 `columnsMap` 拿数据，加进来只会让 context value 因 columns 引用频繁变化
+   *    而触发整片消费者无意义重渲染。
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const renderValue = (0, _react.useMemo)(() => ({
     setAction: newAction => {
       actionRef.current = newAction;
     },
-    sortKeyColumns: sortKeyColumns.current,
     setSortKeyColumns: keys => {
       sortKeyColumns.current = keys;
     },
     propsRef,
     columnsMap,
     keyWords,
-    setKeyWords: k => setKeyWords(k),
+    setKeyWords,
     setTableSize,
     tableSize,
-    prefixName: prefixNameRef.current,
     setPrefixName: name => {
       prefixNameRef.current = name;
     },
     setColumnsMap,
-    columns: props.columns,
     rootDomRef,
     clearPersistenceStorage,
-    defaultColumnKeyMap
-  };
-  Object.defineProperty(renderValue, 'prefixName', {
-    get: () => prefixNameRef.current
-  });
-  Object.defineProperty(renderValue, 'sortKeyColumns', {
-    get: () => sortKeyColumns.current
-  });
-  Object.defineProperty(renderValue, 'action', {
-    get: () => actionRef.current
-  });
+    defaultColumnKeyMap,
+    get action() {
+      return actionRef.current;
+    },
+    get prefixName() {
+      return prefixNameRef.current;
+    },
+    get sortKeyColumns() {
+      return sortKeyColumns.current;
+    }
+  }),
+  // setTableSize / setColumnsMap / clearPersistenceStorage 均为 useRefFunction，引用永远稳定
+  // propsRef / rootDomRef 是 useRef，引用永远稳定，不需要加入 deps
+  // setKeyWords 是 useState setter，引用永远稳定
+  // 只有真正的 state 值变化才需要重建 context value
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [columnsMap, keyWords, tableSize, defaultColumnKeyMap]);
   return renderValue;
 }
 const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContext)({});
-const Container = props => {
+const TableProvider = props => {
   const value = useContainer(props.initValue);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContext.Provider, {
     value: value,
     children: props.children
   });
 };
-exports.Container = Container;
+
+/**
+ * @deprecated 使用 `TableProvider` 替代。`Container` 命名过于通用，与
+ * antd Card.Container / 各种 IoC Container 重名严重，已重命名为 `TableProvider`。
+ * 本别名仅用于向后兼容，将在后续主版本中移除。
+ */
+exports.TableProvider = TableProvider;
+const Container = exports.Container = TableProvider;

package/lib/table/Table.d.ts

@@ -7,7 +7,7 @@ import type { ProTableProps } from './typing';
  * @param props
  */
 declare const ProviderTableContainer: {
-    <DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = "text">(props: ProTableProps<DataType, Params, ValueType>): import("react/jsx-runtime").JSX.Element;
+    <DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = "text">(props: ProTableProps<DataType, Params, ValueType>): React.JSX.Element;
     Summary: React.FC<React.PropsWithChildren<import("@rc-component/table/lib/Footer/Summary").SummaryProps>> & {
         Row: React.FC<React.PropsWithChildren<import("@rc-component/table/lib/Footer/Row").FooterRowProps>>;
         Cell: React.FC<React.PropsWithChildren<import("@rc-component/table/lib/Footer/Cell").SummaryCellProps>>;

package/lib/table/Table.js

@@ -171,19 +171,17 @@ function useAlertDom({
   tableAlertOptionRender,
   tableAlertRender
 }) {
-  return (0, _react.useMemo)(() => {
-    if (propsRowSelection === false) {
-      return null;
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-      selectedRowKeys: selectedRowKeys,
-      selectedRows: selectedRows,
-      onCleanSelected: onCleanSelected,
-      alertOptionRender: tableAlertOptionRender,
-      alertInfoRender: tableAlertRender,
-      alwaysShowAlert: propsRowSelection?.alwaysShowAlert
-    });
-  }, [onCleanSelected, propsRowSelection, selectedRowKeys, selectedRows, tableAlertOptionRender, tableAlertRender]);
+  if (propsRowSelection === false) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+    selectedRowKeys: selectedRowKeys,
+    selectedRows: selectedRows,
+    onCleanSelected: onCleanSelected,
+    alertOptionRender: tableAlertOptionRender,
+    alertInfoRender: tableAlertRender,
+    alwaysShowAlert: propsRowSelection?.alwaysShowAlert
+  });
 }
 const emptyObj = {};
 const ProTable = props => {
@@ -301,6 +299,11 @@ const ProTable = props => {
   };
   const counter = (0, _react.useContext)(_Provide.TableContext);
 
+  // 设置 name 到 store 中，里面用了 ref ，所以不用担心直接 set
+  // 注意：必须在 render 阶段同步 set，否则首次渲染时 cellRenderToFromItem 拿不到 prefixName，
+  // 会走到非 name 分支，导致 form 字段路径错乱（详见 protable-editable-onsave-record 测试）
+  counter.setPrefixName(props.name);
+
   // ============================ useFetchData ============================
   const fetchData = (0, _react.useMemo)(() => {
     if (!request) return undefined;
@@ -314,7 +317,7 @@ const ProTable = props => {
       const response = await request(actionParams, proSort, proFilter);
       return response;
     };
-  }, [formSearch, params, proFilter, proSort, request]);
+  }, [params, proFilter, proSort, request]);
   const action = (0, _useFetchData.default)(fetchData, defaultData, {
     pageInfo: propsPagination === false ? false : fetchPagination,
     loading: props.loading,
@@ -340,20 +343,32 @@ const ProTable = props => {
   });
   // ============================ END ============================
 
-  /** 聚焦的时候重新请求数据，这样可以保证数据都是最新的。 */
+  /**
+   * 聚焦的时候重新请求数据，这样可以保证数据都是最新的。
+   *
+   * 旧实现的两个闭包陷阱：
+   *  1. effect 依赖为 `[]`，但回调里引用了 `props.manualRequest / props.request /
+   *     revalidateOnFocus / props.form?.ignoreRules / action.reload` 五个会变的值。
+   *     一旦用户运行时把 `revalidateOnFocus` 从 false 改成 true，由于 listener
+   *     是首次 render 绑定的，永远走旧的 if 拒绝；
+   *  2. `action.reload` 是 useFetchData 每次 render 重建的闭包，listener 抓到的
+   *     永远是首次 render 的旧 reload，引用旧的 pageInfo/formSearch。
+   *
+   * 修复策略：把判定条件 + reload 调用都包到 useRefFunction 里 —— ref function
+   * 引用稳定但内部读取永远是最新值。effect 依赖保持 `[]`，listener 也只绑/解绑
+   * 一次，不需要重复 add/remove。
+   */
+  const onVisibilityChange = (0, _utils.useRefFunction)(() => {
+    if (document.visibilityState !== 'visible') return;
+    if (props.manualRequest || !props.request || !revalidateOnFocus || props.form?.ignoreRules) {
+      return;
+    }
+    action.reload();
+  });
   (0, _react.useEffect)(() => {
-    // 手动模式和 request 为空都不生效
-    if (props.manualRequest || !props.request || !revalidateOnFocus || props.form?.ignoreRules) return;
-
-    // 聚焦时重新请求事件
-    const visibilitychange = () => {
-      if (document.visibilityState === 'visible') {
-        action.reload();
-      }
-    };
-    document.addEventListener('visibilitychange', visibilitychange);
-    return () => document.removeEventListener('visibilitychange', visibilitychange);
-  }, []);
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    return () => document.removeEventListener('visibilitychange', onVisibilityChange);
+  }, [onVisibilityChange]);
 
   /** SelectedRowKeys受控处理selectRows */
   const preserveRecordsRef = _react.default.useRef(new Map());
@@ -363,16 +378,14 @@ const ProTable = props => {
     rowKey,
     name: props.name
   });
-  (0, _react.useMemo)(() => {
-    if (action.dataSource?.length) {
-      const keys = action.dataSource.map(data => {
-        const dataRowKey = getRowKey(data, -1);
-        preserveRecordsRef.current.set(dataRowKey, data);
-        return dataRowKey;
-      });
-      return keys;
+  (0, _react.useEffect)(() => {
+    if (!action.dataSource?.length) {
+      return;
     }
-    return [];
+    action.dataSource.forEach(data => {
+      const dataRowKey = getRowKey(data, -1);
+      preserveRecordsRef.current.set(dataRowKey, data);
+    });
   }, [action.dataSource, getRowKey]);
 
   /** 页面编辑的计算 */
@@ -402,9 +415,6 @@ const ProTable = props => {
     }
   }, [params]);
 
-  // 设置 name 到 store 中，里面用了 ref ，所以不用担心直接 set
-  counter.setPrefixName(props.name);
-
   // 设置 columnsState 到 store 中（仅在受控 value 时同步，避免在仅传 onChange 时用 {} 覆盖默认 state 导致多余 onChange）
   (0, _react.useEffect)(() => {
     if (columnsState?.value !== undefined) {
@@ -427,6 +437,7 @@ const ProTable = props => {
   const editableUtils = (0, _utils.useEditableArray)({
     ...props.editable,
     tableName: props.name,
+    dateFormatter: props.editable?.dateFormatter ?? props.dateFormatter,
     getRowKey,
     childrenColumnName: props.expandable?.childrenColumnName || 'children',
     dataSource: action.dataSource || [],
@@ -510,7 +521,7 @@ const ProTable = props => {
       columns: propsColumns,
       context: columnContext
     }).sort((0, _columnSort.columnSort)(counter.columnsMap ?? {}));
-  }, [propsColumns, counter?.sortKeyColumns, counter?.columnsMap, columnEmptyText, type, editableUtils.editableKeys && editableUtils.editableKeys.join(','), proFilter, proSort]);
+  }, [propsColumns, counter?.sortKeyColumns, counter?.columnsMap, columnEmptyText, type, editableUtils.editableKeys?.join(','), proFilter, proSort]);
 
   /** Table Column 变化的时候更新一下，这个参数将会用于渲染 */
   (0, _utils.useDeepCompareEffectDebounce)(() => {
@@ -539,18 +550,22 @@ const ProTable = props => {
   }, [propsPagination && propsPagination.pageSize, propsPagination && propsPagination.current]);
 
   /** 行选择相关的问题 */
-  const rowSelection = {
-    selectedRowKeys,
-    ...propsRowSelection,
-    onChange: (keys, rows, info) => {
-      if (propsRowSelection && propsRowSelection.onChange) {
-        propsRowSelection.onChange(keys, rows, info);
-      }
-      setSelectedRowKeys(keys);
+  const handleRowSelectionChange = (0, _react.useCallback)((keys, rows, info) => {
+    if (propsRowSelection && propsRowSelection.onChange) {
+      propsRowSelection.onChange(keys, rows, info);
     }
-  };
+    setSelectedRowKeys(keys);
+  }, [propsRowSelection, setSelectedRowKeys]);
+  const rowSelection = (0, _react.useMemo)(() => {
+    if (propsRowSelection === false) return undefined;
+    return {
+      selectedRowKeys,
+      ...propsRowSelection,
+      onChange: handleRowSelectionChange
+    };
+  }, [handleRowSelectionChange, propsRowSelection, selectedRowKeys]);
 
-  /** 是不是 LightFilter, LightFilter 有一些特殊的处理 */
+  /** LightFilter（轻量筛选）时工具栏把 search 插到左侧 */
   const isLightFilter = search !== false && search?.filterType === 'light';
   const onFormSearchSubmit = (0, _utils.useRefFunction)(values => {
     // 判断search.onSearch返回值决定是否更新formSearch
@@ -656,49 +671,60 @@ const ProTable = props => {
     const _columns = (0, _utils2.flattenColumns)(columns);
     return _columns.filter(column => !!column.filters);
   }, [columns]);
-  const onSortChange = sortConfig => {
+  const onSortChange = (0, _react.useCallback)(sortConfig => {
     if ((0, _isEqual.default)(sortConfig, proSort)) return;
     setProSort(sortConfig ?? {});
-  };
-  const onFilterChange = filterConfig => {
+  }, [proSort]);
+  const onFilterChange = (0, _react.useCallback)(filterConfig => {
     if ((0, _isEqual.default)(filterConfig, proFilter)) return;
     setProFilter(filterConfig ?? {});
-  };
-  const getTableProps = () => ({
-    ...rest,
+  }, [proFilter]);
+  const handleTableChange = (0, _react.useCallback)((changePagination, filters, sorter, extra) => {
+    rest.onChange?.(changePagination, filters, sorter, extra);
+    const serverFilter = (0, _utils2.getServerFilterResult)(filters, useFilterColumns);
+    onFilterChange((0, _utils.omitUndefined)(serverFilter));
+    const serverSorter = (0, _utils2.getServerSorterResult)(sorter);
+    onSortChange((0, _utils.omitUndefined)(serverSorter));
+  }, [onFilterChange, onSortChange, rest.onChange, useFilterColumns]);
+
+  /** 拆分 memo：仅当对应维度变化时更新引用；合并结果仍受 `...rest` 引用变化影响（父组件每次 render 常为新的 rest 对象） */
+  const tableLayoutProps = (0, _react.useMemo)(() => ({
     size: counter.tableSize,
-    rowSelection: propsRowSelection === false ? undefined : rowSelection,
     className: tableClassName,
-    style: tableStyle,
-    columns,
+    style: tableStyle
+  }), [counter.tableSize, tableClassName, tableStyle]);
+  const tableDataProps = (0, _react.useMemo)(() => ({
     loading: action.loading,
     dataSource: mergedDataSource,
-    pagination,
-    onChange: (changePagination, filters, sorter, extra) => {
-      rest.onChange?.(changePagination, filters, sorter, extra);
-      const serverFilter = (0, _utils2.getServerFilterResult)(filters, useFilterColumns);
-      onFilterChange((0, _utils.omitUndefined)(serverFilter));
-      const serverSorter = (0, _utils2.getServerSorterResult)(sorter);
-      onSortChange((0, _utils.omitUndefined)(serverSorter));
-    }
-  });
-  const notNeedCardDom = search === false && !headerTitle && !toolBarRender;
-  const baseTableDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.GridContext.Provider, {
+    pagination
+  }), [action.loading, mergedDataSource, pagination]);
+  const tableColumnInteractionProps = (0, _react.useMemo)(() => ({
+    columns,
+    rowSelection,
+    onChange: handleTableChange
+  }), [columns, rowSelection, handleTableChange]);
+  const mergedTableProps = (0, _react.useMemo)(() => ({
+    ...rest,
+    ...tableLayoutProps,
+    ...tableDataProps,
+    ...tableColumnInteractionProps
+  }), [rest, tableLayoutProps, tableDataProps, tableColumnInteractionProps]);
+  const notNeedCardDom = search === false && hideToolbar;
+  const getBaseTableDom = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.GridContext.Provider, {
     value: {
       grid: false,
       colProps: undefined,
       rowProps: undefined
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Table, {
-      ...getTableProps(),
+      ...mergedTableProps,
       rowKey: rowKey,
       ref: antTableRef
     })
   });
   const tableDom = props.tableViewRender ? props.tableViewRender({
-    ...getTableProps(),
-    rowSelection: propsRowSelection !== false ? rowSelection : undefined
-  }, baseTableDom) : baseTableDom;
+    ...mergedTableProps
+  }, getBaseTableDom) : getBaseTableDom();
   const tableContentDom = props.editable && !isEditorTable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [toolbarDom, alertDom, /*#__PURE__*/(0, _react.createElement)(_form.default, {
       ...props.editable.formProps,

package/lib/table/TableSearch.js

@@ -1,12 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableSearch = TableSearch;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _Form = _interopRequireDefault(require("./components/Form"));
 var _jsxRuntime = require("react/jsx-runtime");
 function TableSearch(props) {
@@ -30,32 +29,30 @@ function TableSearch(props) {
     searchFormRender,
     proTableProps
   } = props;
-  return (0, _react.useMemo)(() => {
-    const node = search === false && type !== 'form' ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.default, {
-      pagination: pagination,
-      beforeSearchSubmit: beforeSearchSubmit,
-      action: actionRef,
-      columns: columns,
-      onFormSearchSubmit: values => {
-        onFormSearchSubmit(values);
-      },
-      ghost: ghost,
-      onReset: onReset,
-      onSubmit: onSubmit,
-      loading: loading,
-      manualRequest: manualRequest,
-      search: search,
-      form: form,
-      formRef: formRef,
-      type: type || 'table',
-      cardBordered: cardBordered,
-      dateFormatter: dateFormatter
+  const node = search === false && type !== 'form' ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.default, {
+    pagination: pagination,
+    beforeSearchSubmit: beforeSearchSubmit,
+    action: actionRef,
+    columns: columns,
+    onFormSearchSubmit: values => {
+      onFormSearchSubmit(values);
+    },
+    ghost: ghost,
+    onReset: onReset,
+    onSubmit: onSubmit,
+    loading: loading,
+    manualRequest: manualRequest,
+    search: search,
+    form: form,
+    formRef: formRef,
+    type: type || 'table',
+    cardBordered: cardBordered,
+    dateFormatter: dateFormatter
+  });
+  if (searchFormRender && node) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: searchFormRender(proTableProps, node)
     });
-    if (searchFormRender && node) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: searchFormRender(proTableProps, node)
-      });
-    }
-    return node;
-  }, [actionRef, beforeSearchSubmit, cardBordered, columns, dateFormatter, form, formRef, ghost, loading, manualRequest, onFormSearchSubmit, onReset, onSubmit, pagination, proTableProps, search, searchFormRender, type]);
+  }
+  return node;
 }

package/lib/table/TableToolbar.d.ts

@@ -1,3 +1,4 @@
+import type { TableColumnType } from 'antd';
 import type { Key } from 'react';
 import React from 'react';
 import type { ActionType } from '.';
@@ -8,7 +9,9 @@ export type TableToolbarProps<T extends Record<string, any>> = {
     hideToolbar: boolean;
     selectedRows: T[];
     selectedRowKeys: (string | number | Key)[] | undefined;
-    tableColumn: any[];
+    tableColumn: (TableColumnType<T> & {
+        index?: number;
+    })[];
     tooltip: ProTableProps<T, any, any>['tooltip'];
     toolbar: ProTableProps<T, any, any>['toolbar'];
     isLightFilter: boolean;

package/lib/table/TableToolbar.js

@@ -1,12 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableToolbar = TableToolbar;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _ToolBar = _interopRequireDefault(require("./components/ToolBar"));
 var _jsxRuntime = require("react/jsx-runtime");
 function TableToolbar(props) {
@@ -27,29 +26,27 @@ function TableToolbar(props) {
     setFormSearch,
     formSearch
   } = props;
-  return (0, _react.useMemo)(() => {
-    if (toolBarRender === false) {
-      return null;
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBar.default, {
-      headerTitle: headerTitle,
-      hideToolbar: hideToolbar,
-      selectedRows: selectedRows,
-      selectedRowKeys: selectedRowKeys,
-      tableColumn: tableColumn,
-      tooltip: tooltip,
-      toolbar: toolbar,
-      onFormSearchSubmit: newValues => {
-        setFormSearch({
-          ...(formSearch || {}),
-          ...newValues
-        });
-      },
-      searchNode: isLightFilter ? searchNode : null,
-      options: options,
-      optionsRender: optionsRender,
-      actionRef: actionRef,
-      toolBarRender: toolBarRender
-    });
-  }, [actionRef, formSearch, headerTitle, hideToolbar, isLightFilter, options, optionsRender, searchNode, selectedRowKeys, selectedRows, setFormSearch, tableColumn, toolBarRender, tooltip, toolbar]);
+  if (toolBarRender === false) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBar.default, {
+    headerTitle: headerTitle,
+    hideToolbar: hideToolbar,
+    selectedRows: selectedRows,
+    selectedRowKeys: selectedRowKeys,
+    tableColumn: tableColumn,
+    tooltip: tooltip,
+    toolbar: toolbar,
+    onFormSearchSubmit: newValues => {
+      setFormSearch({
+        ...(formSearch || {}),
+        ...newValues
+      });
+    },
+    searchNode: isLightFilter ? searchNode : null,
+    options: options,
+    optionsRender: optionsRender,
+    actionRef: actionRef,
+    toolBarRender: toolBarRender
+  });
 }