Angular中如何修改Material Table列顺序（无需额外功能）

核心逻辑 #

先从API拉取包含列配置和表格数据的JSON，再根据自定义规则调整列的排列顺序，最后将处理后的配置和数据传入Material Table组件即可。

具体实现步骤及代码示例 #

1. 明确API返回结构

假设你的API返回的JSON格式如下（包含列配置columns和表格数据data）：

{
  "columns": [
    { "field": "id", "title": "ID" },
    { "field": "name", "title": "姓名" },
    { "field": "email", "title": "邮箱" },
    { "field": "phone", "title": "电话" }
  ],
  "data": [
    { "id": 1, "name": "张三", "email": "zhangsan@example.com", "phone": "13800138000" },
    { "id": 2, "name": "李四", "email": "lisi@example.com", "phone": "13900139000" }
  ]
}

2. 编写React组件实现动态排序

import React, { useState, useEffect } from 'react';
import MaterialTable from 'material-table';

const DynamicSortableTable = () => {
  const [tableConfig, setTableConfig] = useState({ columns: [], data: [] });

  // 定义你想要的列顺序，按field值排列
  const targetColumnOrder = ['name', 'phone', 'email', 'id'];

  useEffect(() => {
    // 发起API请求获取数据
    fetch('/your-api-endpoint')
      .then(response => response.json())
      .then(rawResponse => {
        // 根据目标顺序重新排列列数组
        const sortedColumns = targetColumnOrder
          .map(field => rawResponse.columns.find(col => col.field === field))
          .filter(col => col); // 过滤掉API返回中不存在的列，避免报错

        // 更新表格配置
        setTableConfig({
          columns: sortedColumns,
          data: rawResponse.data
        });
      })
      .catch(error => console.error('加载表格数据出错:', error));
  }, []);

  return (
    <MaterialTable
      title="动态列排序表格"
      columns={tableConfig.columns}
      data={tableConfig.data}
      options={{
        // 可选：开启列拖拽功能，允许用户手动调整顺序
        draggableColumns: true
      }}
    />
  );
};

export default DynamicSortableTable;

额外说明 #

• 上述方法会保留API返回列配置中的所有原有属性（比如排序、过滤、自定义渲染器等），仅调整列的展示顺序
• 如果需要持久化用户手动调整后的列顺序，可以监听Material Table的onColumnOrderChange事件，将新顺序保存到localStorage或后端数据库，下次加载时优先使用保存的顺序

内容的提问来源于stack exchange，提问作者Hitendra Singh Tomar