React JS可展开表格主行如何显示首项名加剩余子项数量

需求说明 #

• 已完成可折叠表格基础功能，但折叠态主行的蓝色标题区域无法展示子项数量统计
• 目标展示规则：主行标题显示当前分组下第一个子项名称，后缀标注剩余子项数量，效果形如basketball..+2
• 表格数据通过API接口异步拉取

现有核心代码 #

export const columns = [
  {
    Header: () => (
      <div />
    ),
    accessor: 'name',
    maxWidth: 300,
    Cell: row => (
      <div className='first-column'>{row.value}</div>
    )
  }
];

export const subComponent = row => {
  return (
    <div>
      {row.original.types.map((type, id) => {
        return (
          <div className='subRow' key={ id }>{ type.name }</div>
        );
      })}
    </div>
  );
};

export const data = [
  {
    id: '12345',
    name: 'sports',
    types: [
      { name: 'basketball', id: '1' },
      { name: 'soccer', id: '2' },
      { name: 'baseball', id: '3' }
    ]
  },
  {
    id: '678910',
    name: 'food',
    types: [
      { name: 'pizza', id: '4' },
      { name: 'hamburger', id: '5' },
      { name: 'salad', id: '6' }
    ]
  }
]

具体实现 #

不需要修改接口请求逻辑、不需要改动子行渲染组件，直接修改列配置里的Cell渲染函数即可，逻辑天然兼容API异步返回数据的场景：

1. 从当前行原始数据row.original中取子项数组types，先做空值兜底，避免接口返回异常时报错
2. 取数组第一个元素的name作为标题主文本
3. 计算剩余子项数量：数组总长度减1，数量大于0时拼接..+X后缀，数量为0时不显示后缀
4. 后缀部分可单独包裹标签设置蓝色样式，匹配设计要求

修改后的列配置代码如下：

export const columns = [
  {
    Header: () => <div />,
    accessor: 'name',
    maxWidth: 300,
    Cell: row => {
      const { types = [] } = row.original;
      // 无有效子项时显示原有主项名称
      if (types.length === 0) {
        return <div className='first-column'>{row.value}</div>
      }
      const firstItemName = types[0].name;
      const restCount = types.length - 1;
      
      return (
        <div className='first-column'>
          {firstItemName}
          {restCount > 0 && (
            <span style={{ color: '#1677ff' }}>..+{restCount}</span>
          )}
        </div>
      )
    }
  }
];

如果需要区分折叠/展开态的显示差异，在Cell组件中读取表格的展开状态，按需调整文本或样式即可。

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