How can I prevent a value from being rendered in the group header when using renderCell on a column in Material UI’s DataGrid?

Question

codesandbox replicating this issue: https://codesandbox.io/s/stupefied-gagarin-jgcnfl?file=/demo.tsx:563-672

relevant piece of code that renders this contrived example of 'asdf' for the Id row.:

{
  field: "id",
  headerName: "ID",
  width: 100,
  renderCell: (params) => <div>"asdf"</div>
}

And as you can see "asdf" render at on the expandable group header. How can I hide this and only show it for the rows once you expand the group. Note: I need it to return JSX, so I cannot use valueFormatter

Answer 1

renderCell: ({ rowNode }) => (
    rowNode.type === "group" ? null : <div>asdf</div>
)