react+ts+hook封装一个table分页组件(建议收藏,直接使用)

大家好 我是歌谣 我是一名坚持写博客四年的博主 最好的种树是十年前 其次是现在，今天继续对ant design table的分页封装进行讲解

<>
 <Table<User> columns={columns} dataSource={data} />
 /* 使用 JSX 风格的 API */
 <Table<User> dataSource={data}>
 <Table.Column<User> key="name" title="Name" dataIndex="name" />
 </Table>
 </>

<Card style={{ marginTop: '24px' }}>
 <Table<any>
 {...resetProps}
 onChange={onTableChange}
 dataSource={list}
 rowKey={record => `${record.id}`}
 pagination={{
 
 pageSizeOptions: ['5', '10', '20', '50'],
 ...pagination,
 total: page.dataTotal,
 showTotal: () => {
 return '共 ' + page.dataTotal + ' 条记录';
 },
 }}
 >
 {props.children}
 </Table>
 </Card>

<Pagination
 total={85}
 showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
 defaultPageSize={20}
 defaultCurrent={1}
 />

rowKey表示唯一标识 区当前行的idresetProps表示剩余参数

const onTableChange = useCallback((pageParams: PaginationProps) => {
 setPagination(pageParams);
 props.onChange(pageParams);
 }, []);

把分页参数传给父级

interface BaseTableProps<T> extends TableProps<T> {
 data: {
 list: T[];
 page: PageResponseData;
 };
 children: React.ReactNode;
 onChange: (page: PaginationProps) => void;
}

const {
 data: { list, page },
 ...resetProps
 } = props;

 const [pagination, setPagination] = useState<PaginationProps>({
 defaultCurrent: 1,
 defaultPageSize: 10,
 showSizeChanger: true,
 });

import React, { useCallback, useState } from 'react';
import { Table,Card } from 'antd';
import { PaginationProps } from 'antd/lib/pagination';
import { TableProps } from 'antd/lib/table';
import { PageResponseData } from './type';
import {isHKCard} from "@/utils/regexp";
import { type } from 'os';

interface BaseTableProps<T> extends TableProps<T> {
 data: {
 list: T[];
 page: PageResponseData;
 };
 children: React.ReactNode;
 onChange: (page: PaginationProps) => void;
}
const BasicTable: React.FC<any> = (props: BaseTableProps<any>) =>{
// 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 (
 <Card style={{ marginTop: '24px' }}>
 <Table<any>
 {...resetProps}
 onChange={onTableChange}
 dataSource={list}
 rowKey={record => `${record.id}`}
 pagination={{
 
 pageSizeOptions: ['5', '10', '20', '50'],
 ...pagination,
 total: page.dataTotal,
 showTotal: () => {
 return '共 ' + page.dataTotal + ' 条记录';
 },
 }}
 >
 {props.children}
 </Table>
 </Card>
 );
}

export default BasicTable;

<BasicTable data={menuData} onChange={onTableChange} loading={loading}>
 <Table.Column<Menu> title="设备类型" dataIndex="machineTypeName" align="center"
 render={(text, record:any, index) => (
 <span>{record?.t_device_machine_type?.machine_type_name}</span>
 )}
 ></Table.Column>
 <Table.Column<Menu> title="设备名称" dataIndex="name" align="center"></Table.Column>
 <Table.Column<Menu> title="设备编码" dataIndex="code" align="center"></Table.Column>
 <Table.Column<Menu>
 title="添加时间"
 dataIndex="register_date"
 align="center"
 render={(text, record, index) => (
 <span>{countFormat(text)}</span>
 )}
 ></Table.Column>
 <Table.Column<Menu>
 title="修改时间"
 dataIndex="update_date"
 align="center"
 render={(text, record, index) => (
 <span>{countFormat(text)}</span>
 )}
 ></Table.Column>
 <Table.Column<Menu>
 title="操作"
 align="center"
 render={(text, record, index) => (
 <MenuButton index={index} record={record} onButtonClick={onButtonClick} />
 )}
 ></Table.Column>
 </BasicTable>

子传父分页回调

const onTableChange = useCallback(({ current, pageSize }: PaginationProps) => {
 setPage({ pageIndex: current as number, pageSize: pageSize as number });
 }, []);

loading表格是否渲染完成

歌谣出品 必是精品 微信公众号关注前端小歌谣 带你进入巅峰人才交流群