React中MUIDataTable点击/悬停行展示JSON隐藏数据为tooltip的实现问题

解决方法 #

步骤1：正确配置隐藏列 #

MUIDataTable 提供了 display: 'excluded' 列配置项，可以让列不在表格中渲染，但对应的行数据依然会被表格实例保留，完全符合你不需要展示列但要读取隐藏数据的需求。
修改你的 generateCols 方法中隐藏列的配置：

generateCols = () => {
  return [
    // 你其他正常展示的列配置写在前面
    {
      name: "hiddenData",
      options: {
        display: 'excluded', // 核心配置：不渲染列，保留对应数据
        filter: false, // 可选：禁止该列参与过滤
        sort: false, // 可选：禁止该列参与排序
        searchable: false // 可选：禁止该列参与搜索
      }
    }
  ]
}

步骤2：配置行交互读取隐藏数据 #

你可以根据需求选择悬停提示或者点击提示的实现方式：

方案A：行悬停显示Tooltip

在表格全局options中添加customRowRender配置，用MUI自带的Tooltip组件包裹整行，传入隐藏数据作为提示内容：

// 先导入MUI的Tooltip组件
import Tooltip from '@mui/material/Tooltip';

const options = {
  // 保留你原来的所有配置
  searchOpen: true,
  pagination: true,
  rowsPerPage: 160,
  rowsPerPageOptions: [160],
  selectableRowsHeader: false,
  print: false,
  filter: true,
  selectableRows: 'single',
  selectableRowsOnClick: true,
  rowHover: true,
  // 新增自定义行渲染配置
  customRowRender: (rowData, rowMeta) => {
    // 拿到当前行的完整数据
    const filteredList = list.filter(row => row.age > 30 && row.age < 60);
    const currentRow = filteredList[rowMeta.dataIndex];
    return (
      <Tooltip title={currentRow.hiddenData} placement="top-start">
        <MUIDataTable.BodyRow rowData={rowData} rowMeta={rowMeta} />
      </Tooltip>
    )
  }
}

方案B：行点击读取隐藏数据

如果只需要点击行时获取隐藏数据，直接在全局options中添加onRowClick配置即可：

const options = {
  // 原有配置不变
  onRowClick: (rowData, rowMeta) => {
    const filteredList = list.filter(row => row.age > 30 && row.age < 60);
    const currentRow = filteredList[rowMeta.dataIndex];
    // 这里写你点击后的业务逻辑，比如弹出提示、打开弹窗等
    alert(`隐藏字段内容：${currentRow.hiddenData}`);
  }
}

原有代码问题说明 #

你之前把onRowSelectionChange配置写在单个列的options中属于用法错误，该配置是表格全局options的参数，作用是监听行选中状态的变化，不能用来渲染列内容或者处理行交互。

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