---
title: 分组表格
order: 4
---

本 Demo 演示分组表格的用法。

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwTable } from '@ywfe/yw-design';
import { Button } from 'antd';
import 'antd/dist/antd.css';

const columns = [
  {
    title: '商品信息',
    dataIndex: 'info',
    component: 'DetailInfo',
    componentProps: {
      type: 'goods', // 商品类型 后面还会补充其他类型
    },
    width: 300,
    formatValues: (_, record) => {
      return {
        imgUrl: record.imgUrl,
        price: record.price, // price:'23.00',
        title: {
          value: record.title,
        },
        tooltip: {
          label: '商品ID',
          value: record.itemId,
          isCopy: true,
        },
      };
    },
  },
  {
    title: '佣金信息',
    dataIndex: 'group',
    width: 160,
    component: 'MultipleCol',
    formatValues: (_, record) => {
      return [
        {
          label: '线上佣金',
          value: record.onlineBrokerage,
        },
        {
          label: '线下佣金',
          value: record.offlineBrokerage,
        },
      ];
    },
  },
  {
    title: '坑位费',
    dataIndex: 'count',
    width: 80,
  },
  {
    title: '招商对接人',
    dataIndex: 'userName',
    width: 80,
  },
  {
    title: '大字报填写状态',
    component: 'Status',
    dataIndex: 'linkStatusName',
    width: 120,
    componentProps: {
      dataSource: [
        { value: '已填写', color: 'success' },
        { value: '未填写', color: 'info' },
      ],
    },
  },
  {
    title: '链接填写状态',
    component: 'Status',
    // width: 120,
    dataIndex: 'linkStatusName',
    componentProps: {
      dataSource: [
        { value: '已填写', color: 'success' },
        { value: '未填写', color: 'info' },
      ],
    },
  },
  {
    title: '操作',
    dataIndex: 'operate',
    component: 'Operates',
    fixed: 'right',
    componentProps: {
      value: [
        {
          btnText: '填写大字报',
          btnType: 'link',
          href: '',
          disabled: ({ linkStatusName }) => linkStatusName === '已填写', // Boolean | Function
          // visible:true
        },
        {
          btnText: '填写链接',
          btnType: 'link',
          visible: (record) => true, // Boolean | Function
          target: '_blank',
          href: '',
        },
      ],
    },
    width: 260,
  },
];
const getTableData = async (props) => {
  console.log('form参数', props);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        list: [
          {
            startTime: '2022-01-06 12:12:12',
            status: 1,
            statusName: '选品中',
            activeName: '母亲节好物推荐1',
            liveName: '贾乃亮直播好物',
            parent: 'root',
            id: 1,
            children: [
              {
                price: '1999',
                status: 11,
                imgUrl:
                  'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
                itemId: '34234324624234',
                title: 'Basic House/百家好女装冬韩风针织衫温暖时尚套头上衣',
                linkStatusName: '未填写',
                onlineBrokerage: '12%',
                offlineBrokerage: '12%',
                count: '5万元',
                userName: '班超',
              },
              {
                price: '1999',
                status: 11,
                imgUrl:
                  'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
                itemId: '34234324324234',
                title: 'Basic House/百家好女装冬韩风针织衫温暖时尚套头上衣',
                linkStatusName: '未填写',
                onlineBrokerage: '12%',
                offlineBrokerage: '12%',
                count: '5万元',
                userName: '班超',
              },
            ],
          },
          {
            startTime: '2022-01-06 12:12:12',
            status: 1,
            statusName: '选品中',
            activeName: '母亲节好物推荐2',
            liveName: '贾乃亮直播好物',
            parent: 'root',
            id: 2,
            children: [
              {
                price: '1999',
                status: 11,
                imgUrl:
                  'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
                itemId: '34234824324244',
                rowKey: 3,
                title: 'Basic House/百家好女装冬韩风针织衫温暖时尚套头上衣',
                linkStatusName: '已填写',
                onlineBrokerage: '12%',
                offlineBrokerage: '12%',
                count: '5万元',
                userName: '班超',
              },
            ],
          },
        ],
        totalNumber: 21,
        pageSize: 10,
      });
    }, 1500);
  });
};

const buttons = [
  {
    type: 'batch',
    btnText: '批量选中',
    onClick: (keys, data, reload) => {
      // 表格刷新
      console.log(keys, data);
      setTimeout(reload(), 1000);
    },
  },
];
// 表格过滤条件
const filterProps = {
  status: 1,
};
const App = () => {
  return (
    <YwTable
      columns={columns}
      rowKey="itemId"
      getTableData={getTableData}
      filterProps={filterProps}
      buttons={buttons}
      tableType="group"
      rowSelection={{ fixed: true }}
      scroll={{ x: 1500 }}
      sticky={true}
      renderGroupTitle={(_, record) => {
        return <div>活动名称：{record.activeName}</div>;
      }}
      pagination={{ showQuickJumper: true, pageSize: 10 }}
    />
  );
};

ReactDOM.render(<App />, mountNode);
```