React-Data-table-component单列双selector及API嵌套子行渲染问题咨询

1. 同一列配置多个字段（双selector需求） #

该需求不需要配置多个selector，直接使用组件提供的cell属性自定义列渲染逻辑即可，可自由组合任意多个字段的展示效果，你之前代码里Customer Segment列用到的cell属性就是自定义渲染的核心属性，所有自定义列展示的需求都可以通过该属性实现。示例配置如下：

const columns = [
  // 其他原有列配置不变
  {
    name: "组合信息",
    // selector可设置一个兜底字段用于排序/过滤（不需要相关能力的话也可以省略）
    selector: row => row.Identification,
    // 自定义渲染同时展示Identification和SequenceNumber两个字段
    cell: (row) => (
      <div>
        <p>序列编号：{row.SequenceNumber}</p>
        <p>标识：{row.Identification}</p>
      </div>
    )
  }
]

如果只是需要简单拼接展示，直接在cell里拼接字符串即可，不需要额外嵌套标签。 #

2. 嵌套子行渲染实现 #

react-data-table-component 原生支持可展开子行功能，不需要额外引入第三方依赖，开启对应配置即可实现嵌套数据渲染：

步骤1：定义子行渲染组件 #

// 入参data就是当前行的完整接口返回数据
const ExpandableSubRow = ({ data }) => {
  // 此处subList为示例嵌套字段，按实际API返回的嵌套字段名修改即可
  const subData = data.subList || []
  return (
    <div style={{ paddingLeft: '2rem' }}>
      {/* 可以直接渲染嵌套字段内容，也可以嵌套一个新的DataTable展示子表格 */}
      {subData.map((item, index) => (
        <div key={index}>
          <span>子项名称：{item.name}</span>
          <span style={{marginLeft: '1rem'}}>子项类型：{item.type}</span>
        </div>
      ))}
    </div>
  )
}

步骤2：在DataTable组件上添加对应配置 #

import DataTable from 'react-data-table-component';

// 组件内调用
<DataTable
  columns={columns}
  data={你的接口返回数据数组}
  // 开启可展开子行能力
  expandableRows
  // 指定子行渲染组件
  expandableRowsComponent={ExpandableSubRow}
  // 可选配置：默认展开所有子行
  // expandableRowsExpanded={true}
  // 其他原有配置（分页、排序、主题等）保持不变
/>

如果你的嵌套数据层级超过2层，只需要在子行组件中继续嵌套DataTable并重复上述子行配置逻辑，即可实现多级嵌套子行效果。

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