Ag Grid Multi Row Header

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>JavaScript example</title>
		<meta charSet="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<style media="only screen">
            html, body {
                height: 100%;
                width: 100%;
                margin: 0;
                box-sizing: border-box;
                -webkit-overflow-scrolling: touch;
            }

            html {
                position: absolute;
                top: 0;
                left: 0;
                padding: 0;
                overflow: auto;
            }

            body {
                padding: 1rem;
                overflow: auto;
            }
        </style>
		<link rel="stylesheet" href="lib/style.css"/>
	</head>
	<body>
		<div class="container">
			<div class="columns">
				<label class="option" for="columnGroups">
					<input id="columnGroups" type="checkbox">Skip Column Group Headers
    </label>
					<label class="option" for="skipHeader">
						<input id="skipHeader" type="checkbox">Skip Column Headers
    </label>
						<div>
							<button onclick="onBtExport()" style="margin: 5px 0px; font-weight: bold;">
        Export to Excel
      </button>
						</div>
					</div>
					<div class="grid-wrapper">
						<div id="myGrid" class="ag-theme-alpine">
						</div>
					</div>
				</div>
				<script>var __basePath = './';</script>
				<script src="https://unpkg.com/@ag-grid-enterprise/all-modules@25.3.0/dist/ag-grid-enterprise.min.js">
				</script>
				<script src="lib/script.js">
				</script>
			</body>
		</html>

.details > label {
  margin-bottom: 10px;
}

.details > label:first-of-type {
  margin-top: 10px;
}

.details > label:last-of-type {
  margin-bottom: 0;
}

.option {
  display: block;
  margin: 5px 10px 5px 0;
}

.grid-wrapper {
  display: flex;
  flex: 1 1 0px;
}

.grid-wrapper > div {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.columns {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.grid-cell-centered {
  text-align: center !important;
}

const columnDefs = [  
      {
        headerName: '11:00 AM',
        children: [
          {
            headerName: '5:30 PM',
            valueGetter: 'data.country.charAt(0)',
            children: [
              {
                headerName: '9:00 PM',
                children: [
                  { field: 'sport', minWidth: 150 },
                  { field: 'gold' },
                  { field: 'silver' },
                  { field: 'bronze' },
                  { field: 'total' },
                ],
              },
            ],
          },
        ],
      },

      {
        headerName: 'athlete row 1',
        headerGroupComponent: 'customHeaderGroupComponent',
        children: [
          {
            headerName: 'athlete row 2',
            headerGroupComponent: 'customHeaderGroupComponent',
            children: [
              {
                headerName: 'athlete row 3',
                headerGroupComponent: 'customHeaderGroupComponent',
                children: [{ field: 'athlete', minWidth: 200 }],
              },
            ],
          },
        ],
      },
      {
        headerName: 'country row 1',
        headerGroupComponent: 'customHeaderGroupComponent',
        children: [
          {
            headerName: 'country row 2',
            headerGroupComponent: 'customHeaderGroupComponent',
            children: [
              {
                headerName: 'country row 3',
                headerGroupComponent: 'customHeaderGroupComponent',
                children: [{ field: 'country', minWidth: 200 }],
              },
            ],
          },
        ],
      },
      {
        headerName: 'Initial row 1',
        headerGroupComponent: 'customHeaderGroupComponent',
        children: [
          {
            headerName: 'Initial row 2',
            headerGroupComponent: 'customHeaderGroupComponent',
            children: [
              {
                headerName: 'Initial row 3',
                headerGroupComponent: 'customHeaderGroupComponent',
                children: [
                  {
                    headerName: 'Initial',
                    valueGetter: 'data.country.charAt(0)',
                  },
                ],
              },
            ],
          },
        ],
      }   
];

const gridOptions = {
  groupHeaderHeight: 75,
  components: {
    customHeaderGroupComponent: CustomHeaderGroup,
  },
  columnDefs: columnDefs,
  defaultColDef: {
    sortable: true,
    filter: true,
    resizable: true,
    minWidth: 100,
    flex: 1,
  },

  onGridReady: function (params) {
    document.getElementById('columnGroups').checked = true;
  },

  popupParent: document.body,
};

function getBoolean(id) {
  return !!document.querySelector('#' + id).checked;
}

function getParams() {
  return {
    skipColumnGroupHeaders: getBoolean('columnGroups'),
    skipColumnHeaders: getBoolean('skipHeader'),
  };
}

function onBtExport() {
  gridOptions.api.exportDataAsExcel(getParams());
}

function CustomHeaderGroup() {}

CustomHeaderGroup.prototype.init = function (params) {
  this.params = params;
  this.eGui = document.createElement('div');
  this.eGui.innerHTML = `
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> New Store</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> New Floor</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> Repln</label>
  `;
};

CustomHeaderGroup.prototype.getGui = function () {
  return this.eGui;
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
  const gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
  agGrid
    .simpleHttpRequest({
      url: 'https://www.ag-grid.com/example-assets/small-olympic-winners.json',
    })
    .then((data) =>
      gridOptions.api.setRowData(data.filter((rec) => rec.country != null))
    );
});