javascriptreactjstypescriptmaterial-uimui-x-data-grid

Why are params undefined in valueGetter but not in renderCell when using MUI datagrid?


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.


Solution

  • 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'
                  }
                }