如何在ag-grid中仅一个标题行动态设置高度以进行反应答案

【问题标题】：How to dynamically set the height on just one header row in ag-grid for react如何在ag-grid中仅一个标题行动态设置高度以进行反应
【发布时间】：2021-08-22 12:35:19
【问题描述】：

此方法设置高度

gridApi.setHeaderHeight(height);

但问题是它为两个标题组设置了高度。

 (Header group spans entire width)<------------------------- height gets set here
                                                            
(Header1    | Header 2   | header 3)<------------------------ and height gets set here
------------------------------------
row data 1 | row data 2 | row data 3

如何设置一个标题行的高度

 (Header group spans entire width)
                                                            
(Header1    | Header 2   | header 3)<------------------------ This row one only
------------------------------------
row data 1 | row data 2 | row data 3

查看示例：https://codesandbox.io/s/ag-grid-practice-forked-py43m?file=/src/index.tsx

单击展开，可以看到两个列标题组的高度都展开了。

【问题讨论】：

标签： reactjs ag-grid

【解决方案1】：

我认为这是不可能的。可以使用以下方法，但它们会在标题中设置整行的高度。我认为只为其中一列增加标题是一个相当奇怪的设计决定。

gridApi.setHeaderHeight(value) 
gridApi.setGroupHeaderHeight(value)

【讨论】：

这不是我要设置高度的单列。它的行。问题是如果我使用 setHeaderHeight 它会设置所有标题组的高度。为了清楚起见，更新了我的问题
您是否将此代码用于组和列？
如果是这样，请尝试使用我之前回答中的代码。创建 customHeaderGroupComponent。然后更改组的高度使用方法 gridApi.setGroupHeaderHeight(value) 并更改列标题的高度使用方法 gridApi.setHeaderHeight(value)
好的，我添加了一个示例 - 请参阅 - codesandbox.io/s/ag-grid-practice-forked-py43m?file=/src/…
我看了你的例子，你是对的，确实如此。然后我去了ag grid的官方网站并在那里查看了它。这对他们也不起作用。 ag-grid.com/react-grid/column-headers/#dynamic-header-heights setGroupHeaderHeight 只为组设置高度，但 setHeaderHeight 为组和列标题设置高度。

【解决方案2】：

好的，我想出了一个解决方案来规避这个问题。

更简单的版本：

https://codesandbox.io/s/ag-grid-custom-setaddedcolheight-sypg2?file=/src/Grid/Columns.tsx

更动态的版本：

https://codesandbox.io/s/ag-grid-custom-setaddedcolheight-expand-reduce-mh8rw?file=/src/Grid/Columns.tsx

【讨论】：