Add custom attribute to Ag-grid sortable header in angular

In my angular project I need to add data-test-id attribute to the sort indicator part in the default template that ag-grid provided as follows:

<div class="ag-cell-label-container ag-header-cell-sorted-none" role="presentation">
  <div ref="eLabel" class="ag-header-cell-label" role="presentation">
    <span ref="eText" class="ag-header-cell-text"></span>
    <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon ag-hidden" aria-hidden="true">
      <span class="ag-icon ag-icon-filter" unselectable="on" role="presentation"></span>
    </span>
    <span class="ag-sort-indicator-container" [attr.data-test-id]="dataTestId + '_sort'">
      <span ref="eSortOrder" class="ag-sort-indicator-icon ag-sort-order ag-hidden" aria-hidden="true"></span>
      <span
        ref="eSortAsc"
        [attr.data-test-id]="dataTestId + '_sort_asc'"
        class="ag-sort-indicator-icon ag-sort-ascending-icon ag-hidden"
        aria-hidden="true"></span>
      <span
        ref="eSortDesc"
        [attr.data-test-id]="dataTestId + '_sort_desc'"
        class="ag-sort-indicator-icon ag-sort-descending-icon ag-hidden"
        aria-hidden="true"></span>
      <span
        ref="eSortMixed"
        [attr.data-test-id]="dataTestId + '_sort_mixed'"
        class="ag-sort-indicator-icon ag-sort-mixed-icon ag-hidden"
        aria-hidden="true"></span>
      <span
        ref="eSortNone"
        [attr.data-test-id]="dataTestId + '_sort_none'"
        class="ag-sort-indicator-icon ag-sort-none-icon ag-hidden"
        aria-hidden="true"></span>
    </span>
  </div>
</div>

This is the the default template of ag-grid header, the only difference is that I added [attr.data-test-id].

I want to create a custom header template without manipulating the existing behaviour like adding label, text again and etc.

Here is what I tried:

  {
      field: 'updated_at',
      headerName: this.translate.get('COLUMNS.last_activity'),
      headerComponentParams: {
        template: this.getSortableHeaderTemplate('last_activity'),
      },
      sortable: true,
      lockPinned: true,
    },

and getSortableHeaderTemplate is like this in my component file:

private getSortableHeaderTemplate(dataTestEntity: string): string {
    return `
      <div class="ag-cell-label-container ag-header-cell-sorted-none" role="presentation">
        <div ref="eLabel" class="ag-header-cell-label" role="presentation">
          <span ref="eText" class="ag-header-cell-text"></span>
          <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon ag-hidden" aria-hidden="true">
            <span class="ag-icon ag-icon-filter" unselectable="on" role="presentation"></span>
          </span>
          <!--AG-SORT-INDICATOR-->
          <span class="ag-sort-indicator-container" data-test-id="loan_application_list_${dataTestEntity}_sort">
            <span ref="eSortOrder" class="ag-sort-indicator-icon ag-sort-order ag-hidden" aria-hidden="true"></span>
            <span ref="eSortAsc" data-test-id="loan_application_list_${dataTestEntity}_sort_asc"
              class="ag-sort-indicator-icon ag-sort-ascending-icon ag-hidden" aria-hidden="true"></span>
            <span ref="eSortDesc" data-test-id="loan_application_list_${dataTestEntity}_sort_desc"
              class="ag-sort-indicator-icon ag-sort-descending-icon ag-hidden" aria-hidden="true"></span>
            <span ref="eSortMixed" data-test-id="loan_application_list_${dataTestEntity}_sort_mixed"
              class="ag-sort-indicator-icon ag-sort-mixed-icon ag-hidden" aria-hidden="true"></span>
            <span ref="eSortNone" data-test-id="loan_application_list_${dataTestEntity}_sort_none"
              class="ag-sort-indicator-icon ag-sort-none-icon ag-hidden" aria-hidden="true"></span>
          </span>
        </div>
      </div>
`;
  }

This is working but don't want to put html code inside typescript file and would prefer to have a separate component. Any idea?

Recommended topics

Hot tags