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

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

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