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
3
votes
2 answers

Populating the Mat table(and perform Sorting & Filtering) using JSON Response

I'm new to Angular 7 and working on the Angular Mat table to display the response from the backend server and perform sorting, filtering and pagination on the data. Pagination is working as expected but sorting and filtering are not working…
3
votes
1 answer

Angular 6 - Ng-Container - Ng-Template inside Mat-table is not working

I am loading data into the mat-table data source from an API. There is an addnewrow() method which would add a new row at the top. I am actually trying to make the first column of the table editable. (i.e) user can give input only if they create a…
Mr. Learner
  • 978
  • 2
  • 18
  • 48
3
votes
0 answers

Angular / Mat Table - How to create a custom table component wrapping mat table

I want to create my own table component to add a checkbox column and actions around a set of ng-container for columns. Example ... The custom table component would…
user1732055
  • 2,517
  • 1
  • 13
  • 22
3
votes
4 answers

Implementing if else condition inside a mat-cell of a mat-table - Angular 5

I am trying to implement an if else condition inside a mat-cell of a mat-table in my angular application. But I am getting error from the console "ERROR Error: StaticInjectorError(AppModule)[NgIf -> TemplateRef]: " my code is
user10192769
  • 119
  • 2
  • 3
  • 12
3
votes
1 answer

mat-table - How to update the column width

I have three columns in mat-table. The first column is Number, the third column is date and the second column contains a big string. I want the first column to be 15px, third column to be 100px and middle column rest of the width. In Percentages…
Chatra
  • 2,989
  • 7
  • 40
  • 73
3
votes
2 answers

ng: 'mat-table' is not a known element

I'm trying to use mat-table in an Angular 5 project but I've got this error. I imported the MatTableModule and everything necessary to it but still getting this error: ng: 'mat-table' is not a known element: 1. If 'mat-table' is an Angular…
Mohamed
  • 45
  • 1
  • 1
  • 8
3
votes
7 answers

How can i display "No records found" when there is no records in angular material tables

I tried the below stackblitz link to display "No records found" message when there is no table data but the problem comes when I use data source of type MatTableDataSource. stackblitz link: https://stackblitz.com/edit/angular-w9ckf8 Below is the…
Rakshith
  • 39
  • 1
  • 1
  • 2
3
votes
1 answer

Angular 6 MatPaginator does not show mat-option for table and does not set style for next button and back button

I would like your help to identify the reason for the select option does not appear in angular 6 mat-paginator. And how to set style for Back button and Next Button. I'm trying follow the example…
Joh
  • 171
  • 3
  • 17
2
votes
0 answers

How to move expanded table row in mat-table over to the right with css

I have been following an example of adding expandable rows to an angular mat-table. So far, I have been successful - my code works mostly like the example. However, I am having a CSS issue. My expandable row is offset too far to the left, I am…
2
votes
1 answer

Angular Material data table showing table headers even when there is no data

I am using Angular material data table to show some product related data in a table with matSort for sorting. In the data table I've used [hidden]="!data" but when there is no data, I still get the table headers displaying. I tried wrapping it with…
2
votes
1 answer

How to refresh mat-table data source after deleting item through mat-dialog

I would like to refresh the items showed in a mat-table after deleting one item, without accessing again to server. It is working fine if I am deleting the item directly from delete button in a row, but it is not working when using a…
2
votes
0 answers

Mat-Table Sorting not working with async data

I'm trying to sort data from a table but it's not working. I'm also using a filter search and it's working fine but the sorting does not work. The header appears and everything, but it just doesn't sort the data. I think that the problem lies in…
2
votes
0 answers

How to pass material row template to custom table

I have created my custom table using angular material. this is the source code. I try to add an option to pass custom row template so I will be sent it like that:
yantrab
  • 2,482
  • 4
  • 31
  • 52
2
votes
1 answer

In angular mat-table insert data based on rowIndex and columnIndex

I'm trying to create a table with response as below having number of rows & number of columns. In this table I have an array of objects with a row index number and column index number which I'm trying to display accordingly into the Angular Material…
imPK
  • 764
  • 2
  • 7
  • 30
2
votes
5 answers

How do I update my Angular Table dataSource with data from an Observable

Im trying to display data in my Angular Material Table, that I receive from my backend. Everything works fine as long as my _timelogService.getAllTimelogs() function returns an Observable of dummy data which I hard coded into the function. As soon…