react中封装二次Ant Design的table组件 tsx

在React中，如果你想要封装一个基于Ant Design Table的二次开发组件，首先你需要安装`@ant-design/pro-table`库，它提供了一个更高级、易于定制的表格解决方案。以下是创建这样一个自定义组件的基本步骤：

1. **安装依赖**:

   npm install @ant-design/pro-table antd typescript

2. **导入所需模块**:

   import { Table, Column } from '@ant-design/pro-table';
   import { RecordType, ConfigProvider } from 'antd';
   import React, { FC, useMemo } from 'react';

3. **创建类型定义**:
如果你有自定义的数据结构，可以创建一个RecordType类型：

   type CustomTableData = {
     // 根据实际数据结构定义
     name: string;
     age: number;
     // ...
   };

4. **配置Pro Table**:

   const columns = useMemo(() => [
     // 使用Column创建列，可以根据需求添加、修改或动态加载列
     <Column title="姓名" dataIndex="name" />,
     <Column title="年龄" dataIndex="age" />,
   ], []);

5. **创建自定义组件**:

   interface Props {
     data: CustomTableData[]; // 数据源
     loading?: boolean; // 加载状态
     rowKey?: (record: CustomTableData) => any; // 行唯一标识
     // 其他props如 pagination, form等
   }

   const CustomizedTable: FC<Props> = ({ data, ...rest }) => {
     return (
       <ConfigProvider>
         <Table columns={columns} dataSource={data} {...rest} />
       </ConfigProvider>
     );
   };

6. **使用自定义组件**:

   const App = () => {
     const tableData = [
       // 示例数据...
     ];

     return <CustomizedTable data={tableData} />;
   };