antd 如何根据数据动态创建列？

Question

我想使用 antd 创建一个可重复使用的数据 table 组件，其中的列是根据数据动态创建的。我该怎么做？

这是我的代码：

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

const TableContainer = (props) => {
  const { columns, data, loading } = props;

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

export default TableContainer;

Answer 1

您可以根据 data.length 有条件地呈现您的 table，如下所示。如果你有一个空数组，那么它不会显示 table.

const TableContainer = (props) => {
  const { columns, data, loading } = props;

   return (
    <>{data?.length > 0 && <Table columns={columns} dataSource={data}  loading={loading} />}</>
  );
};

antd 如何根据数据动态创建列？

How to create columns dynamically from data in antd?

reactjs

antd