AgHeader.vue

<!-- based on https://ag-grid.com/vue-data-grid/component-header/ -->

<!-- UNFINISHED -->

<script setup lang="ts">
import { ref } from "vue";
import type { IHeaderParams } from "ag-grid-community";
import "ag-grid-community/styles/ag-grid.css"; // Core grid CSS, always needed
import "ag-grid-community/styles/ag-theme-alpine.css"; // Optional theme CSS

// const props = defineProps<IComponent<any>>();
const props: any = defineProps();
const params = props.params as IHeaderParams & { menuIcon: string };
const menuButton = ref(null);
console.log(params);

function onMenuClicked(evt: any) {
  params.showColumnMenu(menuButton.value as any); // some problem here
}
</script>

<template>
  <div>
    <span> {{ params.displayName }} </span>
    <div
      v-if="params.enableMenu"
      ref="menuButton"
      class="customHeaderMenuButton"
      @click="onMenuClicked($event)"
    >
      <i class="fa" :class="params.menuIcon"></i>
    </div>
  </div>
</template>