React Table：如何按ouid值渲染对应列组，不匹配则显示空列

核心逻辑 #

根据每行的ouid值，判断当前列组是否与该ouid匹配：

• 匹配则渲染对应child1/child2数据
• 不匹配则显示空值
• parent列作为公共列始终显示对应值

数据结构调整建议（可选） #

原API返回结构可直接使用，若想让数据逻辑更清晰，可将child字段调整为键值对形式，方便后续扩展更多ouid场景：

// 调整后的数据结构示例
const tableData = [
  {
    parent: '父项1',
    ouid: 'ouid1',
    children: {
      ouid1: '子项1-1',
      ouid2: '子项1-2'
    }
  },
  {
    parent: '父项2',
    ouid: 'ouid2',
    children: {
      ouid1: '子项2-1',
      ouid2: '子项2-2'
    }
  }
];

若保持原结构也完全可行，以下实现会同时覆盖两种数据结构的处理方式。

v8（beta.4）版本实现代码 #

1. 原始数据示例 #

// 原API返回数据
const tableData = [
  { parent: '父项1', ouid: 'ouid1', child1: '子项1-1', child2: '子项1-2' },
  { parent: '父项2', ouid: 'ouid2', child1: '子项2-1', child2: '子项2-2' },
  { parent: '父项3', ouid: 'ouid1', child1: '子项3-1', child2: '子项3-2' }
];

2. 列配置定义 #

通过cell回调判断当前行ouid与列组对应的ouid是否匹配，返回对应数据或空值：

import { createColumnHelper } from '@tanstack/react-table';

const columnHelper = createColumnHelper();

const columns = [
  // 公共parent列
  columnHelper.accessor('parent', {
    header: '父项',
    cell: info => info.getValue()
  }),
  // 第一个列组：匹配ouid1，渲染child1
  {
    header: 'OUID1列组',
    columns: [
      columnHelper.accessor(row => row.ouid === 'ouid1' ? row.child1 : '', {
        header: '子项内容',
        cell: info => info.getValue() || ''
      })
    ]
  },
  // 第二个列组：匹配ouid2，渲染child2
  {
    header: 'OUID2列组',
    columns: [
      columnHelper.accessor(row => row.ouid === 'ouid2' ? row.child2 : '', {
        header: '子项内容',
        cell: info => info.getValue() || ''
      })
    ]
  }
];

如果用调整后的children结构，accessor可改为：

columnHelper.accessor(row => row.ouid === 'ouid1' ? row.children.ouid1 : '', { ... })

3. 表格渲染组件 #

import { useReactTable } from '@tanstack/react-table';

function MyTable() {
  const table = useReactTable({
    data: tableData,
    columns: columns
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map(header => (
              <th key={header.id} colSpan={header.colSpan}>
                {header.isPlaceholder ? null : (
                  <div>
                    {header.renderHeader()}
                  </div>
                )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id}>
                {cell.renderCell()}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

v7版本实现代码 #

1. 原始数据示例 #

同v8的原始数据

2. 列配置定义 #

v7通过Cell属性实现判断逻辑：

const columns = [
  {
    Header: '父项',
    accessor: 'parent'
  },
  {
    Header: 'OUID1列组',
    columns: [
      {
        Header: '子项内容',
        Cell: ({ row }) => row.ouid === 'ouid1' ? row.child1 : ''
      }
    ]
  },
  {
    Header: 'OUID2列组',
    columns: [
      {
        Header: '子项内容',
        Cell: ({ row }) => row.ouid === 'ouid2' ? row.child2 : ''
      }
    ]
  }
];

调整后数据结构的Cell写法：

Cell: ({ row }) => row.ouid === 'ouid1' ? row.children.ouid1 : ''

3. 表格渲染组件 #

import { useTable } from 'react-table';

function MyTable() {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({ columns, data: tableData });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()} colSpan={column.colSpan}>
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>
                  {cell.render('Cell')}
                </td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

效果验证 #

渲染后表格效果如下：

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