3

Is the following format possible with ag-grid:

  • Merged header with blank name
  • Merged header with name in 2 lines ("Original Values")
  • Parent header centered ("Header with children")

enter image description here

iPhoneJavaDev
  • 821
  • 5
  • 33
  • 78

3 Answers3

2

I'm struggling with this for quite a while, but i can not find a good solution. Anyway i figured out a solution (at least for my self).

In my case, the headers are dynamic. Only some headers have children.

Here is the solution:

  1. Figure out how many rowspan should a header have

enter image description here

  1. Apply class to header

In your columnDefs, use 'headerClass'

const rowSpanClass = .....  // This is calculated base on the data you have or set it static
columnDefs = { 
   ....
   ....
   headerClass: rowSpanClass, // In my case, if it is 2 rowspan, i call it 'header-row-span-2'
   ......
}

  1. Apply style on the custom header class

    .header-row-span-2 { position: fixed; top: 50px; height: 100px; }

    .header-row-span-3 { position: fixed; top: 100px;
    height: 150px; }

The value of 'top' and 'height' need to be changed accordingly (ag-grid header height is 50px by default)

thavorac
  • 71
  • 7
  • One good point is you don't need to be precise with "height" since the background is most probably empty. – dimplex Apr 28 '23 at 14:59
1

Just to share. I think this is not possible using the headers in ag-grid. So, instead, I set the headerheight to 0 and use the row cells to achieve the header format.

iPhoneJavaDev
  • 821
  • 5
  • 33
  • 78
  • but then we loose all the rich features of the grid. Anyone with a solution? That's a good question they ignored here too: https://github.com/ag-grid/ag-grid/issues/2491 – KitAndKat Jul 24 '20 at 10:11
1

I know it is been too late for the answer but just to help another people know it.

Yes, it is possible with an updated version of ag-grid, please check it out.

var columnDefs = [ {
    headerName: 'Athlete Details',
    children: [
    {
        headerName: 'Athlete',
        field: 'athlete',
        width: 150,
        suppressSizeToFit: true,
        enableRowGroup: true,
        rowGroupIndex: 0,
    },
    {
        headerName: 'Age',
        field: 'age',
        width: 90,
        minwidth: 75,
        maxWidth: 100,
        enableRowGroup: true,
    }] 
}];
Mofi
  • 46,139
  • 17
  • 80
  • 143
Vikash G.
  • 37
  • 2
  • This example still creates a divided header for `Original Values` and thus not answering the question. Additionally, the plnkr is blank. – Tom.A Jan 22 '23 at 14:49