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

huangapple go评论49阅读模式
英文:

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

问题

codesandbox 复制此问题: https://codesandbox.io/s/stupefied-gagarin-jgcnfl?file=/demo.tsx:563-672

渲染这个虚构示例的相关代码部分是 'asdf' 的 Id 行:

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

正如您所看到的,“asdf” 在可展开的组标题上呈现。我如何隐藏它,仅在展开组后显示它。注意:我需要返回 JSX,所以无法使用 valueFormatter

英文:

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: &quot;id&quot;,
  headerName: &quot;ID&quot;,
  width: 100,
  renderCell: (params) =&gt; &lt;div&gt;&quot;asdf&quot;&lt;/div&gt;
}

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

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

答案1

得分: 1

renderCell: ({ rowNode }) =&gt; (
    rowNode.type === &quot;group&quot; ? null : &lt;div&gt;asdf&lt;/div&gt;
)
英文:
renderCell: ({ rowNode }) =&gt; (
    rowNode.type === &quot;group&quot; ? null : &lt;div&gt;asdf&lt;/div&gt;
)

huangapple
  • 本文由 发表于 2023年4月4日 05:39:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/75923969.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定