Как добавить значок в пользовательский заголовок AG Grid в vue js

Question

Я пытаюсь добавить значок информации в заголовок AG Grid для отображения всплывающей подсказки при наведении курсора на значок. Я создал настраиваемый компонент всплывающей подсказки, который показывает всплывающую подсказку при наведении курсора, но когда я добавляю значок, сортировка и фильтры по умолчанию удаляются.

import Vue from "vue";

export default Vue.extend({
    template: `
      <div>
        <div>
      {{ params.headerName }}
      <v-tooltip  bottom max-width="200">
          <template v-slot:activator="{ on }">  
            <i v-on="on" class="custom-info info circle icon"></i>
            </template>
          <span>{{params.toolTipText}}</span>
        </v-tooltip>
       </div>
      </div>  
      `,
    data: function() {
        return {

        };
    },
    beforeMount() {},
    mounted() {
        //   console.log("header components",params.value);
    },
    methods: {

    },

}, );


**
Column Defs Code: **
    this is the code
for column defs.

field: "ndc11",

    filter: "agNumberColumnFilter",
    headerComponent: 'customTooltipIcon',
    headerComponentParams: {
        headerName: "NDC11",
        toolTipText: "NDC11"
    },
    pinned: "left",
    cellClass: params => {
        if (
            params.data &&
            params.data.ion_dispute_code &&
            params.data.ion_dispute_code.length &&
            (params.data.ion_dispute_code.includes("O") ||
                params.data.ion_dispute_code.includes("N") ||
                params.data.ion_dispute_code.includes("U") ||
                params.data.ion_dispute_code.includes("G"))) {
            return "validation-grid-cell-red"
        }
    },
    cellRenderer: "ndc11Render",
    sort: "asc"
},

Answer 1

Потому что вы переписываете заголовок ag-grid на свой собственный, а не добавляете в него сортировку и фильтрацию

вот пример того, как это должно выглядеть:

export default Vue.extend({
template: `
<div>
  <div
    v-if="params.enableMenu"
    ref="menuButton"
    class="customHeaderMenuButton"
    @click="onMenuClicked($event)"
  >
    <i class="fa" :class="params.menuIcon"></i>
  </div>

  <div class="customHeaderLabel">{{ params.headerName }}</div>

  <v-tooltip  bottom max-width="200">
    <template v-slot:activator="{ on }">  
      <i v-on="on" class="custom-info info circle icon"></i>
    </template>
    <span>{{ params.toolTipText }}</span>
  </v-tooltip>

  <div
    v-if="params.enableSorting"
    @click="onSortRequested('asc', $event)"
    :class="ascSort"
    class="customSortDownLabel"
  >
    <i class="fa fa-long-arrow-alt-down"></i>
  </div>

  <div
    v-if="params.enableSorting"
    @click="onSortRequested('desc', $event)"
    :class="descSort"
    class="customSortUpLabel"
  >
    <i class="fa fa-long-arrow-alt-up"></i>
  </div>

  <div
    v-if="params.enableSorting"
    @click="onSortRequested('', $event)"
    :class="noSort"
    class="customSortRemoveLabel"
  >
    <i class="fa fa-times"></i>
  </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);
    }
}
});

пример взят из документации ag-grid: https://www.ag-grid.com/javascript-grid-header-rendering/

также здесь https://www.ag-grid.com/javascript-grid-header-rendering/ вы можете найти более подробную информацию о том, как работают компоненты заголовка и должны работать пользовательские компоненты заголовка