如何通过ConfigProvider将Antd Table表头的排序与搜索按钮移至右侧？

Antd Table没有内置配置项直接调整表头排序、筛选按钮的位置，需要通过样式覆盖实现，结合ConfigProvider可以解决样式优先级不足的问题，以下是具体实现方式：

方法一：通过ConfigProvider的Theme配置（推荐） #

利用Antd的主题配置能力，针对Table组件的表头样式进行自定义，优先级高于默认样式，无需担心全局污染：

import { ConfigProvider, Table } from 'antd';

// 自定义Table主题样式
const customTheme = {
  components: {
    Table: {
      // 调整表头单元格的布局，将内容与按钮分开
      headerCell: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingInline: '16px', // 保持默认内边距，避免布局错乱
      },
      // 调整排序按钮的间距，移除左边距，添加右边距
      sorter: {
        marginInlineStart: 0,
        marginInlineEnd: 8,
      },
      // 调整筛选按钮的间距
      filterIcon: {
        marginInlineStart: 0,
        marginInlineEnd: 8,
      },
    },
  },
};

// 在组件外层包裹ConfigProvider
function YourComponent() {
  return (
    <ConfigProvider theme={customTheme}>
      <Table
        columns={employeeColumns}
        dataSource={dataSource}
        loading={isLoading}
        rowKey={key}
        {...params}
      />
    </ConfigProvider>
  );
}

方法二：自定义className + 高优先级CSS #

如果主题配置无法满足需求，可以给Table添加自定义className，通过更具体的CSS选择器覆盖默认样式：

1. 给Table组件添加自定义类名：

<Table
  className="right-aligned-header-table"
  columns={employeeColumns}
  dataSource={dataSource}
  loading={isLoading}
  rowKey={key}
  {...params}
/>

2. 编写对应的CSS（可放在全局样式文件或组件内联样式中）：

/* 调整表头单元格布局 */
.right-aligned-header-table .ant-table-thead > tr > th {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 调整排序按钮位置 */
.right-aligned-header-table .ant-table-column-sorter {
  margin-left: 0 !important;
  margin-right: 8px;
}

/* 调整筛选按钮位置 */
.right-aligned-header-table .ant-table-filter-trigger {
  margin-left: 0 !important;
  margin-right: 8px;
}

关于样式无法覆盖的问题说明 #

直接修改ant-table类无效，通常是因为Antd默认样式的优先级更高。通过ConfigProvider的主题配置，或者添加自定义父类选择器（如上述right-aligned-header-table），可以提升自定义样式的优先级，从而覆盖默认样式。

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