0

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

enter image description here

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
Embedded_Mugs
  • 2,132
  • 3
  • 21
  • 33

1 Answers1

1
renderCell: ({ rowNode }) => (
    rowNode.type === "group" ? null : <div>asdf</div>
)
Tamás Katona
  • 683
  • 7
  • 13
  • Thanks for your help that worked. Would you know how to handle the case when using `valueFormatter`. In my case I am doing `valueFormarmatter: ({value}) => formatNumber(value)` and `formatNumber` returns a dash `-` when `value` is undefined so it shows a dash in the group header. I guess the only solution is to use CSS to hide the non-first group header values? – Embedded_Mugs Apr 04 '23 at 14:31
  • 1
    can u give an example? (I'm not sure I understand, what and how do u want to format) – Tamás Katona Apr 04 '23 at 15:33
  • see this codesandbox of a more simpler example: https://codesandbox.io/s/focused-greider-8du7z2?file=/demo.tsx:2106-2225 Notice 'asdf' is visible in the group header for the Name column. I want it to be hidden in the group header ( but visible in the rows once you expand). I'm thinking css is the through the `sx` prop is the only way? – Embedded_Mugs Apr 04 '23 at 16:54
  • 1
    u can use "renderCell" & "formatValue" togethaa, render cell will receive the formatted value ``` valueFormatter: () => "asdf", renderCell: ({ rowNode, value }) => ( rowNode.type === "group" ? null :
    {value}
    ), ˙```     – Tamás Katona Apr 05 '23 at 08:24