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
0
votes
1 answer

How to change the mat-cell color based on json response in Mat-Dynamic-Table Angular?

I am having dynamic mat table to show json response which i am receiving from rest api. I want to change the cell color based on some condition. But, If i try to apply [ngStyle] it's applying for the whole row. I want to apply it only for a…
S.M.Priya
  • 354
  • 4
  • 15
0
votes
0 answers

angular mat table is not triggering click function on a radio button when pagination changes

Here is an angular mat table with pagination
Lisa
  • 655
  • 3
  • 10
  • 34
0
votes
1 answer

How to filter just one column in dataTable angular

I'm working on an angular project I have created a Datatable with sorting/pagination/and filtring but I need filter my table now by one column, for example, I need to filter my table by CIN. My cpm.ts: fake_arr: fake[] = []; displayedColumns:…
omar bouhajja
  • 105
  • 1
  • 1
  • 11
0
votes
1 answer

Is there any way to update mat-table data source when some one add new record?

I'm using angular material mat-table to view records from database but when someone add new record to the database it doesn't appear in the table so I need to reload the page to get updated. Is there any way to make data source updated without…
0
votes
1 answer

How to show DataSource using material table using Angular 8

I am using Angular material table but I didn't faced how to show the dataSource on my screen. Here is the code I am using: I have evento-table.component.ts requesting data from server: dataSource: EventoTableDataSource; eventos: Array =…
cscord
  • 3
  • 2
0
votes
1 answer

how to get server side pagination but client side sorting

i am using Angular Material's data grid. I am able to load data from server side and sorting and pagination both works, however i am trying to sort only the items that are on the table at the moment instead of sorting from server side.
Raas Masood
  • 1,475
  • 3
  • 23
  • 61
0
votes
2 answers

Angular Material Row when looping through data

My Data Source is like below [{"isGroup":true,"groupName":"MV Reddy","items":[{"id":1,"name":"MV Reddy","verticalid":5,"vertical":"Colocation - Large > 20…
saikiran
  • 2,247
  • 5
  • 27
  • 42
0
votes
1 answer

Angular - how to move entire mat-footer-row to top of table

I am working with a material table with ng-container having 3 things: a) th(mat-header-cell) b) td(mat-cell) c) td(mat-footer-cell) In this table, the footer row (totals of data in preceding rows) is currently displaying on the bottom of the table…
0
votes
2 answers

Select all rows in table on current page using radio buttons

I have a table that a user can select two options, remove or retain. In the first column header I have a remove all and retain all radio button that will select every row in the dataSource. I want it to only select the rows that are displayed on the…
0
votes
2 answers

angular => issue with form with material table inside

In angular 7, I am trying to develop a page where i will be showing data in table format , and also want to give user access to edit, add and delete. I am facing problem in adding formarray to the formgroup. On console i am getting below…
usersam
  • 1,125
  • 4
  • 27
  • 54
0
votes
2 answers

Angular matSort not working on Date column by desc

Trying to sort the material table with date column , date format is 'MM/DD/YYYY ,h:mm A' , order of date is not by latest date and time. Anything which i missed from the below stackblitz code. https://angular-matsordesc.stackblitz.io
vijay munnangi
  • 43
  • 1
  • 4
  • 13
0
votes
1 answer

Mat-table with expandable rows, remove hidden rows

I am using this stackblitz example of nested material tables to create similar table in my project. https://stackblitz.com/edit/angular-nested-mat-table?file=app%2Ftable-expandable-rows-example.ts This approach creates a "hidden" row, if you will…
0
votes
1 answer

Toggle this element on material table cell angular

I'm trying to change a style and increment a favorites count, the problem is my code changes the style for all heart elements. I've tried using index like favClicked === i but then when you click on another heart, it disables the style from the…
0
votes
2 answers

Angular 8 Material Table does not show data

I am getting the data through http, in my console I see that I get the expected results but they are not shown in the table, but I have noticed that when I click on some element of my menu they appear, in the sample code I put a select so that I can…
0
votes
1 answer

Getting error "Property 'tpl' does not exist on type 'ListComponent'." using Angular material table

I am getting the following error while implementing the angular material table. Error: Property 'tpl' does not exist on type 'ListComponent'. I am explaining my code below.