Stack Overflow
Stack Overflow

Questions tagged [mat-table]

Angular Material - mat-table

The mat-table provides a Material Design styled data-table that can be used to display rows of data.

607 questions
31
votes
6 answers

Reorder mat-table rows with angular material's drag-and-drop

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 several lists. However, it doesn't talk about…
David Brem
  • 504
  • 2
  • 6
  • 16
26
votes
1 answer

Should I use "
The title already says it, which one should I use and is there / what is the difference between having
Hobbamok
  • 767
  • 1
  • 11
  • 21
21
votes
7 answers

How to delete particular row from angular material table which doesnt have filters?

My samplepage.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-batchticketvalidation', templateUrl: './batchticketvalidation.component.html', styleUrls: ['./batchticketvalidation.component.css'] }) export…
JustCode
  • 661
  • 1
  • 8
  • 19
21
votes
3 answers

Angular table index is undefined with multiTemplateDataRows directive

I'm having trouble getting my table indexes to show up. Here's an example table:
TabsNotSpaces
  • 1,224
  • 10
  • 22
19
votes
5 answers

How colSpan and row Span added to material table Header Angular 7?

I'm trying to add rowSpan and colSpan in Angular material Table header. Can anyone help me to achieve it. Below is the Attached Header I want to get using material table
D C
  • 708
  • 1
  • 6
  • 17
15
votes
3 answers

Mat-table multiple row within a multiple row

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 above scenario is for the business to show multiple…
Danny Hoeve
  • 692
  • 13
  • 30
11
votes
4 answers

How do you render an Angular 9 mat-table without a header row?

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
satish
  • 703
  • 5
  • 23
  • 52
10
votes
8 answers

How to add border radius to angular mat table?

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?
Shofol
  • 693
  • 1
  • 11
  • 26
10
votes
1 answer

Why is the without a Datasource not displayed in Angular 7

I want to use a 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 means (such as a slide-toggle or a mat-selection), I have to…
Tare
  • 482
  • 1
  • 9
  • 25
10
votes
1 answer

Use Angular material table to group columns

I have am trying to figure out how to group columns using Angular mat-table. I have no clue how to start with this and I can't seem to find an example anywhere. The first two sections need to be grouped like this image below:
iamcootis
  • 2,203
  • 3
  • 18
  • 22
10
votes
2 answers

use ngif to hide a row in mat-table

I am trying to hide a row after I click on a button in the mat-table. I don't know where to put *ngIf. I tried on ng-container but it does not work. Below is my HTML file.
Tony
  • 125
  • 1
  • 2
  • 7
10
votes
5 answers

How to sort MatTableDataSource programmatically?

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 layout. However, I'm having trouble doing so. I've…
soupjake
  • 3,293
  • 3
  • 17
  • 32
9
votes
7 answers

Alternate color with Angular Material mat-table with parent child rows

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){ background-color:#ffffff; } This works when my…
c0micrage
  • 1,118
  • 2
  • 21
  • 56
9
votes
1 answer

How to create custom filtering using MatTableDataSource in angular 5?

In Angular material official website Angular Material Table it is mentioned that filterPredicate: ((data: T, filter: string) => boolean) will filter data based on a specific field. But don't know how to start. Is there any example is present for…
Tanvi Shah
  • 497
  • 2
  • 9
  • 18
8
votes
1 answer

Performance of mat-table with 30 000 rows

I use Angular 6, Firebase and Angular Material. I have 30,000 json objects stored in firebase that I want to load them into a mat-table. Only I get way below that I wish. I wait 30 seconds before I can click on my application, sometimes chrome is in…
Alan ENTEM
  • 129
  • 2
  • 10
1
2 3
…
40 41