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

5

14

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.

Kaliningrad answered 21/11, 2020 at 0:8 Comment(1)
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
H
22

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;
}
Horthy answered 25/11, 2020 at 7:35 Comment(6)
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 objectTiresias
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 thoughSulph
We should use params.row.idFarica
appreciate having the CSS for retaining the custom ellipses with the renderCellTriumphant
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
C
5

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>
    ),
  }));
Chrono answered 17/4, 2022 at 8:17 Comment(0)
C
1

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.

Capetian answered 22/3, 2022 at 9:45 Comment(0)
B
1

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 }}
/>
Bertolde answered 5/3 at 13:16 Comment(0)
L
-1

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>
   )
Lenzi answered 23/8, 2022 at 6:22 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.