前端项目实战39-table要单独形成一套组件-优秀呀

子组件

import React, { useCallback, useState } from 'react';
import { Table } from 'antd';
import { PaginationProps } from 'antd/lib/pagination';
import { TableProps } from 'antd/lib/table';
import { PageResponseData } from './type';
 
interface BaseTableProps<T> extends TableProps<T> {
    data: {
        list: T[];
        page: PageResponseData;
    };
    children: React.ReactNode;
    onChange: (page: PaginationProps) => void;
}
 
function BasicTable<T extends { id?: number }>(props: BaseTableProps<T>) {
    const {
        data: { list, page },
        ...resetProps
    } = props;
 
    const [pagination, setPagination] = useState<PaginationProps>({
        defaultCurrent: 1,
        defaultPageSize: 10,
        showSizeChanger: true,
    });
 
    const onTableChange = useCallback((pageParams: PaginationProps) => {
        setPagination(pageParams);
        props.onChange(pageParams);
    }, []);
 
    return (
        <Table<T>
            bordered
            {...resetProps}
            onChange={onTableChange}
            style={{ marginTop: '24px' }}
            dataSource={list}
            rowKey={record => `${record.id}`}
            pagination={{
                ...pagination,
                total: page.dataTotal,
                showTotal: () => {
                    return '共 ' + page.dataTotal + ' 条记录';
                },
            }}
        >
            {props.children}
        </Table>
    );
}
 
export default BasicTable;

父组件

 {/* 数据表格 */}

            <BasicTable<Menu> data={menuData} onChange={onTableChange} loading={loading}>

                <Table.Column<Menu> title="所属工厂" dataIndex="factoryName" align="center"></Table.Column>

                <Table.Column<Menu> title="所属车间" dataIndex="workshopName" align="center"></Table.Column>

                <Table.Column<Menu> title="工段名称" dataIndex="name" align="center"></Table.Column>

                <Table.Column<Menu> title="添加时间" dataIndex="registerDate" align="center"></Table.Column>

                <Table.Column<Menu> title="修改时间" dataIndex="registerDate" align="center"></Table.Column>

                <Table.Column<Menu>

                    title="操作"

                    align="center"

                    render={(text, record, index) => (

                        <MenuButton index={index} onButtonClick={onButtonClick} />

                    )}

                ></Table.Column>

            </BasicTable>