Formatting Grouping Rows on AG-Grid

While cell and row-level formatting is fairly straightforward, formatting the header rows after grouping is a different matter entirely. Here’s how we did it in Angular:

We used the global style sheets (which is awful, but it seems to be necessary)

rowClassRules from the GridOptions.

So here’s an example of some row class rules.

// row class examples
this.gridOptions.rowClassRules = {
      'group-header-beige': params => headerClasser(params, 'beige'),
      'group-header-blue': params => headerClasser(params, 'blue'),
      'permit-reviewing': params => {
        let status = (params.data?.permitStatus|| '').toLowerCase();
        if (status === 'permit reviewing') {
          return true;
        }
      },
      'on-hold-row': params => {
        let status = (params.data?.jobStatus || '').toLowerCase();
        if (status === 'on hold') {
          return true;
        }
      }
}

So those rules are actually going to set the CSS class for the row. Now, you can see I’ve got things like ‘group-header-beige’ attached to a seperate function while others are using an inline function. That’s pretty basic. The ‘params’ is the row in the ag-grid, params.data has the data. then the return value is either true or false. If it’s true, then the class will be whatever is on the left. For example, if the jobStatus value is ‘on hold’, then the css class will be ‘on-hold-row’. The CSS, unfortunately, has to be on the global style sheet. So, if you have a bunch of these that are different, you’re going to have naming hell, but if you want them all to match, then you may enjoy it.

The logic is top-down. So, in this case, if the “permitStatus’ was ‘permit reviewing’, then the cssClass would be set to permit-reviewing. However, it goes right to the next one and if the job status is ‘on hold’, then the cssClass ‘permit-reviwing’ would be replaced with ‘on-hold’.

Got it? Not to complicated, but it wasn’t exactly intuitive.

Next, Group headers.

So the headers work the same exact way. If you’ve got something grouped, you’re not going to have the same data in the cells, they’re going to be header cells. We wrote a simple function to handle it

 function headerClasser(params, color) {
      let retval = false;
      if (!params.data) {

        let h = params.node.groupData["ag-Grid-AutoColumn"];
        h = (h) ? h = h.toUpperCase() : retval = false;
        if (!h) {
          h = params.node.key;
        }        
        if (color == 'blue') {
          retval = (h == 'CCM SO' || h == 'CCM NB' || h == 'PERMIT PENDING' || h == 'CIVIL ONLY' || h == 'ACTIVE') ? true : false;
        }      
        if (color == 'beige') {
          retval = (h == 'JOB FOLDERS NOT RECEIVED') ? true : false;
        }
      
      }
      return retval

    }

So that’s a weird structure, right?

Basically, we send the param (which is just the full row from AG-Grid) and the “color”. This is just crazy, but it works.
So, it’s going to run through the row class rules, in order, for each row. If it gets a “true” value back, then the CSS class is set. So, what we do is we use the same function and simply include color as a switch. So, when it hits the class test for ‘group-header-beige’, it’s sending the row and also the word ‘beige’. Then, you do some validation to make sure it’s a header row with some values, then you return a true or false value. So, if the header was ‘JOB FOLDERS NOT RECEIVED’, and the “color” was ‘beige’, then the return would be true. Then, the class for the row would be set to ‘group-header-beige’.

And then, it will move right on to the next one, perhaps changing the class to something else entirely.