Question

使用Material-Table，我似乎无法获得一列来显示动态工具提示值。我希望工具提示显示另一列的值。

import MaterialTable from 'material-table';
import '../App.css';
import Tooltip from '@material-ui/core/Tooltip';

function TableMasterBom (props) {
    const [projects, setProjects] = useState([]);

    async function getProjects() {
        const res = await fetch("http://localhost:5000/lookup");

        const projectArray = await res.json();

        setProjects(projectArray);
    }

    useEffect(() => {
    getProjects();
    }, []);


    return (
      <div>

        <MaterialTable
            columns={[
            { title: 'Price', field: 'price',  width: '5%', 
            Cell: dataRow => {
                return <Tooltip title={dataRow.price_date}>{dataRow.price}</Tooltip>
              },
            },
           { title: 'Price Date', field: 'price_date',  width: '5%', 
            }  

// rest of code

Answer 1

添加到 Lusine 的答案中，因为它将返回错误“[工具提示] TypeError：无法读取未定义的属性 'className'”

应该是...

render: rowData => {
   return <Tooltip title={rowData.price_date}><span>{rowData.price}</span>
      </Tooltip>            
},

有关更多信息，请访问此处... https://github.com/mui-org/material-ui/issues/18119

Answer 2

您不能在列中调用Cell，但是可以渲染它：

render: rowData => {
   return <Tooltip title={rowData.price_date}>{rowData.price} 
      </Tooltip>            
},

使用材料表的动态工具提示

2 个答案: