我有一个React网站，并且正在用ag-grid显示项目列表，为简单起见，让我们考虑一下我出售的食品列表。例如汉堡包，芝士汉堡，薯条，汽水等。我已经在进行排序和分组逻辑来满足用户的需求。
下一步需要添加的一项功能是，当您选择某个“查看模式”时，为每行显示一个“相关数据”项的集合。在此示例中，将单击切换按钮以显示或隐藏每种食品的营养信息。
在我的脑海中，我想它看起来像是一个带有待售商品的普通网格，然后，如果您单击网站顶部的查看营养信息按钮，则会在每个网格行下方展开一个“子行”，理想情况下，它是食品行的一部分-本身不是带有展开和收缩按钮的单独节点，因为我不希望用户对此进行任何控制。您可以在每个带有相关数据的网格行下方显示一个辅助数据区域，或者将其折叠以仅显示主数据行。
我的每个FoodItem对象都有一个嵌套的对象，称为NutritionalInfo，它是键值对（例如卡路里，脂肪，蛋白质和数字）的字典。
我知道如何设计自定义单元格渲染器，以在该行的特定单元格中绘制营养数据的漂亮表格，但是我想要的是数据不会出现在行本身中，而是出现在空白区域中，在每一行下打开，类似于该行有一个子节点，但没有扩展/收缩行为。
有人可以建议我如何使用ag-grid实现这一目标吗？