Questions tagged [angular-material-table]

An Angular component that provides the Material Design styled data-table. For displaying tabulated data. Also, include [angular] and [angular-material] tags when posting the question.

The Material Data Table component is a generic component for displaying tabulated data.

Useful Links:

https://blog.angular-university.io/angular-material-data-table/

https://material.angular.io/cdk/table/overview

https://material.angular.io/cdk/table/api

528 questions
2
votes
1 answer

Calculate sum of data in an Angular Material Table column that can be fetched from back-end

I want to calculate the sum of the Amount column in this table. The data is fetched from the back-end using Node and MongoDB. I have attached most of the code related to the table here. This is my table.component.html
2
votes
3 answers

Angular Material Table Sorting with reactive formarray

I am trying to implement sorting / filtering on angular material table with formArray as input data source. StackBlits code link dataSource = new MatTableDataSource([]);
2
votes
1 answer

Angular table component jest tests not passing with cdkTable 10.1.3

I am testing locally MatTable with different name 'PsTableComponent' and trying to run jest tests. However PsTableComponent (which extends cdkTable like the original MatTable component) with jest gives the following error: TypeError: Cannot read…
2
votes
1 answer

Add a fixed static row in a angular Mat Table

I have a dynamic table using mat-table where i render the columns from the data object.
... I render the columns
2
votes
2 answers

Sending an Id to a method on a button click in Material Table in Angular

I have the following Material Table Code for "Action" is as given below:
Action
2
votes
1 answer

Angular Material Table Detail Rows expanding on their own when changing tabs

I have a Mat-Table with detail rows in a Mat-Tab. The table works as desired until I choose another tab. When I switch back to the tab with the table, all of the detail rows are expanded.
2
votes
2 answers

mat-sort and mat-paginator not working on Angular Material mat-table

I was trying to use the mat-sort and mat-paginator on my Material table which does not seem to work. The Table does get the data in the dataSource.data and it is also shown in the mat-table, but the dataSource.sort and dataSource.paginator…
2
votes
4 answers

When sorting a Angular Material table can you view the data without modifying it?

Angular Material table utilizes a MatTableDataSource method called sortData() to sort the table's data source. (https://material.angular.io/components/table/api#MatTableDataSource). It is an arrow function: sortData: ((data: T[], sort: MatSort) =>…
2
votes
1 answer

Angular Materials Table expand and collapse table cell?

I have a mat table and a current row click event already. I need to be able to have an collapsible table cell depending on the amount of data in the cell. In the case below its a text-area If a cell has a length of over 30 then it needs to show the…
CodeMan03
  • 570
  • 3
  • 18
  • 43
2
votes
2 answers

Mat Sort header does not sort data

I have exhausted all examples, documentation and so on. I've used angular tables for three years now and even within the app I have this issue, I have other tables that have no issue working with sort. I kept comparing them but I can't figure out…
SebastianG
  • 8,563
  • 8
  • 47
  • 111
2
votes
2 answers

How to make my ngForm dirty after modifying an Angular Material table inside the form

I have an Angular form like below and it has a save button that is disabled until a input field is changed (made dirty) and it works fine with input elements. Then I placed a Angular Material UI table inside the form and I want the form to be dirty…
chuckd
  • 13,460
  • 29
  • 152
  • 331
2
votes
1 answer

How do I set the ngModel for dynamically added new input rows angular 4+ (mat-table)

I will keep it short , i want to add ngModel to dynamically added new input rows (I have Mat table with multiple rows with add element method which adds new row everytime on click of button) so that i can bind the user entered values and send to…
2
votes
1 answer

TypeError: def.when is not a function in Angular Material Table

I try to get an extra row with colspan (matColumnDef="table-filter") by using the when predicate. Fun-fact is, I use the same principle somewhere else in the app (other module) and it just works fine. …
sl3dg3
  • 5,026
  • 12
  • 50
  • 74
2
votes
1 answer

create generic data table using angular material

I want to create reusable angular material data table which can be used by any component and need to pass only required column header and other table data. Below is what I tried: I am following this example: stackblitz Created shared folder in…
2
votes
1 answer

Angular Material MatTableDataSource not updated after redirecting from one component to another that also has a MatTableDataSource

I have 2 Angular Modules: Student Course Inside Course I have a Component (CourseListComponent) that I would like to show nested inside a Student component (StudentDetailsComponent). So I need to export that component from Course…