javascript - Why are params undefined in valueGetter but not in renderCell when using MUI datagrid? - Stack Overflow

admin管理员组

文章数量:1355535

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

Share Improve this question Follow asked Mar 31 at 14:07 JWillisJWillis 3755 bronze badges New contributor JWillis is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 2

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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'
              }
            }

本文标签：