Material-UI DataGrid: How do I add a tooltip to each row cell?

user_6189337 0
Viewed 11026

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
4 Answers

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;
}
user_147012170

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>
    ),
  }));
user_175153340

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.

user_185407090

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>
   )
user_44234090
Related