CODEWITHSUNDEEP
reactjsmaterial-table
bWgibb
bWgibb

Reputation: 31

Dynamic tooltip using material-table

Using Material-Table, I can't seem to get one column to display a dynamic tooltip value. I would like to have the tooltip display the value of another column. 

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

Upvotes: 1

Views: 8131

Answers (2)

Koji Ikehara
Koji Ikehara

Reputation: 33

Adding to Lusine's answer, since it will return an error "[Tooltip] TypeError: Cannot read property 'className' of undefined"

It should be...

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

For more information go here... https://github.com/mui-org/material-ui/issues/18119

Upvotes: 2

Lusine
Lusine

Reputation: 1

You can't call Cell in columns, but you can render it:

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

Upvotes: 0

Related Questions