React函数组件中如何用左右箭头调整Ant Design表格列顺序

核心思路是通过React状态管理columns数组，Ant Design Table的列配置是受控的，修改状态后Table会自动重新渲染更新列顺序。以下是具体实现方案：

1. 把静态列转为状态变量 #

用useState将原本固定的columns数组转为可修改的状态，确保列顺序变化能触发组件更新：

import { useState, useMemo } from 'react';
import { Table, CaretLeftOutlined, CaretRightOutlined } from 'antd';

// 初始列配置（提取为常量，避免重复创建）
const initialColumns = [
  {
    dataIndex: 'country',
    title: 'COUNTRY',
    width: '10%',
    ellipsis: true
  },
  {
    dataIndex: 'market_name',
    title: 'MARKET',
    width: '15%',
    ellipsis: true
  },
  {
    dataIndex: 'product_name',
    title: 'PRODUCT',
    width: '20%',
    ellipsis: true
  }
];

const YourTableComponent = ({ newDataSource, rowSelection, rowClick, vt }) => {
  const [columns, setColumns] = useState(initialColumns);
  // ...后续逻辑
};

2. 实现列移动逻辑 #

编写左移、右移函数，通过数组元素交换改变列顺序，同时处理边界条件（第一列不能左移，最后一列不能右移）：

// 左移指定索引的列
const moveColumnLeft = (index) => {
  if (index === 0) return; // 第一列无法左移
  const newColumns = [...columns];
  // 交换当前列与前一列的位置
  [newColumns[index], newColumns[index - 1]] = [newColumns[index - 1], newColumns[index]];
  setColumns(newColumns);
};

// 右移指定索引的列
const moveColumnRight = (index) => {
  if (index === columns.length - 1) return; // 最后一列无法右移
  const newColumns = [...columns];
  // 交换当前列与后一列的位置
  [newColumns[index], newColumns[index + 1]] = [newColumns[index + 1], newColumns[index]];
  setColumns(newColumns);
};

3. 改造表头渲染 #

在列的title中动态生成箭头按钮，绑定移动函数，同时根据列位置隐藏无效箭头：

// 渲染带箭头的表头元素
const renderColumnTitle = (title, index) => (
  <p style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: '8px' }}>
    {/* 非第一列显示左箭头 */}
    {index > 0 && (
      <CaretLeftOutlined 
        onClick={() => moveColumnLeft(index)} 
        style={{ cursor: 'pointer', color: '#1890ff' }} 
      />
    )}
    <span>{title}</span>
    {/* 非最后一列显示右箭头 */}
    {index < columns.length - 1 && (
      <CaretRightOutlined 
        onClick={() => moveColumnRight(index)} 
        style={{ cursor: 'pointer', color: '#1890ff', marginLeft: 'auto' }} 
      />
    )}
  </p>
);

// 用useMemo缓存列配置，避免不必要的重新渲染
const renderedColumns = useMemo(() => {
  return columns.map((col, index) => ({
    ...col,
    title: renderColumnTitle(col.title, index)
  }));
}, [columns]);

完整组件代码 #

整合所有逻辑后的完整函数组件：

import { useState, useMemo } from 'react';
import { Table, CaretLeftOutlined, CaretRightOutlined } from 'antd';

const initialColumns = [
  {
    dataIndex: 'country',
    title: 'COUNTRY',
    width: '10%',
    ellipsis: true
  },
  {
    dataIndex: 'market_name',
    title: 'MARKET',
    width: '15%',
    ellipsis: true
  },
  {
    dataIndex: 'product_name',
    title: 'PRODUCT',
    width: '20%',
    ellipsis: true
  }
];

const YourTableComponent = ({ newDataSource, rowSelection, rowClick, vt }) => {
  const [columns, setColumns] = useState(initialColumns);

  const moveColumnLeft = (index) => {
    if (index === 0) return;
    const newColumns = [...columns];
    [newColumns[index], newColumns[index - 1]] = [newColumns[index - 1], newColumns[index]];
    setColumns(newColumns);
  };

  const moveColumnRight = (index) => {
    if (index === columns.length - 1) return;
    const newColumns = [...columns];
    [newColumns[index], newColumns[index + 1]] = [newColumns[index + 1], newColumns[index]];
    setColumns(newColumns);
  };

  const renderColumnTitle = (title, index) => (
    <p style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: '8px' }}>
      {index > 0 && (
        <CaretLeftOutlined 
          onClick={() => moveColumnLeft(index)} 
          style={{ cursor: 'pointer', color: '#1890ff' }} 
        />
      )}
      <span>{title}</span>
      {index < columns.length - 1 && (
        <CaretRightOutlined 
          onClick={() => moveColumnRight(index)} 
          style={{ cursor: 'pointer', color: '#1890ff', marginLeft: 'auto' }} 
        />
      )}
    </p>
  );

  const renderedColumns = useMemo(() => {
    return columns.map((col, index) => ({
      ...col,
      title: renderColumnTitle(col.title, index)
    }));
  }, [columns]);

  return (
    <Table
      columns={renderedColumns}
      style={{ marginTop: 8, height: 500 }}
      pagination={false}
      dataSource={newDataSource}
      onRow={(record) => ({
        onClick: () => rowClick(record)
      })}
      rowSelection={rowSelection}
      size="small"
      components={vt}
      scroll={{ y: 440, x: 1450 }}
      sticky
      rowKey={(row) => row.id}
      rowClassName={(record) => !record.enabled && 'disabled-row'}
    />
  );
};

export default YourTableComponent;

关键说明 #

• 受控列配置：Ant Design Table的columns是受控属性，修改状态数组即可触发列顺序更新。
• 边界防护：通过索引判断避免无效操作，提升用户体验。
• 性能优化：用useMemo缓存列配置，减少不必要的DOM重渲染。

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