Ag-grid column header with dropdown

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ag-Grid Vue Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js" charset="UTF-8"></script><style> html, body { margin: 0; padding: 0; height: 100%; } </style>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"/>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app" style="height: 100%">
        <my-component></my-component>
    </div>
    
    <script>
        var appLocation = '';
        var boilerplatePath = '';
        var systemJsMap = {"ag-grid-community":"https:\/\/unpkg.com\/ag-grid-community@21.0.1\/dist\/ag-grid-community.js","ag-grid-community\/main":"https:\/\/unpkg.com\/ag-grid-community@21.0.1\/dist\/ag-grid-community.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@21.0.1\/","ag-grid-react":"npm:ag-grid-react@21.0.1\/","ag-grid-angular":"npm:ag-grid-angular@21.0.1\/","ag-grid-vue":"npm:ag-grid-vue@21.0.1\/"}    </script>

    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>

    <script>
      System.import('main.js').catch( function(err) { console.error(err); })
    </script>
</body>
</html>

import Vue from "vue";
import Dropdown from 'bp-vuejs-dropdown'

export default Vue.extend({
    template: `
        <div>
          <div style="font-size: 18px; font-color: black; display: inline-block;">{{params.displayName}}</div>
            <div style="display: inline-block; float: right;">
              <dropdown :close-on-click="true">
                <template slot="btn"><a>Actions</a></template>
                <template slot="body">
                  <ul class="context-menu">
                    <li><a>Action1</a></li>
                    <li><a>Action2</a></li>
                    <li><a>Help</a></li>
                  </ul>
                </template>
              </dropdown>
             </div>
        </div>
    `,
    data: function () {
        return {
            ascSort: null,
            descSort: null,
            noSort: null
        };
    },
    beforeMount() {
    },
    mounted() {
        this.params.column.addEventListener('sortChanged', this.onSortChanged);
        this.onSortChanged();
    },
    methods: {
        onMenuClicked() {
            this.params.showColumnMenu(this.$refs.menuButton);
        },

        onSortChanged() {
            this.ascSort = this.descSort = this.noSort = 'inactive';
            if (this.params.column.isSortAscending()) {
                this.ascSort = 'active';
            } else if (this.params.column.isSortDescending()) {
                this.descSort = 'active';
            } else {
                this.noSort = 'active';
            }
        },

        onSortRequested(order, event) {
            this.params.setSort(order, event.shiftKey);
        }
    }
});

import Vue from "vue";
import { AgGridVue } from "ag-grid-vue";

import CustomHeader from "./customHeader.js";

const VueExample = {
  template: `
        <div style="height: 100%">
                  <ag-grid-vue style="width: 100%; height: 100%;" class="ag-theme-balham" id="myGrid"
                           :gridOptions="gridOptions"
                           @grid-ready="onGridReady"
                           :columnDefs="columnDefs"
                          :rowData="rowData"
                          :suppressMenuHide="true"
                          :frameworkComponents="frameworkComponents"
                          :defaultColDef="defaultColDef"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue
  },
  data: function() {
    return {
      gridOptions: null,
      gridApi: null,
      columnApi: null,
      columnDefs: null,
      frameworkComponents: null,
      defaultColDef: null,
      rowData: null
    };
  },
  beforeMount() {
    this.gridOptions = {};
    this.columnDefs = [
      {
        headerName: "Athlete",
        field: "athlete",
        width: 125,
        suppressMenu: true
      },
      {
        headerName: "Age",
        field: "age",
        width: 90,
        sortable: false,
        headerComponentParams: { menuIcon: "fa-external-link-alt" }
      },
      {
        headerName: "Country",
        field: "country",
        width: 120,
        suppressMenu: true
      },
      {
        headerName: "Year",
        field: "year",
        width: 90,
        sortable: false
      },
      {
        headerName: "Date",
        field: "date",
        width: 100,
        suppressMenu: true
      },
      {
        headerName: "Sport",
        field: "sport",
        width: 90,
        sortable: false
      },
      {
        headerName: "Gold",
        field: "gold",
        width: 115,
        headerComponentParams: { menuIcon: "fa-cog" }
      },
      {
        headerName: "Silver",
        field: "silver",
        width: 90,
        sortable: false
      },
      {
        headerName: "Bronze",
        field: "bronze",
        width: 115,
        suppressMenu: true
      },
      {
        headerName: "Total",
        field: "total",
        width: 90,
        sortable: false
      }
    ];
    this.frameworkComponents = { agColumnHeader: CustomHeader };
    this.defaultColDef = {
      width: 100,
      headerComponentParams: { menuIcon: "fa-bars" },
      sortable: true,
      resizable: true,
      filter: true
    };
  },
  mounted() {
    this.gridApi = this.gridOptions.api;
    this.gridColumnApi = this.gridOptions.columnApi;
  },
  methods: {
    onGridReady(params) {
      const httpRequest = new XMLHttpRequest();
      const updateData = data => {
        this.rowData = data;
      };

      httpRequest.open(
        "GET",
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
      );
      httpRequest.send();
      httpRequest.onreadystatechange = () => {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
          updateData(JSON.parse(httpRequest.responseText));
        }
      };
    }
  }
};

new Vue({
  el: "#app",
  components: {
    "my-component": VueExample
  }
});

.customHeaderMenuButton {
    float: left;
    margin: 0 0 0 3px;
}

.customHeaderLabel {
    float: left;
    margin: 0 0 0 3px;
}

.customSortDownLabel {
    float: left;
    margin: 0 0 0 3px;
}

.customSortUpLabel {
    float: left;
    margin: 0;
}

.customSortRemoveLabel {
    float: left;
    margin: 0 0 0 3px;
    font-size: 11px;
}

.active {
    color: cornflowerblue;
}

(function(global) {
    // simplified version of Object.assign for es3
    function assign() {
        var result = {};
        for (var i = 0, len = arguments.length; i < len; i++) {
            var arg = arguments[i];
            for (var prop in arg) {
                result[prop] = arg[prop];
            }
        }
        return result;
    }

    System.config({
        transpiler: 'plugin-babel',
        defaultExtension: 'js',
        paths: {
            'npm:': 'https://unpkg.com/'
        },
        map: assign(
            {
                // babel transpiler
                'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
                'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',

                // css plugin
                'css': 'npm:systemjs-plugin-css/css.js',

                // vuejs
                'vue': 'npm:vue/dist/vue.min.js',

                // vue property decorator
                'vue-class-component': 'npm:vue-class-component@6.3.2/dist/vue-class-component.min.js',
                'vue-property-decorator': 'npm:vue-property-decorator@7.2.0/lib/vue-property-decorator.umd.js',
                
                'bp-vuejs-dropdown': 'npm:bp-vuejs-dropdown@2.1.1/Dropdown.vue',

                app: appLocation + 'app'
            },
            systemJsMap
        ), // systemJsMap comes from index.html

        packages: {
            'vue': {
                defaultExtension: 'js'
            },
            'vue-class-component': {
                defaultExtension: 'js'
            },
            'vue-property-decorator': {
                defaultExtension: 'js'
            },
            app: {
                defaultExtension: 'js'
            },
            'ag-grid-vue': {
                main: './main.js',
                defaultExtension: 'js'
            },
            'ag-grid-enterprise': {
                main: './main.js',
                defaultExtension: 'js'
            },
            'bp-vuejs-dropdown': {
                defaultExtension: 'vue'
            }
        },
        meta: {
            '*.js': {
                babelOptions: {
                    stage1: true,
                    stage2: true,
                    es2015: true
                }
            },
            '*.css': { loader: 'css' }
        }
    });
})(this);