@ant-design/pro-components 3.0.2-0 → 3.1.1-0

package/es/table/Table.js

@@ -1,28 +1,19 @@
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["rowKey", "tableClassName", "defaultClassName", "action", "tableColumn", "type", "pagination", "rowSelection", "size", "defaultSize", "tableStyle", "toolbarDom", "hideToolbar", "searchNode", "style", "cardProps", "alertDom", "name", "onSortChange", "onFilterChange", "options", "isLightFilter", "className", "cardBordered", "editableUtils", "getRowKey", "tableRef"],
-  _excluded2 = ["cardBordered", "request", "className", "params", "defaultData", "headerTitle", "postData", "ghost", "pagination", "actionRef", "columns", "toolBarRender", "optionsRender", "onLoad", "onRequestError", "style", "cardProps", "tableStyle", "tableClassName", "options", "search", "name", "onLoadingChange", "rowSelection", "beforeSearchSubmit", "tableAlertRender", "defaultClassName", "formRef", "type", "columnEmptyText", "toolbar", "rowKey", "manualRequest", "polling", "tooltip", "revalidateOnFocus", "searchFormRender"];
+import { useControlledState } from '@rc-component/util';
 import { ConfigProvider, Table } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import isEmpty from 'lodash-es/isEmpty';
 import isEqual from 'lodash-es/isEqual';
-import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import ProCard from "../card";
 import ValueTypeToComponent from "../field/ValueTypeToComponent";
 import ProForm, { GridContext } from "../form";
 import ProConfigContext, { ProConfigProvider, proTheme, useIntl } from "../provider";
-import { ErrorBoundary, editableRowByKey, omitUndefined, recordKeyToString, stringify, useDeepCompareEffect, useDeepCompareEffectDebounce, useEditableArray, useMountMergeState } from "../utils";
+import { editableRowByKey, ErrorBoundary, omitUndefined, recordKeyToString, stringify, useDeepCompareEffect, useDeepCompareEffectDebounce, useEditableArray, useRefFunction } from "../utils";
 import Alert from "./components/Alert";
-import FormRender from "./components/Form";
-import Toolbar from "./components/ToolBar";
 import { Container, TableContext } from "./Store/Provide";
 import { useStyle } from "./style";
+import { TableSearch } from "./TableSearch";
+import { TableToolbar } from "./TableToolbar";
 import useFetchData from "./useFetchData";
 import { flattenColumns, genColumnKey, getServerFilterResult, getServerSorterResult, isBordered, mergePagination, parseServerDefaultColumnConfig, useActionType } from "./utils";
 import { columnSort } from "./utils/columnSort";
