Material React Table自定义子行：主行note仅显示在无表头子行

核心实现思路 #

1. 移除Note列的表头配置：直接不在列配置数组中定义note相关列，确保表头不会出现该列。
2. 开启行展开功能并自定义子行渲染：通过表格的展开配置，自定义子行内容仅展示note字段，且不生成额外表头。

代码示例 #

1. 数据与基础列配置

// 示例行数据
const tableData = [
  { id: 1, name: '张三', age: 25, note: '这是张三的专属备注信息' },
  { id: 2, name: '李四', age: 30, note: '李四的备注内容较长，用于测试子行展示效果' },
];

// 列配置（不包含note列）
const tableColumns = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'age', header: '年龄' },
];

2. 表格实例配置（自定义子行）

import { useMaterialReactTable } from 'material-react-table';
import { Table } from '@mui/material';

const CustomTable = () => {
  const table = useMaterialReactTable({
    columns: tableColumns,
    data: tableData,
    enableExpanding: true, // 必须开启行展开功能
    // 自定义子行渲染逻辑
    renderSubRow: ({ row }) => (
      // 方案1：纯文本容器样式，无表格结构
      <div style={{ padding: '12px 24px', backgroundColor: '#f8f9fa' }}>
        <strong>备注：</strong>{row.original.note}
      </div>

      // 方案2：表格单元格跨列样式，与主行结构对齐
      // <tr>
      //   <td colSpan={tableColumns.length} style={{ padding: '12px', backgroundColor: '#f8f9fa' }}>
      //     <strong>备注：</strong>{row.original.note}
      //   </td>
      // </tr>
    ),
  });

  return <Table {...table.getTableProps()}>{table.getTableBody()}</Table>;
};

关键说明 #

• enableExpanding: true：必须开启该配置，主行才会显示展开按钮，点击后触发子行渲染。
• renderSubRow回调：通过row.original获取原始行数据中的note字段，直接渲染纯内容，不会生成额外表头。
• 样式自定义：可根据需求调整子行的内边距、背景色等，让子行与主行视觉区分开。

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