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

user_293680 0
Viewed 750

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).

enter image description here

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

enter image description here

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.

enter image description here

ag-grid-react ag-grid reactjs css
1 Answers

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

Edit 64058096/decreasing-row-height-in-ag-grid

user_94494260
Related