How to make cell content in ag-grid centered vertically?

Question

I am trying to decrease the row height of ag-grid by setting gridOptions.rowHeight . While this indeed decreases the row height, but the content is not centered vertically in the row. What's the best way to do this?

I also tried changing the grid-size parameter of the theme, but it runs into the same issue.

Here's the grid without any gridOptions . I measured the row height to be 42px (although the docs say that it should be 25px ).

Here's what I get when I reduce the row height to 36px ( gridOptions={{ rowHeight: 36 }} ):

Notice that the content is no longer vertically centered.

This becomes even more apparent when I increase the row size to 100px . The content is clearly not centered.

Answer 1

Cell content can be vertically aligned using css only.

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

You can also add inline styles in the column definitions.

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

Live Demo