@@ -31,454 +22,349 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function TableRender(props) {
-  var rowKey = props.rowKey,
-    tableClassName = props.tableClassName,
-    defaultClassName = props.defaultClassName,
-    action = props.action,
-    tableColumns = props.tableColumn,
-    type = props.type,
-    pagination = props.pagination,
-    rowSelection = props.rowSelection,
-    size = props.size,
-    defaultSize = props.defaultSize,
-    tableStyle = props.tableStyle,
-    toolbarDom = props.toolbarDom,
-    hideToolbar = props.hideToolbar,
-    searchNode = props.searchNode,
-    style = props.style,
-    propsCardProps = props.cardProps,
-    alertDom = props.alertDom,
-    name = props.name,
-    onSortChange = props.onSortChange,
-    onFilterChange = props.onFilterChange,
-    options = props.options,
-    isLightFilter = props.isLightFilter,
-    className = props.className,
-    cardBordered = props.cardBordered,
-    editableUtils = props.editableUtils,
-    getRowKey = props.getRowKey,
-    tableRef = props.tableRef,
-    rest = _objectWithoutProperties(props, _excluded);
-  var counter = useContext(TableContext);
-
-  /** 需要遍历一下，不然不支持嵌套表格 */
-  var columns = useMemo(function () {
-    var loopFilter = function loopFilter(column) {
-      return column.map(function (item) {
-        // 删掉不应该显示的
-        var columnKey = genColumnKey(item.key, item.index);
-        var config = counter.columnsMap[columnKey];
-        if (config && config.show === false) {
-          return false;
-        }
-        if (item.children) {
-          return _objectSpread(_objectSpread({}, item), {}, {
-            children: loopFilter(item.children)
-          });
-        }
-        return item;
-      }).filter(Boolean);
+function getEditableDataSource({
+  dataSource,
+  editableUtils,
+  pagination,
+  getRowKey,
+  childrenColumnName
+}) {
+  const baseData = Array.isArray(dataSource) ? [...dataSource] : [];
+  const newLineConfig = editableUtils?.newLineRecord;
+  const defaultValue = newLineConfig?.defaultValue;
+  if (!newLineConfig || !defaultValue) {
+    return baseData;
+  }
+  const {
+    options: newLineOptions
+  } = newLineConfig;
+  const childrenName = childrenColumnName || 'children';
+  if (newLineOptions?.parentKey) {
+    const newRow = {
+      ...defaultValue,
+      map_row_parentKey: recordKeyToString(newLineOptions.parentKey)?.toString()
     };
-    return loopFilter(tableColumns);
-  }, [counter.columnsMap, tableColumns]);
-
-  // 需要进行筛选的列
-  var useFilterColumns = useMemo(function () {
-    var _columns = flattenColumns(columns);
-    return _columns.filter(function (column) {
-      return !!column.filters;
-    });
-  }, [columns]);
-
-  /**
-   * 如果是分页的新增，总是加到最后一行
-   *
-   * @returns
-   */
-  var editableDataSource = function editableDataSource(dataSource) {
-    var _ref = editableUtils.newLineRecord || {},
-      newLineOptions = _ref.options,
-      row = _ref.defaultValue;
-    var isNewLineRecordAtTop = (newLineOptions === null || newLineOptions === void 0 ? void 0 : newLineOptions.position) === 'top';
-    if (newLineOptions !== null && newLineOptions !== void 0 && newLineOptions.parentKey) {
-      var _recordKeyToString, _props$expandable;
-      var actionProps = {
-        data: dataSource,
-        getRowKey: getRowKey,
-        row: _objectSpread(_objectSpread({}, row), {}, {
-          map_row_parentKey: (_recordKeyToString = recordKeyToString(newLineOptions.parentKey)) === null || _recordKeyToString === void 0 ? void 0 : _recordKeyToString.toString()
-        }),
-        key: newLineOptions === null || newLineOptions === void 0 ? void 0 : newLineOptions.recordKey,
-        childrenColumnName: ((_props$expandable = props.expandable) === null || _props$expandable === void 0 ? void 0 : _props$expandable.childrenColumnName) || 'children'
-      };
-      return editableRowByKey(actionProps, isNewLineRecordAtTop ? 'top' : 'update');
-    }
-    if (isNewLineRecordAtTop) {
-      return [row].concat(_toConsumableArray(action.dataSource));
-    }
-    // 如果有分页的功能，我们加到这一页的末尾
-    if (pagination && pagination !== null && pagination !== void 0 && pagination.current && pagination !== null && pagination !== void 0 && pagination.pageSize) {
-      var newDataSource = _toConsumableArray(action.dataSource);
-      if ((pagination === null || pagination === void 0 ? void 0 : pagination.pageSize) > newDataSource.length) {
-        newDataSource.push(row);
-        return newDataSource;
-      }
-      newDataSource.splice((pagination === null || pagination === void 0 ? void 0 : pagination.current) * (pagination === null || pagination === void 0 ? void 0 : pagination.pageSize) - 1, 0, row);
-      return newDataSource;
-    }
-    return [].concat(_toConsumableArray(action.dataSource), [row]);
-  };
-  var getTableProps = function getTableProps() {
-    return _objectSpread(_objectSpread({}, rest), {}, {
-      size: size,
-      rowSelection: rowSelection === false ? undefined : rowSelection,
-      className: tableClassName,
-      style: tableStyle,
-      columns: columns,
-      loading: action.loading,
-      dataSource: editableUtils.newLineRecord ? editableDataSource(action.dataSource) : action.dataSource,
-      pagination: pagination,
-      onChange: function onChange(changePagination, filters, sorter, extra) {
-        var _rest$onChange;
-        (_rest$onChange = rest.onChange) === null || _rest$onChange === void 0 || _rest$onChange.call(rest, changePagination, filters, sorter, extra);
-
-        // 传递服务端筛选数据
-        var serverFilter = getServerFilterResult(filters, useFilterColumns);
-        onFilterChange(omitUndefined(serverFilter));
-
-        // 传递服务端排序数据
-        var serverSorter = getServerSorterResult(sorter);
-        onSortChange(omitUndefined(serverSorter));
-      }
-    });
-  };
-
-  /**
-   * 是否需要 card 来包裹
-   */
-  var notNeedCardDom = useMemo(function () {
-    if (props.search === false && !props.headerTitle && props.toolBarRender === false) {
-      return true;
+    const actionProps = {
+      data: baseData,
+      getRowKey,
+      row: newRow,
+      key: newLineOptions?.recordKey ?? getRowKey(newRow, -1),
+      childrenColumnName: childrenName
+    };
+    return editableRowByKey(actionProps, newLineOptions?.position === 'top' ? 'top' : 'update');
+  }
+  if (newLineOptions?.position === 'top') {
+    return [defaultValue, ...baseData];
+  }
+  const pageConfig = pagination && typeof pagination === 'object' ? pagination : undefined;
+  if (pageConfig?.current && pageConfig?.pageSize) {
+    if (pageConfig.pageSize > baseData.length) {
+      baseData.push(defaultValue);
+      return baseData;
     }
-    return false;
-  }, []);
-
-  /** 默认的 table dom，如果是编辑模式，外面还要包个 form */
-  var baseTableDom = /*#__PURE__*/_jsx(GridContext.Provider, {
-    value: {
-      grid: false,
-      colProps: undefined,
-      rowProps: undefined
-    },
-    children: /*#__PURE__*/_jsx(Table, _objectSpread(_objectSpread({}, getTableProps()), {}, {
-      rowKey: rowKey,
-      ref: tableRef
-    }))
-  });
-
-  /** 自定义的 render */
-  var tableDom = props.tableViewRender ? props.tableViewRender(_objectSpread(_objectSpread({}, getTableProps()), {}, {
-    rowSelection: rowSelection !== false ? rowSelection : undefined
-  }), baseTableDom) : baseTableDom;
+    const insertIndex = pageConfig.current * pageConfig.pageSize - 1;
+    baseData.splice(insertIndex, 0, defaultValue);
+    return baseData;
+  }
+  baseData.push(defaultValue);
+  return baseData;
+}
+function getTableCardBodyStyle({
+  propsCardProps,
+  notNeedCardDom,
+  name,
+  hideToolbar,
+  toolbarDom
+}) {
+  // cardProps === false 或存在 name 的场景不需要额外 padding 处理
+  if (propsCardProps === false || notNeedCardDom || !!name) {
+    return {};
+  }
 
-  /**
-   * 这段代码使用了 useMemo 进行了性能优化，根据 props.editable 和 props.name 的不同情况，渲染不同的页面组件。
-   * 当 props.editable 为 true 并且 props.name 不存在时，渲染一个带有表单和工具栏的页面组件，否则只渲染工具栏和表格组件。
-   * renderContent 函数会在 alertDom、props.loading、props.editable、tableDom、toolbarDom 发生变化时重新执行。
-   * */
-  var tableContentDom = useMemo(function () {
-    if (props.editable && !props.name) {
-      var _props$editable, _props$editable2, _props$editable3;
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [toolbarDom, alertDom, /*#__PURE__*/_createElement(ProForm, _objectSpread(_objectSpread({}, (_props$editable = props.editable) === null || _props$editable === void 0 ? void 0 : _props$editable.formProps), {}, {
-          formRef: (_props$editable2 = props.editable) === null || _props$editable2 === void 0 || (_props$editable2 = _props$editable2.formProps) === null || _props$editable2 === void 0 ? void 0 : _props$editable2.formRef,
-          component: false,
-          form: (_props$editable3 = props.editable) === null || _props$editable3 === void 0 ? void 0 : _props$editable3.form,
-          onValuesChange: editableUtils.onValuesChange,
-          key: "table",
-          submitter: false,
-          omitNil: false,
-          dateFormatter: props.dateFormatter
-        }), tableDom)]
-      });
-    }
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [toolbarDom, alertDom, tableDom]
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [alertDom, props.loading, !!props.editable, tableDom, toolbarDom]);
-  var cardBodyStyle = useMemo(function () {
-    if (propsCardProps === false || notNeedCardDom === true || !!props.name) return {};
-    if (hideToolbar) {
-      return {
-        padding: 0
-      };
-    }
-    if (toolbarDom) {
-      return {
-        paddingBlockStart: 0
-      };
-    }
-    if (toolbarDom && pagination === false) {
-      return {
-        paddingBlockStart: 0
-      };
-    }
-    // if (!toolbarDom)
+  // 显式隐藏 toolbar 时，统一不留 padding（避免误用 paddingBlockStart）
+  if (hideToolbar) {
     return {
       padding: 0
     };
-  }, [notNeedCardDom, pagination, props.name, propsCardProps, toolbarDom, hideToolbar]);
-
-  /** Table 区域的 dom，为了方便 render */
-  var tableAreaDom =
-  // cardProps 或者 有了name 就不需要这个padding了，不然会导致不好对齐
-  propsCardProps === false || notNeedCardDom === true || !!props.name ? tableContentDom : /*#__PURE__*/_jsx(ProCard, _objectSpread(_objectSpread({
-    ghost: props.ghost,
-    variant: isBordered('table', cardBordered) ? 'outlined' : 'borderless',
-    bodyStyle: cardBodyStyle
-  }, propsCardProps), {}, {
-    children: tableContentDom
-  }));
-  var renderTable = function renderTable() {
-    if (props.tableRender) {
-      return props.tableRender(props, tableAreaDom, {
-        toolbar: toolbarDom || undefined,
-        alert: alertDom || undefined,
-        table: tableDom || undefined
-      });
-    }
-    return tableAreaDom;
-  };
-  var proTableDom = /*#__PURE__*/_jsxs("div", {
-    className: classNames(className, _defineProperty({}, "".concat(defaultClassName, "-polling"), action.pollingLoading)),
-    style: style,
-    ref: counter.rootDomRef,
-    children: [isLightFilter ? null : searchNode, type !== 'form' && props.tableExtraRender && /*#__PURE__*/_jsx("div", {
-      className: classNames(className, "".concat(defaultClassName, "-extra")),
-      children: props.tableExtraRender(props, action.dataSource || [])
-    }), type !== 'form' && renderTable()]
-  });
+  }
 
-  // 如果不需要的全屏，ConfigProvider 没有意义
-  if (!options || !(options !== null && options !== void 0 && options.fullScreen)) {
-    return proTableDom;
+  // 有 toolbar 的场景，需要让 ProCard body 顶部与 toolbar 对齐
+  if (toolbarDom) {
+    return {
+      paddingBlockStart: 0
+    };
   }
-  return /*#__PURE__*/_jsx(ConfigProvider, {
-    getPopupContainer: function getPopupContainer() {
-      return counter.rootDomRef.current || document.body;
-    },
-    children: proTableDom
-  });
+  return {
+    padding: 0
+  };
+}
+function useRowKey({
+  rowKey,
+  name
+}) {
+  return useMemo(() => {
+    if (typeof rowKey === 'function') {
+      return rowKey;
+    }
+    return (record, index) => {
+      if (index === -1) {
+        return record?.[rowKey];
+      }
+      if (name) {
+        return index?.toString();
+      }
+      return record?.[rowKey] ?? index?.toString();
+    };
+  }, [name, rowKey]);
+}
+function useMergedPagination({
+  propsPagination,
+  action,
+  intl,
+  request,
+  type
+}) {
+  return useMemo(() => {
+    const newPropsPagination = propsPagination === false ? false : {
+      ...(propsPagination || {})
+    };
+    const pageConfig = {
+      ...action.pageInfo,
+      setPageInfo: ({
+        pageSize,
+        current
+      }) => {
+        const {
+          pageInfo
+        } = action;
+        if (pageSize === pageInfo.pageSize || pageInfo.current === 1) {
+          action.setPageInfo({
+            pageSize,
+            current
+          });
+          return;
+        }
+        if (request) action.setDataSource([]);
+        action.setPageInfo({
+          pageSize,
+          current: type === 'list' ? current : 1
+        });
+      }
+    };
+    if (request && newPropsPagination) {
+      delete newPropsPagination.onChange;
+      delete newPropsPagination.onShowSizeChange;
+    }
+    return mergePagination(newPropsPagination, pageConfig, intl);
+  }, [action, intl, propsPagination, request, type]);
+}
+function useAlertDom({
+  propsRowSelection,
+  selectedRowKeys,
+  selectedRows,
+  onCleanSelected,
+  tableAlertOptionRender,
+  tableAlertRender
+}) {
+  return useMemo(() => {
+    if (propsRowSelection === false) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Alert, {
+      selectedRowKeys: selectedRowKeys,
+      selectedRows: selectedRows,
+      onCleanSelected: onCleanSelected,
+      alertOptionRender: tableAlertOptionRender,
+      alertInfoRender: tableAlertRender,
+      alwaysShowAlert: propsRowSelection?.alwaysShowAlert
+    });
+  }, [onCleanSelected, propsRowSelection, selectedRowKeys, selectedRows, tableAlertOptionRender, tableAlertRender]);
 }
-var emptyObj = {};
-var ProTable = function ProTable(props) {
-  var _props$expandable2;
-  var cardBordered = props.cardBordered,
-    request = props.request,
-    propsClassName = props.className,
-    _props$params = props.params,
-    params = _props$params === void 0 ? emptyObj : _props$params,
-    defaultData = props.defaultData,
-    headerTitle = props.headerTitle,
-    postData = props.postData,
-    ghost = props.ghost,
-    propsPagination = props.pagination,
-    propsActionRef = props.actionRef,
-    _props$columns = props.columns,
-    propsColumns = _props$columns === void 0 ? [] : _props$columns,
-    toolBarRender = props.toolBarRender,
-    optionsRender = props.optionsRender,
-    onLoad = props.onLoad,
-    onRequestError = props.onRequestError,
-    style = props.style,
-    cardProps = props.cardProps,
-    tableStyle = props.tableStyle,
-    tableClassName = props.tableClassName,
-    options = props.options,
-    search = props.search,
-    isEditorTable = props.name,
-    onLoadingChange = props.onLoadingChange,
-    _props$rowSelection = props.rowSelection,
-    propsRowSelection = _props$rowSelection === void 0 ? false : _props$rowSelection,
-    beforeSearchSubmit = props.beforeSearchSubmit,
-    tableAlertRender = props.tableAlertRender,
-    defaultClassName = props.defaultClassName,
-    propRef = props.formRef,
-    _props$type = props.type,
-    type = _props$type === void 0 ? 'table' : _props$type,
-    _props$columnEmptyTex = props.columnEmptyText,
-    columnEmptyText = _props$columnEmptyTex === void 0 ? '-' : _props$columnEmptyTex,
-    toolbar = props.toolbar,
-    rowKey = props.rowKey,
-    manualRequest = props.manualRequest,
-    polling = props.polling,
-    tooltip = props.tooltip,
-    _props$revalidateOnFo = props.revalidateOnFocus,
-    revalidateOnFocus = _props$revalidateOnFo === void 0 ? false : _props$revalidateOnFo,
-    searchFormRender = props.searchFormRender,
-    rest = _objectWithoutProperties(props, _excluded2);
-  var _useStyle = useStyle(props.defaultClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var className = classNames(defaultClassName, propsClassName, hashId);
+const emptyObj = {};
+const ProTable = props => {
+  const {
+    cardBordered,
+    request,
+    className: propsClassName,
+    params = emptyObj,
+    defaultData,
+    headerTitle,
+    postData,
+    ghost,
+    pagination: propsPagination,
+    actionRef: propsActionRef,
+    toolBarRender,
+    optionsRender,
+    onLoad,
+    onRequestError,
+    style,
+    cardProps,
+    tableStyle,
+    tableClassName,
+    options,
+    search,
+    name: isEditorTable,
+    onLoadingChange,
+    rowSelection: propsRowSelection = false,
+    beforeSearchSubmit,
+    tableAlertRender,
+    defaultClassName,
+    formRef: propRef,
+    type = 'table',
+    columnEmptyText = '-',
+    toolbar,
+    rowKey,
+    manualRequest,
+    polling,
+    tooltip,
+    revalidateOnFocus = false,
+    searchFormRender,
+    ...rest
+  } = props;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(props.defaultClassName);
+  const className = clsx(defaultClassName, propsClassName, hashId);
 
   /** 通用的来操作子节点的工具类 */
-  var actionRef = useRef();
+  const actionRef = useRef();
   // antd Table 实例 ref（仅用于转发 scrollTo 能力）
-  var antTableRef = useRef(null);
-  var defaultFormRef = useRef();
-  var formRef = propRef || defaultFormRef;
-  useImperativeHandle(propsActionRef, function () {
-    return actionRef.current;
-  });
+  const antTableRef = useRef(null);
+  const defaultFormRef = useRef();
+  const formRef = propRef || defaultFormRef;
+  useImperativeHandle(propsActionRef, () => actionRef.current);
 
   /** 单选多选的相关逻辑 */
-  var _useMountMergeState = useMountMergeState(propsRowSelection ? (propsRowSelection === null || propsRowSelection === void 0 ? void 0 : propsRowSelection.defaultSelectedRowKeys) || [] : undefined, {
-      value: propsRowSelection ? propsRowSelection.selectedRowKeys : undefined
-    }),
-    _useMountMergeState2 = _slicedToArray(_useMountMergeState, 2),
-    selectedRowKeys = _useMountMergeState2[0],
-    setSelectedRowKeys = _useMountMergeState2[1];
-  var _useMountMergeState3 = useMountMergeState(function () {
-      // 如果手动模式，或者 search 不存在的时候设置为 undefined
-      // undefined 就不会触发首次加载
-      if (manualRequest || search !== false) {
-        return undefined;
-      }
-      return {};
-    }),
-    _useMountMergeState4 = _slicedToArray(_useMountMergeState3, 2),
-    formSearch = _useMountMergeState4[0],
-    setFormSearch = _useMountMergeState4[1];
-  var _useMemo = useMemo(function () {
-      var _parseServerDefaultCo = parseServerDefaultColumnConfig(propsColumns),
-        sort = _parseServerDefaultCo.sort,
-        filter = _parseServerDefaultCo.filter;
-      return {
-        defaultProFilter: filter,
-        defaultProSort: sort
-      };
-    }, [propsColumns]),
-    defaultProFilter = _useMemo.defaultProFilter,
-    defaultProSort = _useMemo.defaultProSort;
-  var _useMountMergeState5 = useMountMergeState(defaultProFilter),
-    _useMountMergeState6 = _slicedToArray(_useMountMergeState5, 2),
-    proFilter = _useMountMergeState6[0],
-    setProFilter = _useMountMergeState6[1];
-  var _useMountMergeState7 = useMountMergeState(defaultProSort),
-    _useMountMergeState8 = _slicedToArray(_useMountMergeState7, 2),
-    proSort = _useMountMergeState8[0],
-    setProSort = _useMountMergeState8[1];
-  var intl = useIntl();
+  const [selectedRowKeys, setSelectedRowKeys] = useControlledState(propsRowSelection ? propsRowSelection?.defaultSelectedRowKeys || [] : undefined, propsRowSelection ? propsRowSelection.selectedRowKeys : undefined);
+  const [formSearch, setFormSearch] = useState(() => {
+    // 如果手动模式，或者 search 不存在的时候设置为 undefined
+    // undefined 就不会触发首次加载
+    if (manualRequest || search !== false) {
+      return undefined;
+    }
+    return {};
+  });
+
+  /**
+   * `actionRef.current?.reset()` 会在同一事件循环里同步调用 `action.reload()`。
+   * 由于 React state 更新是异步的，如果仅 setState，reload 可能仍读取到旧的 formSearch。
+   * 使用 ref 作为请求参数的同步来源，保证 reset/toolbar 等场景下参数与表单展示一致。
+   */
+  const formSearchRef = useRef(formSearch);
+  const setFormSearchWithRef = useRefFunction(next => {
+    const nextValue = typeof next === 'function' ? next(formSearchRef.current) : next;
+    formSearchRef.current = nextValue;
+    setFormSearch(nextValue);
+  });
+  const {
+    columns: propsColumns = [],
+    columnsState
+  } = props;
+  const {
+    defaultProFilter,
+    defaultProSort
+  } = useMemo(() => {
+    const {
+      sort,
+      filter
+    } = parseServerDefaultColumnConfig(flattenColumns(propsColumns));
+    return {
+      defaultProFilter: filter,
+      defaultProSort: sort
+    };
+  }, [propsColumns]);
+  const [proFilter, setProFilter] = useState(defaultProFilter);
+  const [proSort, setProSort] = useState(defaultProSort);
+
+  /**
+   * 只有在 proColumns 变化的时候，才会重新更新 proFilter 和 proSort
+   * 这样可以避免 columns 变化的时候，filter 和 sort 被重置
+   */
+  useDeepCompareEffect(() => {
+    setProFilter(defaultProFilter);
+    setProSort(defaultProSort);
+  }, [defaultProFilter, defaultProSort]);
+  const intl = useIntl();
 
   /** 需要初始化 不然默认可能报错 这里取了 defaultCurrent 和 current 为了保证不会重复刷新 */
-  var fetchPagination = _typeof(propsPagination) === 'object' ? propsPagination : {
+  const fetchPagination = typeof propsPagination === 'object' ? propsPagination : {
     defaultCurrent: 1,
     defaultPageSize: 20,
     pageSize: 20,
     current: 1
   };
-  var counter = useContext(TableContext);
+  const counter = useContext(TableContext);
 
   // ============================ useFetchData ============================
-  var fetchData = useMemo(function () {
+  const fetchData = useMemo(() => {
     if (!request) return undefined;
-    return /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(pageParams) {
-        var actionParams, response;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              actionParams = _objectSpread(_objectSpread(_objectSpread({}, pageParams || {}), formSearch), params); // eslint-disable-next-line no-underscore-dangle
-              delete actionParams._timestamp;
-              _context.next = 4;
-              return request(actionParams, proSort, proFilter);
-            case 4:
-              response = _context.sent;
-              return _context.abrupt("return", response);
-            case 6:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function (_x) {
-        return _ref2.apply(this, arguments);
+    return async pageParams => {
+      const actionParams = {
+        ...(pageParams || {}),
+        ...(formSearchRef.current || {}),
+        ...params
       };
-    }();
+
+      // eslint-disable-next-line no-underscore-dangle
+      delete actionParams._timestamp;
+      const response = await request(actionParams, proSort, proFilter);
+      return response;
+    };
   }, [formSearch, params, proFilter, proSort, request]);
-  var action = useFetchData(fetchData, defaultData, {
+  const action = useFetchData(fetchData, defaultData, {
     pageInfo: propsPagination === false ? false : fetchPagination,
     loading: props.loading,
     dataSource: props.dataSource,
     onDataSourceChange: props.onDataSourceChange,
-    onLoad: onLoad,
-    onLoadingChange: onLoadingChange,
-    onRequestError: onRequestError,
-    postData: postData,
-    revalidateOnFocus: revalidateOnFocus,
+    onLoad,
+    onLoadingChange,
+    onRequestError,
+    postData,
+    revalidateOnFocus,
     manual: formSearch === undefined,
-    polling: polling,
+    polling,
     effects: [stringify(params), stringify(formSearch), stringify(proFilter), stringify(proSort)],
     debounceTime: props.debounceTime,
-    onPageInfoChange: function onPageInfoChange(pageInfo) {
-      var _propsPagination$onCh, _propsPagination$onSh;
+    onPageInfoChange: pageInfo => {
       if (!propsPagination || !fetchData) return;
 
       // 总是触发一下 onChange 和  onShowSizeChange
       // 目前只有 List 和 Table 支持分页, List 有分页的时候打断 Table 的分页
-      propsPagination === null || propsPagination === void 0 || (_propsPagination$onCh = propsPagination.onChange) === null || _propsPagination$onCh === void 0 || _propsPagination$onCh.call(propsPagination, pageInfo.current, pageInfo.pageSize);
-      propsPagination === null || propsPagination === void 0 || (_propsPagination$onSh = propsPagination.onShowSizeChange) === null || _propsPagination$onSh === void 0 || _propsPagination$onSh.call(propsPagination, pageInfo.current, pageInfo.pageSize);
+      propsPagination?.onChange?.(pageInfo.current, pageInfo.pageSize);
+      propsPagination?.onShowSizeChange?.(pageInfo.current, pageInfo.pageSize);
     }
   });
   // ============================ END ============================
 
   /** 聚焦的时候重新请求数据，这样可以保证数据都是最新的。 */
-  useEffect(function () {
-    var _props$form;
+  useEffect(() => {
     // 手动模式和 request 为空都不生效
-    if (props.manualRequest || !props.request || !revalidateOnFocus || (_props$form = props.form) !== null && _props$form !== void 0 && _props$form.ignoreRules) return;
+    if (props.manualRequest || !props.request || !revalidateOnFocus || props.form?.ignoreRules) return;
 
     // 聚焦时重新请求事件
-    var visibilitychange = function visibilitychange() {
+    const visibilitychange = () => {
       if (document.visibilityState === 'visible') {
         action.reload();
       }
     };
     document.addEventListener('visibilitychange', visibilitychange);
-    return function () {
-      return document.removeEventListener('visibilitychange', visibilitychange);
-    };
+    return () => document.removeEventListener('visibilitychange', visibilitychange);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /** SelectedRowKeys受控处理selectRows */
-  var preserveRecordsRef = React.useRef(new Map());
+  const preserveRecordsRef = React.useRef(new Map());
 
   // ============================ RowKey ============================
-  var getRowKey = React.useMemo(function () {
-    if (typeof rowKey === 'function') {
-      return rowKey;
-    }
-    return function (record, index) {
-      var _ref3;
-      if (index === -1) {
-        return record === null || record === void 0 ? void 0 : record[rowKey];
-      }
-      // 如果 props 中有name 的话，用index 来做行号，这样方便转化为 index
-      if (props.name) {
-        return index === null || index === void 0 ? void 0 : index.toString();
-      }
-      return (_ref3 = record === null || record === void 0 ? void 0 : record[rowKey]) !== null && _ref3 !== void 0 ? _ref3 : index === null || index === void 0 ? void 0 : index.toString();
-    };
-  }, [props.name, rowKey]);
-  useMemo(function () {
-    var _action$dataSource;
-    if ((_action$dataSource = action.dataSource) !== null && _action$dataSource !== void 0 && _action$dataSource.length) {
-      var keys = action.dataSource.map(function (data) {
-        var dataRowKey = getRowKey(data, -1);
+  const getRowKey = useRowKey({
+    rowKey,
+    name: props.name
+  });
+  useMemo(() => {
+    if (action.dataSource?.length) {
+      const keys = action.dataSource.map(data => {
+        const dataRowKey = getRowKey(data, -1);
         preserveRecordsRef.current.set(dataRowKey, data);
         return dataRowKey;
       });
@@ -488,44 +374,26 @@ var ProTable = function ProTable(props) {
   }, [action.dataSource, getRowKey]);
 
   /** 页面编辑的计算 */
-  var pagination = useMemo(function () {
-    var newPropsPagination = propsPagination === false ? false : _objectSpread({}, propsPagination);
-    var pageConfig = _objectSpread(_objectSpread({}, action.pageInfo), {}, {
-      setPageInfo: function setPageInfo(_ref4) {
-        var pageSize = _ref4.pageSize,
-          current = _ref4.current;
-        var pageInfo = action.pageInfo;
-
-        // pageSize 发生改变，并且你不是在第一页，切回到第一页
-        // 这样可以防止出现 跳转到一个空的数据页的问题
-        if (pageSize === pageInfo.pageSize || pageInfo.current === 1) {
-          action.setPageInfo({
-            pageSize: pageSize,
-            current: current
-          });
-          return;
-        }
+  const pagination = useMergedPagination({
+    propsPagination,
+    action,
+    intl,
+    request,
+    type
+  });
 
-        // 通过request的时候清空数据，然后刷新不然可能会导致 pageSize 没有数据多
-        if (request) action.setDataSource([]);
-        action.setPageInfo({
-          pageSize: pageSize,
-          // 目前只有 List 和 Table 支持分页, List 有分页的时候 还是使用之前的当前页码
-          current: type === 'list' ? current : 1
-        });
-      }
-    });
-    if (request && newPropsPagination) {
-      delete newPropsPagination.onChange;
-      delete newPropsPagination.onShowSizeChange;
+  // 监听 pagination 的变化，修正 pageSize
+  useDeepCompareEffect(() => {
+    if (pagination && (pagination.current !== action.pageInfo.current || pagination.pageSize !== action.pageInfo.pageSize)) {
+      action.setPageInfo({
+        current: pagination.current,
+        pageSize: pagination.pageSize
+      });
     }
-    return mergePagination(newPropsPagination, pageConfig, intl);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [propsPagination, action, intl]);
-  useDeepCompareEffect(function () {
-    var _action$pageInfo;
+  }, [pagination]);
+  useDeepCompareEffect(() => {
     // request 存在且params不为空，且已经请求过数据才需要设置。
-    if (props.request && !isEmpty(params) && action.dataSource && !isEqual(action.dataSource, defaultData) && (action === null || action === void 0 || (_action$pageInfo = action.pageInfo) === null || _action$pageInfo === void 0 ? void 0 : _action$pageInfo.current) !== 1) {
+    if (props.request && !isEmpty(params) && action.dataSource && !isEqual(action.dataSource, defaultData) && action?.pageInfo?.current !== 1) {
       action.setPageInfo({
         current: 1
       });
@@ -536,56 +404,66 @@ var ProTable = function ProTable(props) {
   // 设置 name 到 store 中，里面用了 ref ，所以不用担心直接 set
   counter.setPrefixName(props.name);
 
+  // 设置 columnsState 到 store 中（仅在受控 value 时同步，避免在仅传 onChange 时用 {} 覆盖默认 state 导致多余 onChange）
+  useEffect(() => {
+    if (columnsState?.value !== undefined) {
+      counter.setColumnsMap(columnsState.value);
+    }
+  }, [columnsState?.value]);
+
   /** 清空所有的选中项 */
-  var _onCleanSelected = useCallback(function () {
+  const onCleanSelected = useRefFunction(() => {
     if (propsRowSelection && propsRowSelection.onChange) {
       propsRowSelection.onChange([], [], {
         type: 'none'
       });
     }
     setSelectedRowKeys([]);
-  }, [propsRowSelection, setSelectedRowKeys]);
+  });
   counter.propsRef.current = props;
 
   /** 可编辑行的相关配置 */
-  var editableUtils = useEditableArray(_objectSpread(_objectSpread({}, props.editable), {}, {
+  const editableUtils = useEditableArray({
+    ...props.editable,
     tableName: props.name,
-    getRowKey: getRowKey,
-    childrenColumnName: ((_props$expandable2 = props.expandable) === null || _props$expandable2 === void 0 ? void 0 : _props$expandable2.childrenColumnName) || 'children',
+    getRowKey,
+    childrenColumnName: props.expandable?.childrenColumnName || 'children',
     dataSource: action.dataSource || [],
-    setDataSource: function setDataSource(data) {
-      var _props$editable4, _props$editable4$onVa;
-      (_props$editable4 = props.editable) === null || _props$editable4 === void 0 || (_props$editable4$onVa = _props$editable4.onValuesChange) === null || _props$editable4$onVa === void 0 || _props$editable4$onVa.call(_props$editable4, undefined, data);
+    setDataSource: data => {
+      props.editable?.onValuesChange?.(undefined, data);
       action.setDataSource(data);
     }
-  }));
+  });
 
   // ============================ Render ============================
-  var _proTheme$useToken = proTheme === null || proTheme === void 0 ? void 0 : proTheme.useToken(),
-    token = _proTheme$useToken.token;
+  const {
+    token
+  } = proTheme?.useToken();
 
   /** 绑定 action */
   useActionType(actionRef, action, {
-    fullScreen: function fullScreen() {
-      var _counter$rootDomRef;
-      if (!((_counter$rootDomRef = counter.rootDomRef) !== null && _counter$rootDomRef !== void 0 && _counter$rootDomRef.current) || !document.fullscreenEnabled) {
+    nativeElement: counter.rootDomRef?.current || undefined,
+    focus: () => {
+      // 聚焦到表格根元素
+      counter.rootDomRef?.current?.focus();
+    },
+    fullScreen: () => {
+      if (!counter.rootDomRef?.current || !document.fullscreenEnabled) {
         return;
       }
       if (document.fullscreenElement) {
         document.exitFullscreen();
       } else {
-        var _counter$rootDomRef2;
-        (_counter$rootDomRef2 = counter.rootDomRef) === null || _counter$rootDomRef2 === void 0 || _counter$rootDomRef2.current.requestFullscreen();
+        counter.rootDomRef?.current.requestFullscreen();
       }
     },
-    onCleanSelected: function onCleanSelected() {
+    onCleanSelected: () => {
       // 清空选中行
-      _onCleanSelected();
+      onCleanSelected();
     },
-    resetAll: function resetAll() {
-      var _formRef$current;
+    resetAll: () => {
       // 清空选中行
-      _onCleanSelected();
+      onCleanSelected();
 
       // 清空 toolbar 搜索
       counter.setKeyWords(undefined);
@@ -600,58 +478,61 @@ var ProTable = function ProTable(props) {
       setProSort(defaultProSort);
 
       // 重置表单
-      formRef === null || formRef === void 0 || (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.resetFields();
+      formRef?.current?.resetFields();
+
+      // 同步更新请求参数，避免 resetFields 后请求仍使用旧的 formSearch
+      const resetValues = formRef?.current?.getFieldsFormatValue?.(true) ?? formRef?.current?.getFieldsValue?.(true) ?? {};
+      const nextSearch = beforeSearchSubmit ? beforeSearchSubmit(resetValues) : resetValues;
+      setFormSearchWithRef(nextSearch ?? {});
     },
-    editableUtils: editableUtils,
-    scrollTo: function scrollTo(arg) {
-      var _current, _current$scrollTo;
-      return antTableRef === null || antTableRef === void 0 || (_current = antTableRef.current) === null || _current === void 0 || (_current$scrollTo = _current.scrollTo) === null || _current$scrollTo === void 0 ? void 0 : _current$scrollTo.call(_current, arg);
-    }
+    editableUtils,
+    scrollTo: arg => antTableRef?.current?.scrollTo?.(arg)
   });
 
   /** 同步 action */
   counter.setAction(actionRef.current);
 
   // ---------- 列计算相关 start  -----------------
-  var tableColumn = useMemo(function () {
-    var _props$expandable3;
+  const tableColumn = useMemo(() => {
+    const columnContext = {
+      counter,
+      columnEmptyText,
+      type,
+      editableUtils,
+      marginSM: token.marginSM,
+      rowKey: rowKey ?? 'id',
+      childrenColumnName: props.expandable?.childrenColumnName ?? 'children',
+      proFilter,
+      proSort
+    };
     return genProColumnToColumn({
       columns: propsColumns,
-      counter: counter,
-      columnEmptyText: columnEmptyText,
-      type: type,
-      marginSM: token.marginSM,
-      editableUtils: editableUtils,
-      rowKey: rowKey,
-      childrenColumnName: (_props$expandable3 = props.expandable) === null || _props$expandable3 === void 0 ? void 0 : _props$expandable3.childrenColumnName,
-      proFilter: proFilter,
-      proSort: proSort
-    }).sort(columnSort(counter.columnsMap));
+      context: columnContext
+    }).sort(columnSort(counter.columnsMap ?? {}));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [propsColumns, counter === null || counter === void 0 ? void 0 : counter.sortKeyColumns, counter === null || counter === void 0 ? void 0 : counter.columnsMap, columnEmptyText, type,
+  }, [propsColumns, counter?.sortKeyColumns, counter?.columnsMap, columnEmptyText, type,
   // eslint-disable-next-line react-hooks/exhaustive-deps
   editableUtils.editableKeys && editableUtils.editableKeys.join(','), proFilter, proSort]);
 
   /** Table Column 变化的时候更新一下，这个参数将会用于渲染 */
-  useDeepCompareEffectDebounce(function () {
+  useDeepCompareEffectDebounce(() => {
     if (tableColumn && tableColumn.length > 0) {
       // 重新生成key的字符串用于排序
-      var columnKeys = tableColumn.map(function (item) {
-        return genColumnKey(item.key, item.index);
-      });
+      const columnKeys = tableColumn.map(item => genColumnKey(item.key, item.index));
       counter.setSortKeyColumns(columnKeys);
     }
   }, [tableColumn], ['render', 'formItemRender'], 100);
 
   /** 同步 Pagination，支持受控的 页码 和 pageSize */
-  useDeepCompareEffect(function () {
-    var pageInfo = action.pageInfo;
-    var _ref5 = propsPagination || {},
-      _ref5$current = _ref5.current,
-      current = _ref5$current === void 0 ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.current : _ref5$current,
-      _ref5$pageSize = _ref5.pageSize,
-      pageSize = _ref5$pageSize === void 0 ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.pageSize : _ref5$pageSize;
-    if (propsPagination && (current || pageSize) && (pageSize !== (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.pageSize) || current !== (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.current))) {
+  useDeepCompareEffect(() => {
+    const {
+      pageInfo
+    } = action;
+    const {
+      current = pageInfo?.current,
+      pageSize = pageInfo?.pageSize
+    } = propsPagination || {};
+    if (propsPagination && (current || pageSize) && (pageSize !== pageInfo?.pageSize || current !== pageInfo?.current)) {
       action.setPageInfo({
         pageSize: pageSize || pageInfo.pageSize,
         current: current || pageInfo.current
@@ -660,84 +541,68 @@ var ProTable = function ProTable(props) {
   }, [propsPagination && propsPagination.pageSize, propsPagination && propsPagination.current]);
 
   /** 行选择相关的问题 */
-  var rowSelection = _objectSpread(_objectSpread({
-    selectedRowKeys: selectedRowKeys
-  }, propsRowSelection), {}, {
-    onChange: function onChange(keys, rows, info) {
+  const rowSelection = {
+    selectedRowKeys,
+    ...propsRowSelection,
+    onChange: (keys, rows, info) => {
       if (propsRowSelection && propsRowSelection.onChange) {
         propsRowSelection.onChange(keys, rows, info);
       }
       setSelectedRowKeys(keys);
     }
-  });
+  };
 
   /** 是不是 LightFilter, LightFilter 有一些特殊的处理 */
-  var isLightFilter = search !== false && (search === null || search === void 0 ? void 0 : search.filterType) === 'light';
-  var _onFormSearchSubmit = useCallback(function (values) {
+  const isLightFilter = search !== false && search?.filterType === 'light';
+  const onFormSearchSubmit = useRefFunction(values => {
     // 判断search.onSearch返回值决定是否更新formSearch
     if (options && options.search) {
-      var _options$search, _options$search$onSea;
-      var _ref6 = options.search === true ? {} : options.search,
-        _ref6$name = _ref6.name,
-        name = _ref6$name === void 0 ? 'keyword' : _ref6$name;
+      const {
+        name = 'keyword'
+      } = options.search === true ? {} : options.search;
 
       /** 如果传入的 onSearch 返回值为 false，则不要把options.search.name对应的值set到formSearch */
-      var success = (_options$search = options.search) === null || _options$search === void 0 || (_options$search$onSea = _options$search.onSearch) === null || _options$search$onSea === void 0 ? void 0 : _options$search$onSea.call(_options$search, counter.keyWords);
+      const success = options.search?.onSearch?.(counter.keyWords);
       if (success !== false) {
-        setFormSearch(_objectSpread(_objectSpread({}, values), {}, _defineProperty({}, name, counter.keyWords)));
+        setFormSearchWithRef({
+          ...values,
+          [name]: counter.keyWords
+        });
         return;
       }
     }
-    setFormSearch(values);
-  }, [counter.keyWords, options, setFormSearch]);
-  var loading = useMemo(function () {
-    if (_typeof(action.loading) === 'object') {
-      var _action$loading;
-      return ((_action$loading = action.loading) === null || _action$loading === void 0 ? void 0 : _action$loading.spinning) || false;
+    setFormSearchWithRef(values);
+  });
+  const loading = useMemo(() => {
+    if (typeof action.loading === 'object') {
+      return action.loading?.spinning || false;
     }
     return action.loading;
   }, [action.loading]);
-  var searchNode = useMemo(function () {
-    var node = search === false && type !== 'form' ? null : /*#__PURE__*/_jsx(FormRender, {
-      pagination: pagination,
-      beforeSearchSubmit: beforeSearchSubmit,
-      action: actionRef,
-      columns: propsColumns,
-      onFormSearchSubmit: function onFormSearchSubmit(values) {
-        _onFormSearchSubmit(values);
-      },
-      ghost: ghost,
-      onReset: props.onReset,
-      onSubmit: props.onSubmit,
-      loading: !!loading,
-      manualRequest: manualRequest,
-      search: search,
-      form: props.form,
-      formRef: formRef,
-      type: props.type || 'table',
-      cardBordered: props.cardBordered,
-      dateFormatter: props.dateFormatter
-    });
-    if (searchFormRender && node) {
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: searchFormRender(props, node)
-      });
-    } else {
-      return node;
-    }
-  }, [beforeSearchSubmit, formRef, ghost, loading, manualRequest, _onFormSearchSubmit, pagination, props, propsColumns, search, searchFormRender, type]);
-  var selectedRows = useMemo(function () {
-    return selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.map(function (key) {
-      var _preserveRecordsRef$c;
-      return (_preserveRecordsRef$c = preserveRecordsRef.current) === null || _preserveRecordsRef$c === void 0 ? void 0 : _preserveRecordsRef$c.get(key);
-    });
-  }, [action.dataSource, selectedRowKeys]);
-  var hideToolbar = useMemo(function () {
-    return options === false && !headerTitle && !toolBarRender && !toolbar && !isLightFilter;
-  }, [options, headerTitle, toolBarRender, toolbar, isLightFilter]);
-
-  /** 内置的工具栏 */
-  var toolbarDom = toolBarRender === false ? null : /*#__PURE__*/_jsx(Toolbar, {
+  const searchNode = /*#__PURE__*/_jsx(TableSearch, {
+    search: search,
+    type: type,
+    pagination: pagination,
+    beforeSearchSubmit: beforeSearchSubmit,
+    actionRef: actionRef,
+    columns: propsColumns,
+    onFormSearchSubmit: onFormSearchSubmit,
+    ghost: ghost,
+    onReset: props.onReset,
+    onSubmit: props.onSubmit,
+    loading: !!loading,
+    manualRequest: manualRequest,
+    form: props.form,
+    formRef: formRef,
+    cardBordered: props.cardBordered,
+    dateFormatter: props.dateFormatter,
+    searchFormRender: searchFormRender,
+    proTableProps: props
+  });
+  const selectedRows = useMemo(() => selectedRowKeys?.map(key => preserveRecordsRef.current?.get(key)), [action.dataSource, selectedRowKeys]);
+  const hideToolbar = useMemo(() => options === false && !headerTitle && !toolBarRender && !toolbar && !isLightFilter, [options, headerTitle, toolBarRender, toolbar, isLightFilter]);
+  const toolbarDom = /*#__PURE__*/_jsx(TableToolbar, {
+    toolBarRender: toolBarRender,
     headerTitle: headerTitle,
     hideToolbar: hideToolbar,
     selectedRows: selectedRows,
@@ -745,52 +610,164 @@ var ProTable = function ProTable(props) {
     tableColumn: tableColumn,
     tooltip: tooltip,
     toolbar: toolbar,
-    onFormSearchSubmit: function onFormSearchSubmit(newValues) {
-      setFormSearch(_objectSpread(_objectSpread({}, formSearch), newValues));
-    },
-    searchNode: isLightFilter ? searchNode : null,
+    isLightFilter: isLightFilter,
+    searchNode: searchNode,
     options: options,
     optionsRender: optionsRender,
     actionRef: actionRef,
-    toolBarRender: toolBarRender
+    setFormSearch: setFormSearchWithRef,
+    formSearch: formSearch
   });
-
-  /** 内置的多选操作栏 */
-  var alertDom = propsRowSelection !== false ? /*#__PURE__*/_jsx(Alert, {
-    selectedRowKeys: selectedRowKeys,
-    selectedRows: selectedRows,
-    onCleanSelected: _onCleanSelected,
-    alertOptionRender: rest.tableAlertOptionRender,
-    alertInfoRender: tableAlertRender,
-    alwaysShowAlert: propsRowSelection === null || propsRowSelection === void 0 ? void 0 : propsRowSelection.alwaysShowAlert
-  }) : null;
-  return wrapSSR( /*#__PURE__*/_jsx(TableRender, _objectSpread(_objectSpread({}, props), {}, {
-    name: isEditorTable,
-    defaultClassName: defaultClassName,
+  const alertDom = useAlertDom({
+    propsRowSelection,
+    selectedRowKeys,
+    selectedRows,
+    onCleanSelected,
+    tableAlertOptionRender: rest.tableAlertOptionRender,
+    tableAlertRender
+  });
+  const mergedDataSource = useMemo(() => {
+    return getEditableDataSource({
+      dataSource: action.dataSource,
+      editableUtils,
+      pagination,
+      getRowKey,
+      childrenColumnName: props.expandable?.childrenColumnName || 'children'
+    });
+  }, [action.dataSource, editableUtils?.newLineRecord, getRowKey, pagination, props.expandable?.childrenColumnName]);
+  const columns = useMemo(() => {
+    const loopFilter = column => {
+      return column.map(item => {
+        const columnKey = genColumnKey(item.key, item.index);
+        const config = counter.columnsMap?.[columnKey];
+        if (config && config.show === false) {
+          return false;
+        }
+        if (item.children) {
+          return {
+            ...item,
+            children: loopFilter(item.children)
+          };
+        }
+        return item;
+      }).filter(Boolean);
+    };
+    return loopFilter(tableColumn);
+  }, [counter.columnsMap, tableColumn]);
+  const useFilterColumns = useMemo(() => {
+    const _columns = flattenColumns(columns);
+    return _columns.filter(column => !!column.filters);
+  }, [columns]);
+  const onSortChange = sortConfig => {
+    if (isEqual(sortConfig, proSort)) return;
+    setProSort(sortConfig ?? {});
+  };
+  const onFilterChange = filterConfig => {
+    if (isEqual(filterConfig, proFilter)) return;
+    setProFilter(filterConfig ?? {});
+  };
+  const getTableProps = () => ({
+    ...rest,
     size: counter.tableSize,
-    onSizeChange: counter.setTableSize,
-    pagination: pagination,
-    searchNode: searchNode,
-    rowSelection: propsRowSelection !== false ? rowSelection : undefined,
-    className: className,
-    tableColumn: tableColumn,
-    isLightFilter: isLightFilter,
-    action: action,
-    alertDom: alertDom,
-    toolbarDom: toolbarDom,
-    hideToolbar: hideToolbar,
-    onSortChange: function onSortChange(sortConfig) {
-      if (isEqual(sortConfig, proSort)) return;
-      setProSort(sortConfig !== null && sortConfig !== void 0 ? sortConfig : {});
+    rowSelection: propsRowSelection === false ? undefined : rowSelection,
+    className: tableClassName,
+    style: tableStyle,
+    columns,
+    loading: action.loading,
+    dataSource: mergedDataSource,
+    pagination,
+    onChange: (changePagination, filters, sorter, extra) => {
+      rest.onChange?.(changePagination, filters, sorter, extra);
+      const serverFilter = getServerFilterResult(filters, useFilterColumns);
+      onFilterChange(omitUndefined(serverFilter));
+      const serverSorter = getServerSorterResult(sorter);
+      onSortChange(omitUndefined(serverSorter));
+    }
+  });
+  const notNeedCardDom = search === false && !headerTitle && !toolBarRender;
+  const baseTableDom = /*#__PURE__*/_jsx(GridContext.Provider, {
+    value: {
+      grid: false,
+      colProps: undefined,
+      rowProps: undefined
+    },
+    children: /*#__PURE__*/_jsx(Table, {
+      ...getTableProps(),
+      rowKey: rowKey,
+      ref: antTableRef
+    })
+  });
+  const tableDom = props.tableViewRender ? props.tableViewRender({
+    ...getTableProps(),
+    rowSelection: propsRowSelection !== false ? rowSelection : undefined
+  }, baseTableDom) : baseTableDom;
+  const tableContentDom = props.editable && !isEditorTable ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [toolbarDom, alertDom, /*#__PURE__*/_createElement(ProForm, {
+      ...props.editable.formProps,
+      formRef: props.editable.formProps?.formRef,
+      component: false,
+      form: props.editable.form,
+      onValuesChange: editableUtils.onValuesChange,
+      key: "table",
+      submitter: false,
+      omitNil: false,
+      dateFormatter: props.dateFormatter
+    }, tableDom)]
+  }) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [toolbarDom, alertDom, tableDom]
+  });
+  const cardBodyStyle = getTableCardBodyStyle({
+    propsCardProps: cardProps,
+    notNeedCardDom,
+    name: props.name,
+    hideToolbar,
+    toolbarDom
+  });
+  const tableAreaDom = cardProps === false || notNeedCardDom || !!props.name ? tableContentDom : /*#__PURE__*/_jsx(ProCard, {
+    ghost: ghost,
+    variant: isBordered('table', cardBordered) ? 'outlined' : 'borderless',
+    styles: {
+      body: {
+        ...cardBodyStyle,
+        ...(cardProps && typeof cardProps === 'object' ? cardProps.styles?.body || cardProps.bodyStyle : {})
+      },
+      ...(cardProps && typeof cardProps === 'object' && (cardProps.styles?.header || cardProps.headStyle) ? {
+        header: cardProps.styles?.header || cardProps.headStyle
+      } : {})
     },
-    onFilterChange: function onFilterChange(filterConfig) {
-      if (isEqual(filterConfig, proFilter)) return;
-      setProFilter(filterConfig !== null && filterConfig !== void 0 ? filterConfig : {});
+    ...cardProps,
+    children: tableContentDom
+  });
+  const renderTable = () => {
+    if (props.tableRender) {
+      return props.tableRender(props, tableAreaDom, {
+        toolbar: toolbarDom || undefined,
+        alert: alertDom || undefined,
+        table: tableDom || undefined
+      });
+    }
+    return tableAreaDom;
+  };
+  const proTableDom = /*#__PURE__*/_jsxs("div", {
+    className: clsx(className, {
+      [`${defaultClassName}-polling`]: action.pollingLoading
+    }),
+    style: style,
+    ref: counter.rootDomRef,
+    children: [isLightFilter ? null : searchNode, type !== 'form' && props.tableExtraRender && /*#__PURE__*/_jsx("div", {
+      className: clsx(className, `${defaultClassName}-extra`),
+      children: props.tableExtraRender(props, action.dataSource || [])
+    }), type !== 'form' && renderTable()]
+  });
+  if (!options || !options?.fullScreen) {
+    return wrapSSR(proTableDom);
+  }
+  return wrapSSR( /*#__PURE__*/_jsx(ConfigProvider, {
+    getPopupContainer: () => {
+      return counter.rootDomRef.current || document.body;
     },
-    editableUtils: editableUtils,
-    getRowKey: getRowKey,
-    tableRef: antTableRef
-  })));
+    children: proTableDom
+  }));
 };
 
 /**
@@ -798,20 +775,33 @@ var ProTable = function ProTable(props) {
  *
  * @param props
  */
-var ProviderTableContainer = function ProviderTableContainer(props) {
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var ErrorComponent = props.ErrorBoundary === false ? React.Fragment : props.ErrorBoundary || ErrorBoundary;
-  var context = useContext(ProConfigContext);
+const ProviderTableContainer = props => {
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const ErrorComponent = props.ErrorBoundary === false ? React.Fragment : props.ErrorBoundary || ErrorBoundary;
+  const context = useContext(ProConfigContext);
   return /*#__PURE__*/_jsx(Container, {
-    initValue: props,
+    initValue: {
+      ...props,
+      columnsState: props.columnsState,
+      columns: props.columns,
+      onColumnsStateChange: props.onColumnsStateChange,
+      onSizeChange: props.onSizeChange,
+      size: props.size,
+      defaultSize: props.defaultSize
+    },
     children: /*#__PURE__*/_jsx(ProConfigProvider, {
-      valueTypeMap: _objectSpread(_objectSpread({}, context.valueTypeMap), ValueTypeToComponent),
+      valueTypeMap: {
+        ...context.valueTypeMap,
+        ...ValueTypeToComponent
+      },
       needDeps: true,
       children: /*#__PURE__*/_jsx(ErrorComponent, {
-        children: /*#__PURE__*/_jsx(ProTable, _objectSpread({
-          defaultClassName: "".concat(getPrefixCls('pro-table'))
-        }, props))
+        children: /*#__PURE__*/_jsx(ProTable, {
+          defaultClassName: `${getPrefixCls('pro-table')}`,
+          ...props
+        })
       })
     })
   });