行分组

对行进行分组，点击「分组标题」展示该组下的数据。「分组标题」总是独占一行。

info

想要在展开的单元格内渲染自定义内容？ 行详情 可以做到。

示例

预览点击展开或收拢

标题	部门名称	团建目的地	当地导游

阿里巴巴网络技术有限公司
二级标题	消费者事业部-淘宝-UED	云南大理	Douglas Lee
二级标题	消费者事业部-淘宝-UED	云南大理	Douglas Lee
蚂蚁金服有限公司
二级标题	消费者事业部-淘宝-UED	云南大理	Douglas Lee
二级标题	消费者事业部-淘宝-UED	云南大理	Douglas Lee
group without children

源码点击展开或收拢

function 行展开() { const dataSource = [ { id: 'alibaba', groupTitle: '阿里巴巴网络技术有限公司', children: [ { id: '1-1', title: '二级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee' }, { id: '1-2', title: '二级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee' }, ], }, { id: 'antfin', groupTitle: '蚂蚁金服有限公司', children: [ { id: '2-1', title: '二级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee' }, { id: '2-2', title: '二级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee' }, ], }, { id: 'other', groupTitle: 'group without children' }, ] const columns = assets.biz.columns5 const pipeline = useTablePipeline({ components: fusion }) .input({ dataSource, columns }) .primaryKey('id') .use(features.rowGrouping({ defaultOpenAll: true })) return <BaseTable {...pipeline.getProps()} /> }

function 行展开() {
  const dataSource = [
    {
      id: 'alibaba',
      groupTitle: '阿里巴巴网络技术有限公司',
      children: [
        { id: '1-1', title: '二级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee' },
        { id: '1-2', title: '二级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee' },
      ],
    },
    {
      id: 'antfin',
      groupTitle: '蚂蚁金服有限公司',
      children: [
        { id: '2-1', title: '二级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee' },
        { id: '2-2', title: '二级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee' },
      ],
    },
    { id: 'other', groupTitle: 'group without children' },
  ]
  const columns = assets.biz.columns5
  const pipeline = useTablePipeline({ components: fusion })
    .input({ dataSource, columns })
    .primaryKey('id')
    .use(features.rowGrouping({ defaultOpenAll: true }))

  return <BaseTable {...pipeline.getProps()} />
}

用法

• 启用行分组功能之前，pipeline 必须已经设置了 primaryKey，且 primaryKey 只能为字符串。
• 行分组会从 pipeline.ctx.indents 中读取缩进配置
• dataSource 第一层的结构需要符合以下结构：
  • { [primaryKey]: string, groupTitle: ReactNode, children: [...] }

pipeline.use(features.rowGrouping(options))

options 结构如下：

export interface RowGroupingFeatureOptions {  /** 非受控用法：是否默认展开所有分组 */  defaultOpenAll?: boolean
  /** 非受控用法：默认展开的 keys */  defaultOpenKeys?: string[]
  /** 受控用法：当前展开的 keys */  openKeys?: string[]
  /** 受控用法：当前展开 keys 改变回调 */  onChangeOpenKeys?(nextKeys: string[], key: string, action: 'expand' | 'collapse'): void
  /** 是否对触发 onChangeOpenKeys 的 click 事件调用 event.stopPropagation() */  stopClickEventPropagation?: boolean}