如何查看Primereact DataTable启用reorderableColumns后的列排序顺序？

要获取列重排后的标题值，你可以利用PrimeReact DataTable提供的onColumnReorder事件，该事件会在列拖拽重排完成后触发，并返回重排后的完整列配置数组。

具体实现步骤： #

1. 用状态管理列配置：将列的配置信息（包含标题）存入组件状态，方便重排后更新和获取最新数据。
2. 绑定onColumnReorder事件：在DataTable组件上绑定该事件，通过回调参数获取重排后的列数组，从中提取标题。
3. 动态渲染列：基于状态中的列配置循环渲染<Column>组件。

示例代码： #

import { useState } from 'react';
import { DataTable, Column } from 'primereact/datatable';

// 初始列配置
const initialColumns = [
  { field: 'id', header: 'ID' },
  { field: 'name', header: '名称' },
  { field: 'age', header: '年龄' }
];

const MyDataTable = ({ data }) => {
  const [columns, setColumns] = useState(initialColumns);

  // 处理列重排事件
  const handleColumnReorder = (event) => {
    // 更新列状态
    setColumns(event.columns);
    // 提取重排后的列标题
    const reorderedHeaders = event.columns.map(col => col.header);
    console.log('重排后的列标题:', reorderedHeaders);
    // 可根据需求将标题存入本地存储、传递给父组件等
  };

  return (
    <DataTable
      reorderableColumns
      value={data}
      tableStyle={{ minWidth: "50rem" }}
      onColumnReorder={handleColumnReorder}
    >
      {columns.map((col) => (
        <Column key={col.field} field={col.field} header={col.header} />
      ))}
    </DataTable>
  );
};

export default MyDataTable;

说明： #

• onColumnReorder事件的event参数中，event.columns就是重排后的列配置数组，每个元素包含header（列标题）、field等字段。
• 如果你原本使用header属性自定义表头，仍可结合此事件，只需确保列配置与表头的列顺序对应即可。

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