[DataGrid] Accept row argument in valueFormatter

[TiagoPortfolio]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

In the DataGrid component, this is how we can declare a column:

{
  field: 'time',
  headerName: 'Time',
  valueGetter: ({ row }) => row.time.seconds,
  renderCell: ({ row }) => (
    <span>row.time.formatted</span>
  )
}

In this example, I am using renderCell to display the formatted value on the table for the following time object:

type Time = {
  seconds: number
  formatted: string
}

I am parsing the data from the server to be already formatted on my components.
But now I want to export this data as CSV and I want to display the formatted value on the file. For this, I have to use valueFormatter to format the value.
This is how I can get the formatted value using valueFormatter:

{
  field: 'time',
  headerName: 'Time',
  valueGetter: ({ row }) => row.time.seconds,
  valueFormatter: ({ api, id }) => {
    if (id !== undefined) {
      const row = api.getRow<Data>(id)

      return row?.times.formatted
    }

    return ''
}

I think a better approach would be just to make row available on the valueFormatter params

{
  field: 'time',
  headerName: 'Time',
  valueGetter: ({ row }) => row.time.seconds,
  valueFormatter: ({ row }) => row.time.formatted,
}

I believe that many developers are already parsing and formatting the data from the server to be already formatted when the data is used on components. This has the obvious advantage of only needing to format once instead of on every single component where the data is needed. Another advantage is, if we add too much format logic to the valueFormatter function, it can be bad performance-wise because that logic will run on every render (I may be wrong).

In short, my suggestion is to make row argument available on the valueFormatter function :)

Examples 🌈

Expected behavior

Use row argument in valueFormatter

{
  field: 'time',
  headerName: 'Time',
  valueGetter: ({ row }) => row.time.seconds,
  valueFormatter: ({ row }) => row.time.formatted,
}

Motivation 🔦

I was displaying the formatted value on the DataGrid using renderCell but the requirement to be able to export the data from the DataGrid was raised.
With this requirement, I have to use valueFormatter instead to display the formatted value on the exported file.
After converting to valueFormatter, I faced the problem where the valueFormatter function doesn't make much sense if I am not able to access the row to get the formatted value that I have previously formatted.

Order ID 💳 (optional)

54728

[cherniavskii]

Thanks for your suggestion, @TiagoPortfolio!
We might want to make valueFormatter's params more consistent with the ones from valueGetter

[romgrk]

We'll need to update the API for v7 by replacing the params object (params: {...}) => string by passing arguments directly (row, column, etc) => string.

[mhuggins]

I'm interested in this as well. Specifically, when rendering currencies, the numeric currency value is on one field of a row, while the currency (needed to use for formatting) is stored on a separate field of a row.

[cherniavskii]

Closing in favor of #10741