如何使ag-grid中的单元格内容垂直居中？

Question

我试图通过设置

gridOptions.rowHeight

来降低ag-grid的行高。虽然这确实降低了行高，但内容并未在行中垂直居中。最好的方法是什么？

我也尝试更改主题的

grid-size

参数，但遇到了同样的问题。

这是没有任何

gridOptions

的网格。我测量行高为

42px

（尽管文档说它应该是

25px

）。

这是当我将行高减小到

36px

(

gridOptions={{ rowHeight: 36 }}

) 时得到的结果：

请注意，内容不再垂直居中。

当我将行大小增加到

100px

时，这一点变得更加明显。内容显然没有居中。

Answer 1

单元格内容只能使用 css 垂直对齐。

.ag-cell {
  display: flex;
  align-items: center;
}

您还可以在列定义中添加内联样式。

<AgGridReact
  rowHeight={50}
  defaultColDef={{
    cellStyle: (params) => ({
      display: "flex",
      alignItems: "center"
    })
  }}
  {...}
/>

现场演示

Answer 2

我对 ag-grid 自定义单元格渲染器也有同样的问题，该渲染器包含应垂直居中的图像。

我通过在

init()

调用期间向单元格渲染器添加 CSS 类来解决这个问题...

init(params: MyCellRendererParams) {

    const parentElement = params.eParentOfValue;
    parentElement.classList.add("my-cell-renderer-parent");

    // ...
}

将其子元素设计为非常居中并且......

.my-cell-renderer-parent {
  display: flex;
  align-items: center;
}

...为所有

text-overflow: ellipsis

子级添加了

ag-cell-wrappers

（因为

overflow

属性不再与父级上的

display: flex

一起使用）：

.my-cell-renderer-parent .ag-cell-wrapper {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}