How to center header using aggrid?

[tz301]

Question

I can use 'cellStyle': {'textAlign': 'center'} to center cell, but I haven't find how to center header below.

ui.aggrid(
  {
      'columnDefs': [{'field': 'name', 'headerName': 'Name', 'cellStyle':  {'textAlign': 'center'}}],
      'rowData': [{'name': 'Alice'}, {'name': 'Bob'}],
  }
)

[falkoschindler]

Hi @tz301,

According to https://stackoverflow.com/questions/46490177/how-can-i-center-the-text-in-the-headers-for-an-ag-grid-control we can't control the header alignment via AG Grid options, but with custom CSS:

ui.add_style('''
    .ag-header-cell-label {
        justify-content: center;
    }
''')

ui.aggrid({
    'columnDefs': [{'field': 'name', 'headerName': 'Name', 'cellStyle':  {'textAlign': 'center'}}],
    'rowData': [{'name': 'Alice'}, {'name': 'Bob'}],
})

Or if you want to target a specific AG Grid element:

ui.add_style('''
    .my-aggrid .ag-header-cell-label {
        justify-content: center;
    }
''')

ui.aggrid({
    'columnDefs': [{'field': 'name', 'headerName': 'Name', 'cellStyle':  {'textAlign': 'center'}}],
    'rowData': [{'name': 'Alice'}, {'name': 'Bob'}],
}).classes('my-aggrid')

[tz301]

Thanks!