A Brief Introduction About Column Spanning In Ag Grid

colDef = {
    headerName: "Country",
    field: "country",
    colSpan: function(params) {
        return params.data.country==='Russia' ? 2 : 1;
    }
    ...
};

// function you implement on the column definition
function colSpan(params: ColSpanParams) => number;
interface ColSpanParams {
    node: any, // row node in question
    data: RowNode, // data for the row
    colDef: ColDef, // the col def for the column
    column: Column, // the column object in question
    api: GridApi, // the grid's API
    columnApi: ColumnApi, // the grids column API
    context: any // the provided context
}

import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "my-app",
  template: `
`
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  private defaultColDef;

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: "Athlete",
        field: "athlete",
        pinned: "left"
      },
      {
        headerName: "Age",
        field: "age",
        pinned: "left"
      },
      {
        headerName: "Country",
        field: "country",
        colSpan: function(params) {
          var country = params.data.country;
          if (country === "Russia") {
            return 2;
          } else if (country === "United States") {
            return 4;
          } else {
            return 1;
          }
        }
      },
      {
        headerName: "Year",
        field: "year"
      },
      {
        headerName: "Date",
        field: "date"
      },
      {
        headerName: "Sport",
        field: "sport"
      },
      {
        headerName: "Gold",
        field: "gold"
      },
      {
        headerName: "Silver",
        field: "silver"
      },
      {
        headerName: "Bronze",
        field: "bronze"
      },
      {
        headerName: "Total",
        field: "total"
      }
    ];
    this.defaultColDef = { width: 100 };
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get("https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinnersSmall.json")
      .subscribe(data => {
        params.api.setRowData(data);
      });
  }
}