CODEWITHSUNDEEP
reactjsag-grid
Paul
Paul

Reputation: 1441

ag-grid table: Vertical-align: middle

I am using the framework ag-grid () I have changed the row-height to 50px.

<div 
  className="ag-theme-balham"
  style={{ 
    height: '90vh', 
    width: '100%',
    'font-size': '18px',
    'row-height': '50px'
    }} 
    >
    <AgGridReact        
        rowHeight={50}
        columnDefs={columnsTaenze}
        rowSelection={'multiple'}
        onFirstDataRendered={this.autoSizeAll}
        rowDragManaged={true}
        enableColResize={true}
        animateRows={true}
        rowData={this.props.tabledata}
        enableFilter={true}
        onRowDragEnd={this.onRowDragEnd}>
    </AgGridReact>
</div>

Sadly, I can not manage to center the cell vertically.

I have tried to change many classes, including ag-cell. My css I tried:

.ag-cell{
    line-height: 50px;
    height: 100%;
    vertical-align: middle;
}

But the cell isn`t centered: enter image description here

//Edit / TIP

If you want to do yourself a favor, you should switch to react-table from Tanstack NOT AG-GRID company

Upvotes: 13

Views: 33335

Answers (6)

Ben in CA
Ben in CA

Reputation: 851

Consider adding the AG Grid option:

enableCellTextSelection={true}

I'm not sure why, this this then changes the text from being near the top:

enter image description here

to centered vertically:

enter image description here

Upvotes: 0

Afeesudheen
Afeesudheen

Reputation: 1024

You can set cell style to following

 cellStyle: {
        'height': '100%',
        'display': 'flex ',
        'justify-content': 'center',
        'align-items': 'center ',
      },

This will work fine.

Upvotes: 9

cjg
cjg

Reputation: 11

If you are noticing the same problem as the user above after upgrading to v28, probably you'll need to adjust the CSS/SASS imports. Not sure why this is not more explicit on the changelog.

In summary, you will need to drop the /dist part in the path:

<!-- old path -->
<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/styles/ag-grid.css" />

<!-- new path -->
<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/styles/ag-grid.css" />

Reference:

https://www.ag-grid.com/archive/28.0.0/angular-data-grid/global-style-upgrading-to-v28/

https://www.ag-grid.com/archive/28.0.0/angular-data-grid/global-style-upgrading-to-v28-css/

Upvotes: 0

Greg R Taylor
Greg R Taylor

Reputation: 3676

After upgrading ag-grid to version 28, I've noticed the vertical center alignment has been lost.

Below is a solution that retains the text-overflow: ellipsis (...) and overflow: hidden CSS rules when the text exceeds cell width.

Tested in ag-grid version 28.2.0

.ag-cell-wrapper {
    height: 100%;
}

Upvotes: 2

Rob Carpenter
Rob Carpenter

Reputation: 689

To build on @Paritosh's answer...

You don't have to overwrite the ag-grid styles themselves. You can do something like this in your own stylesheet:

.cell-vertical-align-text-left {
  display: flex!important;
  align-items: center;
}

.cell-vertical-align-text-right {
  display: flex!important;
  flex-direction: row-reverse;
  text-align: right!important;
  align-items: center;
}

Then in your ag-grid column definition use your custom css style in the cellClass property.

var columnDefs = [
  {
    headerName: "Alerts",
    colId: 'invoice_issues',
    editable: false,
    cellClass: "cell-border cell-vertical-align-text-right",
    valueGetter: showInvoiceIssues,
    autoHeight: true,
  }
]

Upvotes: 8

Paritosh
Paritosh

Reputation: 11570

You can use below CSS. No need to use hard-coded values in CSS for height.

.ag-row .ag-cell {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;
}

Have a look at this plunk: ag-grid: text-align vertically center

Upvotes: 25

Related Questions