CODEWITHSUNDEEP
javascriptcssreactjsag-gridag-grid-react
user7400346
user7400346

Reputation: 909

How can I center the text in the headers for an AG-grid control?

How can I center the text in the headers for an AG-grid control? I have tried using cellstyle and cellclass in the column definition but that did not work. Thank you

Upvotes: 46

Views: 105362

Answers (14)

Alex Wachira
Alex Wachira

Reputation: 1335

I'm using React and I just added the following snippet to my Table component's .css

.ag-header-cell-label {
  justify-content: center;
}

I'm overriding the .css class class from ag-grid which I found via devtools inspection, and discovered it's using flexbox for display.

See example (not react but same concept): https://embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/

Upvotes: 49

Dinesh Khetarpal
Dinesh Khetarpal

Reputation: 372

:host ::ng-deep .my-center-header-class .ag-header-cell-text {
    width: 100%;
    text-align: center;
}

Set headerClass as 'my-center-header-class' in colDef

Upvotes: 1

O Thạnh Ldt
O Thạnh Ldt

Reputation: 1221

My CSS:

/*HEADER STYLE*/
        .ag-theme-alpine .ag-header-cell {
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .ag-right-header .ag-header-cell-label {
             flex-direction: row-reverse;
        }
    
        .ag-center-header .ag-header-cell-label {
            justify-content: center;
        }

        .ag-left-header .ag-header-cell-label {
            flex-direction: row;
        }

        .ag-center-cell {
            text-align: center;
        }

        .ag-right-cell {
            text-align: right;
        }

        .ag-left-cell {
            text-align: left;
        }

And use inside columnDefs:

{
                headerName: 'header_name',
                field: 'header_field',
                headerClass: "ag-center-header",
                cellClass: "ag-center-cell"
            }

Upvotes: 2

zodiake
zodiake

Reputation: 1

columndef has a property. headerClass: '', you can add css to header

Upvotes: 0

Akash
Akash

Reputation: 11

you can do this by overriding the css like:-

    ::ng-deep .ag-header-group-cell-label {
      justify-content: center !important;
    }
    
    ::ng-deep .ag-header-cell-label {
      justify-content: center !important;
    }

Thanks

Upvotes: 1

masoud khorshidi
masoud khorshidi

Reputation: 28

I'm using angular and I just want to center text in the grouped header so use this code to style.css

.ag-header-group-cell-label {
  justify-content: center;
}

Upvotes: 0

Stefanos Chrs
Stefanos Chrs

Reputation: 2518

A more complete solution I've been using for a while now, is to create a column definition helper like this:

export const columnCentered = {
  headerClass: 'text-center',
  cellStyle: {
    textAlign: 'center',
    // Add the following if you are using .ag-header-cell-menu-button 
    // and column borders are set to none.
    // marginLeft: '-16px'
  }
}

then add the following to your style.scss

.ag-header-cell.text-center {
  .ag-header-cell-label {
    justify-content: center;
  }
}

finally you can easily use it like this:

columnDefs: [
  { field: 'normalCol' },
  { field: 'centeredColA' ...columnCentered },
  { field: 'centeredColB' ...columnCentered }
]

Upvotes: 14

James
James

Reputation: 1780

To use a custom class, add headerClass: "text-center" to the column definition and css as follows:

text-center * {
    justifyContent: center
}

Upvotes: 6

Pramesh Bajracharya
Pramesh Bajracharya

Reputation: 2263

I'm using Angular 8 and AG-Grid is nested deep in some other component.

I had to do this in order to make it work.

.ag-header-group-cell-label {
      justify-content: center !important;
}

And, this strictly needs to be under styles.scss file and not in the component scss file. Or else, it will not work.

Hope this helps someone.

Upvotes: 2

akash mishra
akash mishra

Reputation: 137

If you want to align your text right, left or center in ag-grid. Then use this:-

cellStyle: { textAlign: 'right' }
cellStyle: { textAlign: 'left' } 
cellStyle: { textAlign: 'center' }

Upvotes: 4

ZooZ
ZooZ

Reputation: 971

Assign a class to the cell as below:

gridOptions = {
  ...
  columnDefs: [
    ...
        { headerName: "field1", field: "field1", cellClass: "grid-cell-centered"}
    ...
  ]
}

css file:

.grid-cell-centered {
  text-align: center;
}

Upvotes: 4

PHAM Cong Cuong
PHAM Cong Cuong

Reputation: 51

It should be: 

.ag-header-cell-label {
  text-align: center;
}

Upvotes: 1

Alex P.
Alex P.

Reputation: 1158

For (independent) customization of each header, you can make a custom header component: https://www.ag-grid.com/javascript-grid-header-rendering/

Upvotes: 2

Maharramoff
Maharramoff

Reputation: 1021

You may use this property:

cellStyle: {textAlign: 'center'}

Upvotes: 19

Related Questions