Ant Design Table(v4.xx)如何重置筛选排序至默认多列排序状态

要实现一键重置表格的筛选、搜索、排序到指定的默认多列排序状态，核心是把表格改为受控模式，手动维护列的筛选和排序状态，具体步骤如下：

1. 提取基础列配置并定义默认状态 #

先把原本的列配置抽成基础模板，再基于它生成默认的受控状态——给需要默认排序的列设置sortOrder，其他列清空筛选值和排序状态：

// 基础列配置模板
const baseColumns = [
  {
    dataIndex: "table_name",
    filterSearch: true,
    filters: [...someValues],
    sorter: {
      multiple: 2,
      compare: (a, b) => a < b ? -1 : a > b ? 1 : 0
    }
  },
  {
    dataIndex: "table_description",
    filterDropdown: ...someFunc,
  },
  {
    dataIndex: "column_name",
    filterSearch: true,
    filters: [...someValues],
    sorter: {
      multiple: 1,
      compare: (a, b) => a < b ? -1 : a > b ? 1 : 0
    }
  },
  ...moreCols,
  {
    dataIndex: "length",
    filterDropdown: ...someFunc,
    sorter: {
      compare: (a, b) => parseInt(a) - parseInt(b)
    }
  }
];

// 生成默认受控列状态：设置指定列的默认排序，清空其他筛选/排序
const getDefaultColumns = () => {
  return baseColumns.map(col => {
    const defaultConfig = { filteredValue: null, sortOrder: undefined };
    // 给需要默认排序的列设置对应值
    if (col.dataIndex === 'table_name') {
      return { ...col, ...defaultConfig, sortOrder: 'ascend' };
    }
    if (col.dataIndex === 'column_name') {
      return { ...col, ...defaultConfig, sortOrder: 'ascend' };
    }
    return { ...col, ...defaultConfig };
  });
};

2. 用状态管理受控列 #

在组件中使用useState维护当前列的状态，初始值为默认配置：

import { useState } from 'react';
import { Table, Button } from 'antd';

const YourTableComponent = () => {
  const [columns, setColumns] = useState(getDefaultColumns());

  // 重置按钮点击事件：恢复到默认列状态
  const handleReset = () => {
    setColumns(getDefaultColumns());
  };

  return (
    <div>
      <Button onClick={handleReset} style={{ marginBottom: 16 }}>重置为默认排序</Button>
      <Table
        columns={columns}
        // 补充你的表格数据源等其他属性
        dataSource={yourDataSource}
      />
    </div>
  );
};

3. 适配筛选和排序的交互更新 #

如果需要支持用户手动修改筛选、排序，还需要监听表格的onFilter和排序事件，实时更新columns状态：

// 处理筛选变化
const handleFilter = (value, dataIndex) => {
  setColumns(prevColumns => {
    return prevColumns.map(col => {
      if (col.dataIndex === dataIndex) {
        return { ...col, filteredValue: value || null };
      }
      return col;
    });
  });
};

// 处理排序变化
const handleSort = (sortOrder, dataIndex) => {
  setColumns(prevColumns => {
    return prevColumns.map(col => {
      if (col.dataIndex === dataIndex) {
        return { ...col, sortOrder };
      }
      // 多列排序模式下保留其他列的排序状态，若需单排序可将其他列sortOrder设为undefined
      return col;
    });
  });
};

// 在Table组件中绑定事件
<Table
  columns={columns}
  onFilter={handleFilter}
  onHeaderCell={(column) => ({
    onSort: (sortOrder) => handleSort(sortOrder, column.dataIndex),
  })}
  dataSource={yourDataSource}
/>

这样，点击重置按钮时，表格会完全恢复到预设的默认多列排序状态，同时清空所有筛选、搜索结果。

内容的提问来源于stack exchange，提问作者kk55