'Material-UI DataGrid: How do I add a tooltip to each row cell?
I could not find anything related to this in the react material ui datagrid documentation here. I noticed you can add tooltips to columns via a "description" field, but can not find any documentation or examples related to rows.
Solution 1:[1]
modify columns to add renderCell attribute
const columns: Columns = [
{
field: 'id',
headerName: 'ID',
sortable: false,
renderCell: (params: any) => (
<Tooltip title={params.data.id} >
<span className="table-cell-trucate">{params.data.id}</span>
</Tooltip>
),
}
]
css changes :
.table-cell-trucate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Solution 2:[2]
I modified the columns like this:
const editColumns = columns.map((column) => ({
field: column,
headerName: column,
width:75,
flex: 1,
renderCell: (params: any) => (
<Tooltip title={params.value}>
<span>{params.value}</span>
</Tooltip>
),
}));
Solution 3:[3]
Just debug your code on rendercell and check what data you are getting in params, according to that filter your code.
renderCell: (params) => (
<Tooltip title={params.value} >
<span className="csutable-cell-trucate">{params.value}</span>
</Tooltip>
),
this worked for me.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Nityanand kar |
Solution 2 | David Elkabas |
Solution 3 | vincrichaud |