#ProTable - 高级表格

import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Divider } from 'antd';

type Row = {
  key: string;
  city: string;
  area: string;
  name: string;
  amount: number;
};

const dataSource: Row[] = [
  { key: '1', city: '上海', area: '浦东', name: '张三', amount: 100 },
  { key: '2', city: '上海', area: '浦东', name: '李四', amount: 200 },
  { key: '3', city: '上海', area: '闵行', name: '赵六', amount: 150 },
  { key: '4', city: '北京', area: '海淀', name: '王五', amount: 300 },
  { key: '5', city: '北京', area: '朝阳', name: '孙七', amount: 260 },
];

/** 列配置 align: 'center' 让单元格内容水平居中(antd 原生列能力) */
const columns: ProColumns<Row>[] = [
  { title: '城市', dataIndex: 'city', align: 'center' },
  { title: '区域', dataIndex: 'area', align: 'center' },
  { title: '姓名', dataIndex: 'name', align: 'center' },
  { title: '金额', dataIndex: 'amount', align: 'center' },
];

/**
 * 同值单元格纵向自动合并（#9770）：
 * - 列维度：ProColumns 上配置 autoMerge: true
 * - 表维度：mergeFields 按数组顺序多级依次合并（先城市、后区域）
 * 只合并当前页内连续同值，排序、筛选、分页切换后自动重算；
 * 手动 onCell 显式返回的 rowSpan 优先于自动合并结果。
 *
 * bordered 与合并逻辑正交、不默认开启；合并场景建议开启全边框，
 * 合并区域视觉边界更完整（见前两个示例），第三个示例为无边框效果。
 */
export default () => (
  <>
    <ProTable<Row>
      columns={columns.map((column) =>
        column.dataIndex === 'city' ? { ...column, autoMerge: true } : column,
      )}
      dataSource={dataSource}
      rowKey="key"
      search={false}
      options={false}
      pagination={false}
      bordered
      headerTitle="列配置 autoMerge（建议开启全边框）"
    />
    <Divider />
    <ProTable<Row>
      columns={columns}
      mergeFields={['city', 'area']}
      dataSource={dataSource}
      rowKey="key"
      search={false}
      options={false}
      pagination={false}
      bordered
      headerTitle="mergeFields 多级合并（建议开启全边框）"
    />
    <Divider />
    <ProTable<Row>
      columns={columns}
      mergeFields={['city', 'area']}
      dataSource={dataSource}
      rowKey="key"
      search={false}
      options={false}
      pagination={false}
      headerTitle="未开启 bordered 的合并（antd 默认无边框）"
    />
  </>
);

import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';

type Row = {
  key: string;
  team: string;
  member: string;
  task: string;
};

const dataSource: Row[] = [
  { key: '1', team: '前端组', member: '张三', task: '首页' },
  { key: '2', team: '', member: '李四', task: '表单' },
  { key: '3', team: '后端组', member: '王五', task: '接口' },
];

const columns: ProColumns<Row>[] = [
  {
    title: '团队',
    dataIndex: 'team',
    onCell: (_, index = 0) =>
      index === 0 ? { rowSpan: 2 } : index === 1 ? { rowSpan: 0 } : {},
  },
  { title: '成员', dataIndex: 'member' },
  { title: '任务', dataIndex: 'task' },
];

export default () => (
  <ProTable<Row>
    columns={columns}
    dataSource={dataSource}
    rowKey="key"
    search={false}
    options={false}
    pagination={false}
    scroll={{ x: 480 }}
  />
);

import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';

type Row = {
  key: string;
  item: string;
  detail: string;
  count: number;
};

const dataSource: Row[] = [
  { key: '1', item: '本周合计', detail: '', count: 8 },
  { key: '2', item: '首页', detail: '设计任务', count: 3 },
];

const columns: ProColumns<Row>[] = [
  {
    title: '项目',
    dataIndex: 'item',
    onCell: (record) => (record.key === '1' ? { colSpan: 2 } : {}),
  },
  {
    title: '明细',
    dataIndex: 'detail',
    onCell: (record) => (record.key === '1' ? { colSpan: 0 } : {}),
  },
  { title: '数量', dataIndex: 'count' },
];

export default () => (
  <ProTable<Row>
    columns={columns}
    dataSource={dataSource}
    rowKey="key"
    search={false}
    options={false}
    pagination={false}
    scroll={{ x: 480 }}
  />
);