Hello,

I have been looking into your question and an approach I could suggest is using the IgxHierarchicalGrid where you could hide the default expansion area by setting the display attribute of both header and expand cell elements to 'none':

::ng-deep {
  .igx-grid__hierarchical-expander--header {
    display: none;
  }
  .igx-grid__hierarchical-expander {
    display: none;
  }
}

In addition, in order to expand the rows through some other column you could define a custom cell template in the required column that contains expand indicator and cell value.

In this case, you should also expand/collapse the rows through the API using the grid's toggleRow method which takes as argument row id. i.e. primary key and change the icon depending on the row expanded state as follows:

 <igx-column field="Artist" [resizable]="true">
      <ng-template igxCell let-cell="cell">
        <div style="display: contents;">
          <igx-icon (click)="cell.grid.toggleRow(cell.row.key)">{{
            cell.row.expanded ? 'chevron_right' : 'expand_more'
          }}</igx-icon>
          {{ cell.value }}
        </div>
      </ng-template>
    </igx-column>

Here could be found my sample for your reference. Please test it on your side and let me know if I may be of any further assistance.

Sincerely,
Teodosia Hristodorova
Software Developer