VueJS - How to have a custom headerName of columnDefs in ag-grid-vue

Question

I am trying to display my header name in a new line, but i am unable to do it.

Version of ag-grid-vue: 6.12.0

Here is what i tried but it did not work out:

defaultColDef: {
        sortable: true,
        editable: true,
        resizable: true,
        suppressMenu: true
      },
columnDefs: [
  {
    headerName: 'Average low ',  // This value is displayed in a single line
    field: 'average_low',
    width: 200,
  },
  {
    headerName: 'Average high ', // Even this value is displayed in a single line
    field: 'average_high',
    width: 200,
  },
...
}

I tried something like this to display the headerName in new line:

      {
        headerName: 'Avg. \n low ',  // This value is displayed in a single line
        field: 'average_low',
        width: 200,
      },
      {
        headerName: 'Avg. </br> high ', // Even this value is displayed in a single line
        field: 'average_high',
        width: 200,
      },

I want to display something like this:

Please tell me how i can do this. Here is the officially documentation:

https://www.ag-grid.com/documentation/vue/component-header/

and here is the plunker which shows the example and can be used to workout:

https://plnkr.co/edit/QGopxrvIoTPu2vkZ

kissu kissu · Accepted Answer · 2021-02-02T13:50:31

EDIT: here is a working solution >> https://plnkr.co/edit/Lr6cneCFiT91lCOD
Adapt it to your liking with the according theme (alpine, balham and so on) and the height that you wish or any other CSS structure that you have.
As told below, this inspired by this guy's work.

A working solution can be done with the script below

const MIN_HEIGHT = 80; // this line is the one you're looking for ! 

function autosizeHeaders(event) {
    if (event.finished !== false) {
        event.api.setHeaderHeight(MIN_HEIGHT);
        const headerCells = document.querySelectorAll('#myGrid .ag-header-cell-label');
        let minHeight = MIN_HEIGHT;
        headerCells.forEach(cell => {
            minHeight = Math.max(minHeight, cell.scrollHeight);
        });
        event.api.setHeaderHeight(minHeight);
    }
}

(function() {
    document.addEventListener('DOMContentLoaded', function() {
        var gridDiv = document.querySelector('#myGrid');
        var gridOptions = {
            enableColResize: true,
            enableSorting: true,
            onColumnResized: autosizeHeaders,
            onGridReady: autosizeHeaders,
            columnDefs: [
                {
                    headerName: 'Header with a very long description',
                    field: 'name',
                    headerClass: 'multiline'
                },
                {
                    headerName: 'Another long header title',
                    field: 'role',
                    headerClass: 'multiline'
                }
            ],
            rowData: [
                {name: 'Niall', role: 'Developer'},
                {name: 'Eamon', role: 'Manager'},
                {name: 'Brian', role: 'Musician'},
                {name: 'Kevin', role: 'Manager'}
            ]
        };
        new agGrid.Grid(gridDiv, gridOptions);
    });
})();

There is a github issue here with a Stackoverflow thread with a lot of hacky (but working) solutions. It looks like there is no official support for this, so your best bet would be to check there and try out the various CSS solutions.

If you have a hosted example that we can play with, I may help more but right now, I can only recommend reading the various comments and try to tinker the CSS with your dev tools ! :)

VueJS - How to have a custom headerName of columnDefs in ag-grid-vue

1 Answers