如何在TypeScript React中开发自定义可复用的Table表格组件

核心思路 #

把所有表格通用的固定配置内置到封装组件中，将不同业务存在差异的列配置、数据源、业务自定义逻辑通过props参数暴露，支持传入覆盖默认配置，避免重复编写公共代码。

第一步：封装基础通用Table组件 #

// BaseTable.jsx 通用表格封装文件
import { Table } from 'antd'

const BaseTable = (props) => {
  const { columns, dataSource, pagination = {}, expandable = {}, scroll = {}, ...restProps } = props

  // 内置默认分页配置，传入的参数会覆盖同名属性
  const mergedPagination = {
    className: "list-pagination",
    defaultPageSize: 10,
    defaultCurrent: 1,
    ...pagination
  }

  // 内置默认展开配置，支持传入自定义逻辑覆盖
  const mergedExpandable = {
    // 通用展开图标逻辑直接内置，无需重复编写
    expandIcon: ({ expanded, onExpand, record }) =>
      expanded ? (
        <div className="icon-wrapper">
          <i
            className="icon-table-arrow-down"
            style={{ fontSize: "9px", width: "16px", cursor: "pointer" }}
            onClick={(e) => onExpand(record, e)}
          />
        </div>
      ) : (
        <div className="icon-wrapper">
          <i
            className="icon-table-arrow-right"
            style={{ width: "16px", cursor: "pointer" }}
            onClick={(e) => onExpand(record, e)}
          />
        </div>
      ),
    ...expandable
  }

  // 内置默认滚动配置，支持自定义覆盖
  const mergedScroll = {
    x: "max-content",
    y: 600,
    ...scroll
  }

  return (
    <Table
      className="v-table m-table"
      scroll={mergedScroll}
      columns={columns}
      dataSource={dataSource}
      pagination={mergedPagination}
      expandable={mergedExpandable}
      {...restProps}
    />
  )
}

export default BaseTable

第二步：不同业务场景调用示例 #

只需要单独定义对应业务的列配置和数据源，传入封装好的BaseTable即可，公共逻辑无需重复编写：

// 业务场景1：用户列表表格
import BaseTable from './BaseTable'

// 仅编写业务独有的列配置
const userColumns = [
  { title: '用户名', dataIndex: 'name', key: 'name' },
  { title: '联系方式', dataIndex: 'phone', key: 'phone' },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => <button onClick={() => handleEdit(record)}>编辑</button>
  }
]

// 业务数据源，一般从后端接口获取
const userData = [
  { id: 1, name: '张三', phone: '13xxxxxxxxx' },
  { id: 2, name: '李四', phone: '15xxxxxxxxx' }
]

const UserList = () => {
  return (
    <BaseTable
      columns={userColumns}
      dataSource={userData}
      // 自定义分页参数，会覆盖默认配置
      pagination={{ total: 85, pageSize: 20 }}
      // 自定义展开行渲染，无展开需求可不传
      expandable={{
        expandedRowRender: (record) => <div>用户备注：{record.remark}</div>,
        rowExpandable: (record) => !!record.remark
      }}
      // 其他原Table支持的属性都可直接传入
      rowClassName={(record) => record.status === 'disable' ? 'gray-row' : ''}
    />
  )
}

灵活扩展建议 #

• 若有通用的列格式（比如日期格式化、金额格式化、操作列），可以抽成公共列配置生成函数，不同业务只需要传入对应字段和回调即可，无需重复写render逻辑。
• 可根据业务需求新增内置通用逻辑，比如选中行、排序、筛选的默认配置，进一步减少重复代码。

内容的提问来源于stack exchange，提问作者Saista Chhipa