How to 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'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/

Right align column headers in AgGrid

You would need to make these 2 changes to the css file to make it happen... since there is a little burger menu which gets visible on hover also.

::ng-deep .ag-cell-label-container{flex-direction: row}
::ng-deep .ag-header-cell-label { flex-direction: row-reverse; }

Forked your stackblitz with this change here

How can i align column headers for some fields to be on the left and others on the right in Ag Grid?

The column headers are left-aligned by default.

To right-align a column header, you can set the column definition's 'type' property to either 'rightAligned' or 'numericColumn', which is an alias for 'rightAligned'.

The documentation is at https://www.ag-grid.com/javascript-grid-column-definitions/#right-aligned-and-numeric-columns

Ag-Grid Header Align Center is not Working - Angular 9

Referring to override ag-grid styles

You need to use this part :

  styles:[`
      .ag-header-group-cell-label { justify-content: center; }
      .ag-header-cell-label { justify-content: center; }
  `],

ag-header-group-cell-label - for grouped headers

ag-header-cell-label - for normal headers

Demo

Vertically center the text in the group headers for an AgGrid control using CSS?

Your approach is in the right direction. But if you inspect the element, you can see that the container that contains the arrow and the cell text has a class name called ag-cell-wrapper, so you need to target that element instead:

/* increase CSS specificity to override the ag-grid styles */
.ag-cell-wrapper.ag-cell-wrapper.ag-cell-wrapper {
  display: flex;
  align-items: center;
}

Codesandbox Demo

Remove the horizontal start- and end-gap for headers and cells

Not sure which theme you're using but looks like the default one is theme-alpine and in the examples this is the theme used. If so, you could override the left-padding property like this at the end of a CSS file:

.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine .ag-header-group-cell {
        padding-left:  0px !important;
        padding-right: 0px !important;
}

For the other rows, it seems you can do it in the code and set the style in the columnDefs as follows:

// Create column definitions
const columnDefs = [
{
        // ...
        cellStyle: { 'padding-left': 0 }
        // ...
}]

// Create grid options
const gridOptions = {
        columnDefs: columnDefs,
};

// Grid creation
new agGrid.Grid(gridDiv, gridOptions);

If you're using Sass, there may be another possibility using theme parameters as described here, in particular this one:

// Horizontal padding for grid and header cells (vertical padding is not set explicitly, but inferred from row-height / header-height)
cell-horizontal-padding: ag-derived(grid-size, $times: 3),

Reference
https://www.ag-grid.com/javascript-data-grid/themes-customising/#customising-themes-using-css-rules