如何在antd中根据数据动态生成表格列？

核心实现思路 #

• 封装动态生成列的逻辑，根据传入的数据源data的字段自动生成基础列配置
• 保留自定义列配置的入口，支持覆盖自动生成的列属性，满足个性化需求
• 兼容用户手动传入columns的场景，灵活性更高

改造后的组件代码 #

import { Table } from 'antd';

// 动态生成列的工具函数
const generateColumns = (dataSource, customColumnMap = {}) => {
  // 兼容空数据源的场景
  if (!Array.isArray(dataSource) || dataSource.length === 0) return [];

  // 取第一条数据的所有字段作为列的基础
  const fieldKeys = Object.keys(dataSource[0]);
  
  return fieldKeys.map(fieldKey => {
    // 合并用户自定义的列配置，自定义配置优先级更高
    const customConfig = customColumnMap[fieldKey] || {};
    return {
      // 默认把字段名首字母大写作为列标题，也可以根据需求自定义规则
      title: fieldKey.charAt(0).toUpperCase() + fieldKey.slice(1),
      dataIndex: fieldKey,
      key: fieldKey,
      ...customConfig
    };
  });
};

const TableContainer = (props) => {
  const { columns: manualColumns, data, loading, customColumnConfig = {} } = props;
  // 优先用用户手动传入的列配置，没有的话自动生成
  const finalColumns = manualColumns || generateColumns(data, customColumnConfig);

  return <Table columns={finalColumns} dataSource={data} loading={loading} />;
};

export default TableContainer;

使用示例 #

基础用法（完全自动生成列） #

不需要手动配置columns，组件会根据数据源自动生成列：

const Demo1 = () => {
  const data = [
    {
      key: 1,
      name: 'Jack',
      email:'jack@gmail.com',
      address: 'Dhaka'
    },
    {
      key: 2,
      name: 'Jon',
      email:'jon@gmail.com',
      address: 'Dhaka'
    }
  ];

  return <TableContainer data={data} loading={false} />;
};

带自定义列配置的用法 #

如果需要修改列标题、增加渲染逻辑、设置宽度/排序等属性，可以通过customColumnConfig传入对应字段的配置：

const Demo2 = () => {
  const data = [
    {
      key: 1,
      name: 'Jack',
      email:'jack@gmail.com',
      address: 'Dhaka'
    },
    {
      key: 2,
      name: 'Jon',
      email:'jon@gmail.com',
      address: 'Dhaka'
    }
  ];

  // 自定义列配置，key对应数据源的字段名
  const customColumnConfig = {
    name: {
      title: '用户名',
      width: 120,
      // 自定义渲染逻辑
      render: (text) => <span style={{ color: '#165DFF' }}>{text}</span>
    },
    email: {
      title: '邮箱',
      width: 200
    },
    address: {
      title: '居住地址',
      // 支持antd Table列的所有原生属性，比如开启排序
      sorter: (a, b) => a.address.localeCompare(b.address)
    }
  };

  return <TableContainer data={data} customColumnConfig={customColumnConfig} loading={false} />;
};

注意事项 #

• 如果数据源的每一项字段不统一，可以修改generateColumns函数，遍历所有数据项的字段去重后生成列，避免遗漏字段
• 所有antd Table支持的列属性（筛选、固定列、对齐方式等）都可以放到customColumnConfig的对应配置中生效
• 数据源为空时组件会自动显示antd Table默认的空状态，不会出现报错

内容的提问来源于stack exchange，提问作者Al Imran Hossain