ag-grid (angular) - How to span a column header over two columns?

Question

I'm trying to setup a grid using ag-grid angular. I want to span a single column header over two columns.

|    spans col 1 and 2    |   <- header row
| row 1 col1 | row 1 col2 |   <- data row 1
| row 2 col1 | row 2 col2 |   <- data row 2

I've read about column groups, but that seems to add a 2nd header row which can span two column headers. I don't want this.

|   group spans col 1 and 2   |   <- group header row
| col 1 header | col 2 header |   <- column header row (don't want this)
|  row 1 col1  |  row 1 col2  |   <- data row 1
|  row 2 col1  |  row 2 col2  |   <- data row 2

Any suggestions on how I can accomplish this?

EDIT: Can I accomplish this and retain the ability to sort, filter, etc. . . . the features available to headers?

Based on @Eugene's answer below, I would want standard header behavior, at least for unspanned columns. Can I sort or filter col 3? It would be cool if I could provider a sort functor for how to sort the group of col 1 and 2.

|   group spans col 1 and 2   | col 3 group  |  <- group header row
| col 1 header | col 2 header | col 3 header |  <- column header row (hidden with [headerHeight]="0")
|  row 1 col1  |  row 1 col2  |  row 1 col3  | <- data row 1
|  row 2 col1  |  row 2 col2  |  row 2 col3  | <- data row 2

Eugene · Accepted Answer · 2024-07-06 09:41:34Z

1

You can use group header with headerHeight and groupHeaderHeight options:

<ag-grid-angular
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  [headerHeight]="0"
  [groupHeaderHeight]="48"
/>

public columnDefs: (ColDef | ColGroupDef)[] = [
  {
    headerName: "Header Name",
    children: [
      { field: "field1" },
      { field: "field2" },
    ],
  },
  { field: "field3" },
];

Plunker Example

edited Jul 6, 2024 at 9:41

answered Jul 4, 2024 at 20:27

Eugene

1,5371 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jobu Over a year ago

I assume that "group header" is the same as "column groups"? ag-grid.com/angular-data-grid/column-groups If so, in this approach can I still sort, filter, etc from the exposed group header, at least for ungrouped coluns? I edited my post to include a col3 to illustrate this question better.

Eugene Over a year ago

@Jobu yes, you can use ColGroupDef at the same level as ColDef and achieve the desired result. I'll update my answer.

Jobu Over a year ago

Got it. Is there any way to put the sorter on the ColGroupDef? for example to sort Athlete Details by name? Not required, but I'm curious.

Eugene Over a year ago

I think, depending on the task, you can try not using ColGroupDef and instead use cellRenderer to place information from different fields in one cell.

Jobu Over a year ago

Yes, as long as there's a noWrap that is strictly honored then I bet it makes more sense for me to do use a cellRendered and comparator for this case.

|

Collectives™ on Stack Overflow

ag-grid (angular) - How to span a column header over two columns?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related