Header Template + Hyperlink + Vanilla JS

<!DOCTYPE html>
<html lang="en">
<head>
    <script>var __basePath = '/';</script>
    <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="https://use.fontawesome.com/releases/v5.6.3/css/all.css"/>
        <script src="https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.min.js"></script>
    </head>

<body>
    <style>
    .customSortRemoveLabel {
        float: left;
        font-size: 11px;
        margin-left: 3px;
        margin-top: 6px;
    }

    .active {
        color: cornflowerblue;
    }
</style>


<div id="myGrid" style="height: 100%;" class="ag-theme-alpine"></div>



    <script src="main.js"></script>
</body>
</html>

var columnDefs = [
    {
        minWidth: 150,
        field: 'athlete',
        headerComponentParams: {
            template:
                '<div class="ag-cell-label-container" role="presentation">' +
            '  <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
            '  <div ref="eLabel" class="ag-header-cell-label" role="presentation">' +
            '    <span ref="eSortOrder" class="ag-header-icon ag-sort-order" ></span>' +
            '    <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon" ></span>' +
            '    <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon" ></span>' +
            '    <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon" ></span>' +
            '    <a href="https://ag-grid.com" target="_blank"> <span ref="eText" class="ag-header-cell-text" role="columnheader"></span></a>' +
            '    <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>' +
            '  </div>' +
            '</div>'
        },
    },
    {
        field: 'age',
        maxWidth: 90,
    },
    {
        field: 'country',
        minWidth: 150,
    },
    {
        field: 'year',
        maxWidth: 90,
    },
    {
        field: 'date',
        minWidth: 150,
    },
];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    defaultColDef: {
        resizable: true,
        flex: 1,
        minWidth: 100,
    },
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var httpRequest = new XMLHttpRequest();
    httpRequest.open(
        'GET',
        'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json'
    );
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var httpResult = JSON.parse(httpRequest.responseText);
            gridOptions.api.setRowData(httpResult);
        }
    };
});