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.

score 2 · Accepted Answer · answered Sep 25 '20 at 05:57

2

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

answered Sep 25 '20 at 05:57

NearHuscarl

66,950
18
261
230

Thanks. Works like a charm! Surprised that the docs don't address this. – Naresh Sep 25 '20 at 13:19

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

1 Answers1

Live Demo