Angular 7 brought the powerful DragDropModule with it: https://material.angular.io/cdk/drag-drop/examples The documentation deals with rearranging items within lists or transferring items between ...

I want to use a <mat-table> to display the name of an option and it's corresponding given value (for the user to change). Since the options may need to have their values set by different mean...

I have an Angular Material mat-table which I used CSS styling for alternate row colors. Here is the CSS styling: .mat-row:nth-child(even){ background-color: #e4f0ec; } .mat-row:nth-child(odd){ ...

I am trying to make the mat-table border as round. But it is not working. Tried this- table { width: 100%; border-collapse: collapse; border-radius: 1em; } How to achieve this?

I'm trying to sort the MatTableDataSource programmatically so that I can sort the data via the use of a button rather than by the table column header when viewing the data in a specific mobile layo...

I have a component that renders mat-table in it's template. I want to pre-select some of the rows. The SelectionModel I have contains objects representing each selected item (not simple strings or ...

What I want is drawn out in the following image. I use Angular Material (7.x) and use the Mat-Table implementation as described here: https://material.angular.io/components/table/overview The ab...

I'm having trouble getting my table indexes to show up. Here's an example table: <mat-table [dataSource]="dataSource" multiTemplateDataRows> <!--Column definitions--> <ng-contai...

My samplepage.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-batchticketvalidation', templateUrl: './batchticketvalidation.component.html', styleUrls: ['./b...

I have a mat-table that might show up to 100 entries per page. At first, I had one mat-paginator at the bottom that worked fine. Now I'm being asked to set a paginator at the top and another one at...

I'm using Angular 9. How do I construct a mat-table without a header row (th) for the table? Sounds silly but if I do this <table mat-table *ngIf="isMobile" #mobile_table [dataSource]=...

When i sort a column of my mat-table i can no longer extend my rows only about one in two still works. While everything works fine when no sorting is done. I came across this link : https://github....

Anybody know if it is possible to create a “column” component for use with mat-table, I have tried creating a component for a commonly used column definition but when adding to the table i get an e...

I want to implement table with only one row selection. Now i have multiple selection. I tried coupe ways to do this and i stayed by this one. Graphic example: component.ts import { Component,...

I am making a table using angular-material in HTML, I am getting the error Cannot read property 'template' of undefined at MatHeaderRowDef.extractCellTemplate ts file contains export class BankLi...

I am having the spitted header angular material table and I was looking for help to add the sticky header. I have tried to using sticky: true but somehow it is not working for my first column (as I...

We have been using multiTemplateDataRows for multilevel mat-table. Its working fine and we can expand it to multi level. Although, there seems to be one issue in specific scenario. Scenario: Sort ...

The title already says it, which one should I use and is there / what is the difference between having <table mat table [dataSource]="items" ... or <mat table [dataSource]="items" ... i...

Ciao, I'm working with Angular 8 and I've a problem sorting "computed" columns. Assuming that I have a object with two properties name and description, the sorting not works if I try to concatenat...

I only want to show data on the table if status == 'done'. I tried doing but what i did was just remove the status but it is still displaying the row. How to do this? data { equipmentOrdered: ...

Sorry if this question is trivial, I'm very new to Angular and Web UI Kingdom I'm currently looking at this sample project: https://github.com/marinantonio/angular-mat-table-crud I was replacing ...

I would like to add multilines with different styles to my table cells. The Angular Material table seems to strip my HTML code away though. How can I achieve something similar like in Gitlab where ...

I change direction columns in the mat-table and after that I can't add ng-container to the table. I made this like this. How to add predefined row in this case with my content ? component.ts exp...

I have created a mat-table with expandable rows just like this one in Angular 8: https://stackblitz.com/angular/pmagobelkkg?file=app%2Ftable-expandable-rows-example.ts However, as in the example...

mat-sort is not working on the one column of a mat-table that comes from a database, the rest of the columns are working completely fine. The only difference is, I am fetching data for this one col...