I am currently working on enhancing an Angular screen that allows users to manage data in a table with just one column. While the code I have implemented below successfully displays the data, I have been unable to find any examples of how to make this single column editable.
HTML
<div class="SERIALCLASS">
<br/>
<div class="center" >
Serial Exceptions<br/>
<div>
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="partNo">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 300px !important;padding-right: 15px !important;"> Part No: </th>
<td mat-cell *matCellDef="let row" style="padding-right: 15px !important;"> {{row.partNo}} </td>
</ng-container>
<ng-container matColumnDef="partNo1">
<th mat-header-cell *matHeaderCellDef style="width: 300px !important;padding-right: 15px !important;">
<mat-form-field class="filter" floatLabel="never" style="width: 80px !important;">
<mat-label>Filter</mat-label>
<input matInput [formControl]="partNoFilter">
</mat-form-field></th>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns1"> </tr>
</table>
</div>
</div>
</div>
.TS file
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { UserApiService } from 'src/app/services/api/user-apiservice';
@Component({
selector: 'app-serial-exceptions',
templateUrl: './serial-exceptions.component.html',
styleUrls: ['./serial-exceptions.component.scss']
})
export class SerialExceptionsComponent implements OnInit {
isLoading = true;
isempty = false;
dataSource = new MatTableDataSource<any>([]);
partNoFilter = new FormControl('');
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
displayedColumns: string[] = ['partNo'];
displayedColumns1: string[] = ['partNo1'];
filterValues = {
partNo: ''
};
constructor(
private repoService: UserApiService,
) { }
ngOnInit(): void {
this.getData();
this.partNoFilterFunc();
}
getData(){
this.isLoading = true;
this.isempty = false;
setTimeout(() => {
this.repoService.getSerialExceptions().subscribe(largeDataSet => {
console.log(largeDataSet);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.dataSource.data = largeDataSet;
});
})
this.dataSource.filterPredicate = this.createFilter();
}
partNoFilterFunc(){
this.partNoFilter.valueChanges
.subscribe(
partNo => {
this.filterValues.partNo = partNo;
this.dataSource.filter = JSON.stringify(this.filterValues);
}
);
}
createFilter(): (data: any, filter: string) => boolean {
let filterFunction = function(data, filter): boolean {
let searchTerms = JSON.parse(filter);
return data.partNo.toString().toLowerCase().indexOf(searchTerms.partNo.toLowerCase()) !== -1;
};
return filterFunction;
}
}
A colleague shared this example with me, but it seems quite complex for my needs. In fact, I reverted back to my original work due to multiple errors encountered while trying to implement this example.
https://stackblitz.com/edit/inline-edit-mat-table?file=app%2Finline-edit%2Finline-edit.component.ts
Is there a simpler way to enable editing in a specific column within a mat-row?