antd表的分组数据块

import { Table } from 'antd';

const data = [
  { name: 'John', group: 'A' },
  { name: 'Mike', group: 'B' },
  { name: 'Alice', group: 'A' },
  { name: 'Tom', group: 'B' },
];

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Group', dataIndex: 'group', key: 'group' },
];

const groupedData = {};

data.forEach(item => {
  if (!groupedData[item.group]) {
    groupedData[item.group] = [];
  }
  groupedData[item.group].push(item);
});

const dataSource = Object.keys(groupedData).map(group => ({
  key: group,
  name: group,
  children: groupedData[group],
}));

const App = () => (
  <Table
    columns={columns}
    dataSource={dataSource}
    bordered
    pagination={false}
  />
);

export default App;