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.
Material-UI DataGrid: How do I add a tooltip to each row cell?
Asked Answered
I am looking for this too. This is an important feature for me. Very helpful when cell text is longer than the predefined column width. –
Fjord
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;
}
I couldn't see
params.data
but i do see params.row
and params.getValue('someValue')
also works if someValue
is not rendered in any column but exists on the input data object –
Tiresias Any solution for adding a tooltip to the row instead of the cell? –
Nic
params.data does not seem to be available anymore in the current data grid version (currently "@mui/x-data-grid": "^5.5.1"). Replacing params.data.id with params.value.toString() worked for me though –
Sulph
We should use params.row.id –
Farica
appreciate having the CSS for retaining the custom ellipses with the renderCell –
Triumphant
Problem with this solution is that you get a mix of tooltip and cell title aria-label hover "popups" which are styled differently, if you don' add the <Tooltip> to all cells. A better solution would maybe be to style the aria-label which is based on the cells title text, dynamically for each cell. –
Honniball
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>
),
}));
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.
You can wrap the default mui Row into the Tooltip
import React from 'react'
import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid-pro/node_modules/@mui/x-data-grid/internals'
import { Tooltip } from '@mui/material'
export const TooltipRow = (props: any) => {
return (
<Tooltip title='tooltip'>
<DATA_GRID_DEFAULT_SLOTS_COMPONENTS.Row {...props} />
</Tooltip>
)
}
and then you pass it into slots
<DataGridPro
{/* Rest of your props */}
slots={{ row: TooltipRow }}
/>
You might want to use the GridCellParams
type if you use TypeScript:
renderCell: (params: GridCellParams) => (
<Tooltip title={params.value}>
<span className="table-cell-trucate">{params.value}</span>
</Tooltip>
)
© 2022 - 2024 — McMap. All rights reserved.