I am attempting to add row-deletion into my <mat-table>. Most of the table is working fine, except the checkbox column is not showing up. Previously, the code did not contain the <!-- Checkbox/Selection Column --> section. I added it in using one of the examples on angular.material.io.
Im a bit confused, because it looks to me like the pattern should be a <th> & <td> wrapped inside an <ng-container>. I seem to be missing something here, because the checkbox/selection column isn't showing up, there aren't any errors in the browser console, and there aren't any errors being thrown at ng serve in powershell.
<table mat-table [dataSource]="dataSource" matSort>
<!-- Checkbox/Selection Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox [checked]="false" [aria-label]="checkboxLabel()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox [checked]="true"></mat-checkbox>
</td>
</ng-container>
<!-- Working Columns -->
<ng-container *ngFor="let field of Fields" matColumnDef="{{field.name}}">
<th class="w-134" mat-header-cell *matHeaderCellDef mat-sort-header>{{field.name}}</th>
<td class="w-130" mat-cell *matCellDef="let row">
<input *ngIf="field.editType == 'free'" matInput [(ngModel)]="row[field.name]" placeholder="{{row[field.name]}}" required>
<mat-select *ngIf="field.editType == 'spinner'" [(ngModel)]="row[field.name]">
<mat-option *ngFor="let option of field.options" [value]="option">{{option}}</mat-option>
</mat-select>
<div class="checkbox-cell" (click)="toggleBoolean(row, field.name)">
<mat-checkbox *ngIf="field.editType == 'checkbox'" [(ngModel)]="row[field.name]" (click)="toggleBoolean(row, field.name)"></mat-checkbox>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="ColumnHeaders"></tr>
<tr mat-row *matRowDef="let row; columns: ColumnHeaders;"></tr>
</table>
Seems like you did not added the column in your ColumnHeaders array inside TS file.
ColumnHeaders = ['select'] //ColumnHeaders should have an entry of select(your checkbox column defintion)
yes you have to add select inside displayedColumns
displayedColumns: string[] = ['select','position', 'name','gender', 'weight', 'symbol'];
Related
I have build a table in Angular Material with a general filter (I have followed the official documentation for that). For the purpose of my project I would like to have different filter for each column of my table. For example a filter for the column "name" and another filter for the column "amount". How can I achieve this?
html
<mat-form-field appearance="standard" color="accent">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Search" #input>
</mat-form-field>
<table mat-table [dataSource]="expense" class="mat-elevation-z8">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef> Amount </th>
<td mat-cell *matCellDef="let element"> {{element.amount | currency:'CHF '}} </td>
</ng-container>
[...]
</table>
typescript
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
im trying to show a list of products, and it does, but the problem is it freeze for 6 or 8 seconds, tha size of the register is 2338, im using entity framework to obtain the register, some idea to solve or optimize
this is the method to get the list from the other class and there i obtain from the entity framework
getProveedor(){
this.apiproveedor.getProveedor().subscribe(response=>{
console.log(response.data);
if(response.exito==1){
this.lst=response.data;
this.resultsLength=this.lst.length;
this.dataSource=response.data;
}
});
getProveedor():Observable<Response>{
return this._http.get<Response>(this.url);
}
this is the html, im using a mat table
<!--
-->
<div>
<mat-toolbar >
<span >Pharmacy Lion</span>
<img src="./assets/img/2.png" class="tama">
</mat-toolbar>
<div>
<a mat-raised-button color="primary" (click)="openAdd()">Nuevo Producto</a>
</div>
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput placeholder="Buscar Nombre" #input (keyup)="applyFilter($event)">
</mat-form-field>
<table mat-table [dataSource]="lst" class="table"
matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
<ng-container matColumnDef ="IdProducto" class="header-align-right"
mat-sort-header disableClear>
<th mat-header-cell *matHeaderCellDef mat-sort-header >#</th>
<td mat-cell *matCellDef="let element">{{element.idProducto}}</td>
</ng-container>
<ng-container matColumnDef ="Nombre" >
<th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right" >Nombre Producto</th>
<td mat-cell *matCellDef="let element" class="header-align-right">{{element.nombre}}</td>
</ng-container>
<ng-container matColumnDef ="Cantidad">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right"> Cantidad </th>
<td mat-cell *matCellDef="let element" class="header-align-right">{{element.cantidad}}</td>
</ng-container>
<ng-container matColumnDef ="Descripcion">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right">Descripcion</th>
<td mat-cell *matCellDef="let element" class="header-align-right">{{element.descripcion}}</td>
</ng-container>
<ng-container matColumnDef ="Precio">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right">Precio</th>
<td mat-cell *matCellDef="let element" class="header-align-right">{{element.precio}}</td>
</ng-container>
<ng-container matColumnDef ="Acciones">
<th mat-header-cell *matHeaderCellDef class="header-align-right margencab" >Acciones</th>
<td mat-cell *matCellDef="let element" class="header-align-right ">
<button (click)="Edit(element)" mat-raised-button color="primary" class="margencab">Editar</button>
<button (click)="delete(element)" mat-raised-button color="Basic" class="margencab">Eliminar</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="Columnas"></tr>
<tr mat-row *matRowDef="let row; columns Columnas"></tr>
</table>
</div>
You could try implementing lazy loading of data, which is mentioned in material docs.
You can implementing server side pagination. You need to send page size and page number along with your existing query parameters. In this way it will be more scalable no matter how many data you have cause you are dealing with small chunk of data each request.
you can find a lot of examples out there. With a quick search I found this article one that seems easier to understand
You could also try to implement virtual-scroller provided by material angular CDK (Common Development Kit).
You can find the details here.
I'm trying to create a custom Angular Material Table, more exactly, to split one column in 5 columns like here:
The first row with No, Name, Weight and Symbol (with the 5 columns) represent the header of the table. How can I split the Symbol column in 5 columns?
My code is that one from Angular Material:
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>No.</th>
<td mat-cell *matCellDef="let element">{{ element.position }}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef>Weight</th>
<td mat-cell *matCellDef="let element">{{ element.weight }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef>Symbol</th>
<td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements"> </mat-paginator>
</div>
I had to do a similar thing this week and I put together a Stackblitz to play around and have something working that might help?
https://stackblitz.com/edit/generic-mat-table-kji9ey?file=src%2Fapp%2Fapp.component.html
The key seems to be to configure the two header rows with colspan and rowspan attributes for the resultant columns
This answer was useful too:
https://stackoverflow.com/a/59626423/2928193
I have a angular material table with some header column. But under one header column I have some checkboxes for the name of the project.
I have it like this:
<ng-container matColumnDef="projects">
<th mat-header-cell *matHeaderCellDef (mouseover)="show = true" (mouseout)="show = false" mat-sort-header i18n>
<div class="col">
<div class="row" *ngFor="let item of returnProjectCodes; let i = index">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="filterProjects($event, i, item)"
[checked]="selected === i"
[disabled]="isDisabled"
>{{ item.name }}
</mat-checkbox>
</div>
</div>
Project
</th>
<td mat-cell *matCellDef="let row">{{ row.projects }}</td>
</ng-container>
But now it looks like this:
But of course the header column project has to bee positioned above the checkboxes in line with the other column headers.
So what I have change?
Thank you
So I'm using angular material tables and decided to made a filter for each column. The inputs for this filters are located in the row header of each column. That works fine, but the thing is when I'm typing and pressed the space key, the table gets sorted. I want this behavior to stop, but if I used (keydown.space)="$event.preventDefault()" but the space isn't inserted in the input. Here is the code below of the table.
<table mat-table class="full-width-table" (matSortChange)="sortData($event)" [dataSource]="this.datasrcCollIndex" aria-label="Elements" matSort matSortActive="strName" matSortDirection="asc" matSortDisableClear>
<!-- Name Column -->
<ng-container matColumnDef="strName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
<mat-form-field style="margin-top: 0px;">
<input matInput placeholder="Name" (keyup)="filteringByColumns()" [(ngModel)]="strName" >
</mat-form-field>
</th>
<td mat-cell *matCellDef="let user">{{user.strName}}</td>
</ng-container>
<!-- Gender Column -->
<ng-container matColumnDef="strGender">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
<mat-form-field style="margin-top: 0px; width: 70px;">
<input matInput placeholder="Gender" (keyup)="filteringByColumns()" [(ngModel)]="strGenderColumn">
</mat-form-field>
</th>
<td mat-cell *matCellDef="let user">{{user.strGender}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="this.dictstrDisplayedColumns"></tr>
<tr mat-row (click)="this.showDetailsOfUsers(user)"
*matRowDef="let user; columns: this.dictstrDisplayedColumns;"></tr>
</table>
Instead of using
preventDefault()
I used
stopPropagation()
it still allows input to be entered, but does not propagate the event to the parent elements (thus the sorting element never receiving the event).
Usage:
(keydown.space)="$event.stopPropagation()"
i had the same problem and did:
event.preventDefault();
(event.target as any).value += ' ';