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 '../../typings' ; interface BaseTableProps < T > extends TableProps < T > { data : { list : T [ ] ; page : PageResponseData ; } ; children : React . ReactNode ; onChange : ( page : PaginationProps ) => void ; } function BaseTable < T extends { id ? : number ; } > ( props ) { const { data : { list , page } , ... resetProps } = props ; const [ pagination , setPagination ] = useState < PaginationProps > ( { defaultCurrent : 1 , defaultPageSize : 10 , showSizeChanger : true , } ) ; const onTableChange = useCallback ( ( pageParams ) => { setPagination ( pageParams ) ; props . onChange ( pageParams ) ; } , [ ] ) ; return ( < Table < T > bordered { ... resetProps } onChange = { onTableChange } style = { { marginTop : '40px' } } dataSource = { list } rowKey = { record => `${ record . id }` } pagination = { { ... pagination , total : page . dataTotal , } } > { props . children } < /Table>); } export default BaseTable ;