TableList.jsx 表格组件

TabList.js

import React, { memo } from 'react';
import { array, func, bool, number } from 'prop-types';
import { Table } from 'antd';
import { FormattedMessage } from 'react-intl';
import classnames from 'classnames';
import equal from 'fast-deep-equal';
TableList.propTypes = {
  columns: array.isRequired,
  dataSource: array.isRequired,
  onChange: func,
  total: number,
  current: number,
  pageSize: number,
  pagination: bool,
  showSizeChanger: bool,
};
TableList.defaultProps = {
  current: 1,
  pageSize: 10,
  pagination: true,
  showSizeChanger: true,
};
function TableList(props) {
  const {
    dataSource, onChange, className,
    pagination, total,current, pageSize, showSizeChanger,
    ...rest
  } = props;
  const attrs = {
    rowKey: (_, i) => _.id || i,
    ...rest,
    dataSource,
    onChange,
    pagination:
      (pagination && dataSource.length)
        ? {
          total,
          current,
          pageSize,
          showSizeChanger,
          showQuickJumper: true,
          showTotal: (totalCount, [start, end]) => (
            <>
              {start}~{end},
              <FormattedMessage
                id="monitor.pagination.total"
                defaultMessage="{value} 条数据"
                values={{ value: totalCount }}
              />
            </>
          ),
        }
        : false,
    className: classnames(className),
  };
  return <Table {...attrs} />;
}
function propsEqual({ dataSource, columns, loading }, props) {
  return equal(dataSource, props.dataSource)
    && equal(columns, props.columns)
    && loading === props.loading;
}
export default memo(TableList, propsEqual);

TableList

components/Table/TableList.js

import {memo} from 'react';
import {array, func, bool, number, string} from 'prop-types';
import { Table } from 'antd';
import classnames from 'classnames';
import equal from 'fast-deep-equal';
TableList.propTypes = {
  columns: array.isRequired,
  dataSource: array.isRequired,
  onChange: func,
  expandedRowRender: func, // 嵌套子表格
  pagination: bool,
  loading: bool,
  showSizeChanger: bool,
  total: number,
  current: number,
  pageSize: number,
  size: oneOf(['default', 'middle', 'small']),
}
TableList.defaultProps = {
  pagination: true,
  loading: false,
  showSizeChanger: false,
  current: 1,
  pageSize: 10,
  size: 'default',
}
function TableList(props) {
  const {
    total, current, pageSize, showSizeChanger, 
    pagination, className, 
       ...rest,
  } = props;
  const paginationConfig = {
      total,
      current,
      pageSize,
      showSizeChanger,
      showQuickJumper: true,
      showTotal: (totalCount, [start, end]) => {
          return `${start}~${end}, ${totalCount} 条数据`;
      },
    }
  const attrs = {
    ...rest,
    rowKey: (record, index) => (record.id || index), // rowKey: 'id',
    pagination: pagination && total ? paginationConfig : false,
    className: classnames(className),
  };
  return (
    <Table {...attrs} />
  )
};
function propsEqual({ dataSource, columns }, props) {
  return equal(dataSource, props.dataSource) && equal(columns, props.columns);
}
export default memo(TableList, propsEqual);

onChange 参数

onChange时，page的参数

TableList的用法

import { TableList, EditAction } from '@components/Table';
const columns = [
  {
    title: <FormattedMessage id="common.name" defaultMessage="名称" />,
    dataIndex: 'name',
  },
  {
    title: <FormattedMessage id="common.type" defaultMessage="类型" />,
    dataIndex: 'type',
  },
  {
    title: <FormattedMessage id="common.desc" defaultMessage="描述" />,
    dataIndex: 'desc',
  },
  {
    title: <FormattedMessage id="common.creator" defaultMessage="创建人" />,
    dataIndex: 'creator',
  },
  {
    title: <FormattedMessage id="common.createTime" defaultMessage="创建时间" />,
    dataIndex: 'created_at',
  },
  {
    title: <FormattedMessage id="common.action" defaultMessage="操作" />,
    key: 'action',
    width: 160,
    render: (_, record) => <EditAction {...record}/>,
  },
];
function App() {
  const pageChange = useCallback(values => {
    // console.log('page', values)
  }, []);
  return (
      <TableList
      dataSource={dataSource}
      columns={columns}
      onChange={pageChange}
    />
  )
}
export default App;