Is there a way to add different click events for specific columns of an Angular Material Table? Specifically, I would like the left column (Blue/LP) to trigger a click event that passes the LP value, while the right column triggers an expand action. Currently, my table expands across the entire row on click. How can I target individual columns with distinct actions?
https://i.stack.imgur.com/5L0N0.png
HTML:
<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
<ng-container matColumnDef="{{column.name}}" *ngFor="let column of initColumns">
<th mat-header-cell *matHeaderCellDef> {{column.display}} </th>
<td mat-cell *matCellDef="let element"> {{element[column.name]}} </td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
<div class="example-element-detail" [@detailExpand]="element.expanded ? 'expanded' : 'collapsed'">
<table class="detail-table">
<tr>
<th>Weight</th>
<th>Cube</th>
<th>Zone</th>
</tr>
<tr>
<td>{{element.LPWeight}}</td>
<td>{{element.LPCube}}</td>
<td>{{element.Zone}}</td>
</tr>
</table>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row"
[class.example-expanded-row]="element.expanded" (click)="toggleRow(element)">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
.TS
import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, OnInit } from '@angular/core';
import { LoadinfoService } from 'src/app/services/loadinfo.service';
@Component({
selector: 'app-lpstoload',
templateUrl: './lpstoload.page.html',
styleUrls: ['./lpstoload.page.scss'], animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0' })),
state('expanded', style({ height: '*' })),
transition('expanded => collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class LpstoloadPage implements OnInit {
dataSource = ELEMENT_DATA;
initColumns: any[] = [
{
name: 'LP',
display: 'LP'
},
{
name: 'SourceZone',
display: 'Source'
},
{
name: 'StopNumber',
display: 'Stop'
},
{
name: 'CaseCount',
display: 'Cases'
}
];
displayedColumns: any[] = this.initColumns.map(col => col.name);
columnsToDisplay = ['LP', 'SourceZone', 'StopNumber', 'CaseCount'];
expandedElement: PeriodicElement | null;
private lpsToLoad: any;
constructor(private loadInfoService: LoadinfoService) { }
ngOnInit() {
//this.lpsToLoad = this.loadInfoService.loadSummary.LPsToLoad;
}
toggleRow(element: { expanded: boolean; }) {
element.expanded = !element.expanded
}
}
export interface PeriodicElement {
SG: string;
LP: string;
Status: String;
Zone: string;
SourceZone: string;
StopNumber: string;
CaseCount: number;
LPWeight: number;
LPCube: number;
DBName: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{
"SG": "",
"LP": "00006844763848356453",
"Status": "STAGED",
"Zone": "SSTG",
"SourceZone": "DRYF",
"StopNumber": "4",
"CaseCount": 120.0,
"LPWeight": 480.0,
"LPCube": 69.859573364257813,
"DBName": "IL_DRY-WMS"
},
{
"SG": "",
"LP": "00006844763871917089",
"Status": "STAGED",
"Zone": "SSTG",
"SourceZone": "DRYF",
"StopNumber": "4",
"CaseCount": 27.0,
"LPWeight": 391.5,
"LPCube": 95.586883544921875,
"DBName": "IL_DRY-WMS"
},
{
"SG": "",
"LP": "00006844763892120215",
"Status": "STAGED",
"Zone": "SSTG",
"SourceZone": "D-LT",
"StopNumber": "4",
"CaseCount": 88.0,
"LPWeight": 510.39199829101563,
"LPCube": 67.747936964035034,
"DBName": "IL_DRY-WMS"
}
];