Как сделать содержимое ячейки в ag-grid центрированным по вертикали?

#css #reactjs #ag-grid #ag-grid-react

#css #reactjs #ag-grid #ag-grid-реагировать

Вопрос:

Я пытаюсь уменьшить высоту строки ag-grid, установив gridOptions.rowHeight . Хотя это действительно уменьшает высоту строки, но содержимое не центрируется по вертикали в строке. Каков наилучший способ сделать это?

Я также попытался изменить grid-size параметр темы, но он сталкивается с той же проблемой.

Вот сетка без каких-либо gridOptions . Я измерил высоту строки, которая должна быть 42px (хотя в документах говорится, что она должна быть 25px ).

Вот что я получаю, когда уменьшаю высоту строки до 36px ( gridOptions={{ rowHeight: 36 }} ):

Обратите внимание, что содержимое больше не центрировано по вертикали.

Это становится еще более очевидным, когда я увеличиваю размер строки до 100px . Содержимое явно не центрировано.

Ответ №1:

Содержимое ячейки можно выровнять по вертикали только с помощью css.

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

Вы также можете добавить встроенные стили в определения столбцов.

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