I'm trying to set the value of a column based on the value of other columns in my datagrid. It works when setting what to render in rendercell but params is undefined when passed to valuegetter. What do I need to do to access the other values in a row from the valuegetter?

Simplified Example

      renderCell: (params: GridCellParams) => {
                const today = new Date();
                if (Date.parse(params.row.effectiveStartDateEst) > today){
                    return <Chip label='Inactive'/>
                }
                else{
                    return <Chip label='Active' color='success' />
                }
            },
      valueGetter: (params: GridCellParams) => {
              const today = new Date();
              if (Date.parse(params.row.effectiveStartDateEst) > today){
                return 'Inactive'
              }
              else{
                return 'Active'
              }
            }

The above code works in rendercell but errors due to undefined values in valuegetter.

I'm trying to set the value of a column based on the value of other columns in my datagrid. It works when setting what to render in rendercell but params is undefined when passed to valuegetter. What do I need to do to access the other values in a row from the valuegetter?

Simplified Example

      renderCell: (params: GridCellParams) => {
                const today = new Date();
                if (Date.parse(params.row.effectiveStartDateEst) > today){
                    return <Chip label='Inactive'/>
                }
                else{
                    return <Chip label='Active' color='success' />
                }
            },
      valueGetter: (params: GridCellParams) => {
              const today = new Date();
              if (Date.parse(params.row.effectiveStartDateEst) > today){
                return 'Inactive'
              }
              else{
                return 'Active'
              }
            }

The above code works in rendercell but errors due to undefined values in valuegetter.

• javascript
• reactjs
• typescript
• material-ui
• mui-x-data-grid

• 1 which version are you using? i see a breaking change between v6 and v7. the valueGetter signature is different and the GridCellParams interface was removed. their docs search for "valueGetter". perhaps you are viewing old docs? – sparkJ Commented Mar 31 at 14:57
• This was the issue. I had to replace (params) with (value, row) in valueGetter and then use row to access the values I needed. – JWillis Commented Mar 31 at 21:09

1 Answer 1

In case anyone else runs into this, sparkJ's comment is correct. You need to replace (params) with (value, row) and use row to access the value. The correct valuegetter code should be:

valueGetter: (value, row) => {
              const today = new Date();
              if (Date.parse(row.effectiveStartDateEst) > today){
                return 'Inactive'
              }
              else{
                return 'Active'
              }
            }