MUIDataTable : onRowclick 在可选择的工具提示中显示来自 json 的数据，而不是作为一列

Posted 2023-02-21

【中文标题】MUIDataTable : onRowclick 在可选择的工具提示中显示来自 json 的数据，而不是作为一列

【英文标题】：MUIDataTable : onRowclick show data from json in selectable tooltip rather then as a column

【发布时间】：2021-09-28 02:55:50

【问题描述】：

在反应中，我添加了一个 MUIDataTable，我有一些 JSON 格式的数据，我希望将其显示为单击行或悬停时的工具提示，而不是显示为列。

如果我不在列中添加隐藏的列名，MUI 表甚至不会显示在表中...

<MUIDataTable
            columns=columns
            options=options
            data=list.filter((row) => row.age > 30 && row.age < 60)
          />

---

const columns = this.generateCols();
const options = 
  searchOpen: true,
  pagination: true,
  rowsPerPage: 160,
  rowsPerPageOptions: [160],
  selectableRowsHeader: false,
  print: false,
  filter: true,
  selectableRows: 'single',
  selectableRowsOnClick: true,
  rowHover: true,
;

---

generateCols = () => 
  return [

      name: "hiddenData",
      options: 
      //    customBodyRender: (value, tableMeta, updateValue) => 
      //     onRowSelectionChange: (value) => 
      //       alert(value);
      //       return (
      //               <Tooltip>
      //                 <Done color="primary" />
      //               </Tooltip>
      //             );
      //     
      // ,
        onRowSelectionChange: (value) => 
          alert(value);
          return (
                  <Tooltip>
                    <Done color="primary" />
                  </Tooltip>
          );
        
      ,
]

//一直在关注https://github.com/gregnb/mui-datatables/blob/7558e7393b6ee4b21c9481613429efcdbe7a6ddc/src/MUIDataTable.js了解更多

【参考方案1】：

            customBodyRender: (value, tableMeta) => (
             
                <Tooltip 
                
                disableTouchListener
                title=tableMeta.rowData[1]
                >
                <Button id=`$tableMeta.rowIndex_$tableMeta.columnIndex` 
                    onClick=(event) => this.handleTooltipOpen(event, tableMeta, tableMeta.rowData)>
                      value === null ? '' : value
                </Button>
              </Tooltip>
            )