CODEWITHSUNDEEP
reactjsmaterial-uidatagrid
claracking
claracking

Reputation: 51

How can I add a custom attribute to each row of a MUI DataGrid (pro) table?

I need to add an attribute 'data-testid' to each row of a table, but I cannot figure out how to do so using MUI DataGrid Pro. Adding classNames is possible (using getRowClassName), but adding an attribute, along with its value (something like 'data-testid='row-{key}', seems more complicated.

Someone already asked a similar question, but for columns - the solution cannot seem to be applicable to rows.

I tried using getRowClassName and slotProps, with no success. I also tried to find workarounds and move the attribute to the cell level with renderCell() but I really need the attribute to be at the row level.

Thanks!

Upvotes: 5

Views: 3443

Answers (1)

vsync
vsync

Reputation: 130700

Use a custom component as the row slot by importing GridRow component and wrap it:

import { GridRow, DataGridPro } from '@mui/x-data-grid'

const CustomGridRow = (props) => (
  <GridRow
    {...props}
    data-test-id={props.foo}
  />
)

...
// lots of code...
...

<DataGridPro 
  rows={rows}
  columns={columns}
  // ...some more props...
  slots = {
    row: CustomGridRow,
  }
/>

It could have been easier if slotProps would have accepted a function for the slots, but it sadly only accepts an object.

Upvotes: 1

Related Questions