How to style column groups - angularjs

Question

I have a large table that spans multiple horizontal screen widths on a normal display because it has many columns. These columns are grouped in column groups, which can be quite large. Now I have the problem that when looking at the values in the table, it is not directly visible in which column group a cell is because the only visual guide is in the column header. Since in my use case there are multiple column groups with similar information, it is quite hard to tell which cell belongs to which column group and/or column.
Let's say we have the following column defs:
var columnDefs = {
headerName: "Sports Results 2016",
marryChildren: true,
children: [
{headerName: "Gold", field: "gold", width: 75},
{headerName: "Silver", field: "silver", width: 75},
{headerName: "Bronze", field: "bronze", width: 75},
{headerName: "Total", field: "total", width: 75}
]
},
{
headerName: "Sports Results 2017",
marryChildren: true,
children: [
{headerName: "Gold", field: "gold", width: 75},
{headerName: "Silver", field: "silver", width: 75},
{headerName: "Bronze", field: "bronze", width: 75},
{headerName: "Total", field: "total", width: 75}
]
},
{
headerName: "Sports Results 2018",
marryChildren: true,
children: [
{headerName: "Gold", field: "gold", width: 75},
{headerName: "Silver", field: "silver", width: 75},
{headerName: "Bronze", field: "bronze", width: 75},
{headerName: "Total", field: "total", width: 75}
]
};
Now when I look at a row at the bottom, it's kind of hard to compare the values between column groups. And it gets worse if the units differ from column to column (m, kg, sec, etc) and are only written in the header.
Here the plunkr for the code with the resulting layout.
Now I am searching for a way to add a some styling to the column group, so there is a visual distinction within the data table between different column groups. Something like vertical lines between column groups. Like in the following picture (color red chosen for demonstration, in the end black or a similar style as in the header row would be nice):
I tried to find a easy way to get such a layout in ag-grid, but I only found ways to add a style only to the headers or every cell in the column group. Does someone have some experience with such a situation or have an idea how to make the distinction more clear?
Help is appreciated!

Answer 1

I found a solution that works, but uses a undocumented property of the cell object used during the cell customization. And it only works with cellStyle and not with cellClass or cellClassRule. (See section Cell Styles -> cell style in Ag grid documentation)
Basically you can add a default column definition to the grid options that sets the cell style of each column and therefore of each cell to a function. This function paints a border on the left side of a cell, if the column of the cell is the first displayed child of it's parent.
var defaultColumnDefs = {
cellStyle: (cell) => isFirstColumn(cell) ? {'border-left': '2px solid red'} : null
};
var gridOptions = {
...
columnDefs: columnDefs,
defaultColDef: defaultColumnDefs
};
function inFirstColumn(cell) {
// cell.column is not a documented property!!
return cell.column.colId === cell.column.parent.displayedChildren[0].colId;
}
Here is the updated Plnkr.

Answer 2

The demo of the solution I would do:
updated plunker
What I did is I used the cellStyle in column definition and gave it a solid red border :
cellStyle: {'border-left': '5px solid red'}}
Or to put that together in appropriate element:
{
headerName: "Sports Results 2016",
marryChildren: true,
children: [
{headerName: "Gold", field: "gold", width: 75, filter: 'agNumberColumnFilter',
cellStyle: {'border-left': '5px solid red'}},
{headerName: "Silver", field: "silver", width: 75, filter: 'agNumberColumnFilter'},
{headerName: "Bronze", field: "bronze", width: 75, filter: 'agNumberColumnFilter'},
{headerName: "Total", field: "total", width: 75, filter: 'agNumberColumnFilter'}
]
}
Simply do that for all the cells columns you wanna. The only difference is that there are breaks in the lines, if that does not bother you, solution conveys the message of splitting up a table at certain rows and is really simple to do.
You might also wanna to separate CSS from your cell definitions and you can do that with cellClass property in the definition.
More info on both approaches here:
ag-grid Cell Styling
Since you told you already know how to style headers, add the same to headers if you wanna line to go from header to bottom. If you wanna full line, however, I can only think of making a really thin cell with all borders and background red to mimic the vertical line. Then you need to add that in front of every element you wanna to have the line on left side.
Maybe something like this:
{
headerName: "Sports Results 2017",
marryChildren: true,
children: [
{width: 1,
cellStyle: {
'padding': 0, background: 'red', width: '3px'}
},
{headerName: "Gold", field: "gold", width: 75, filter: 'agNumberColumnFilter'},
{headerName: "Silver", field: "silver", width: 75, filter: 'agNumberColumnFilter'},
{headerName: "Bronze", field: "bronze", width: 75, filter: 'agNumberColumnFilter'},
{headerName: "Total", field: "total", width: 75, filter: 'agNumberColumnFilter'}
]
},