Stack Overflow
Stack Overflow

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

How to change content of mat-cell row conditionally where as column cell values gets displayed dynamically

I have rendered column cell values dynamically through mat-table and my requirement is to display content of mat-cell differently based on column cell value rendered. I am new to angular and I have tried all possible solutions I have seen in google…
Kireeti
  • 49
  • 3
  • 8
2
votes
1 answer

Angular material combine same column values in table and show only single value for multiple rows

I have a field called purchase_id which is the same for multiple records. Many records have the same purchase_id. Currently, I am showing the same purchase_id for multiple records, but now I want to combine the cells which have the same purchase_id…
pratik jaiswal
  • 1,855
  • 9
  • 27
  • 59
2
votes
1 answer

Component (AngularMatDataTable) doesn't re-render after data array changes in subscription in ANGULAR?

I'm creating a Parent/Child relationship in Angular 8. Parrent component invokes the service call which sets the observable roleList,then I pass this roleList to child component. In child component, I try to subscribe to the Input variable that…
Erkin Kurt
  • 652
  • 6
  • 16
2
votes
1 answer

Angular mat table enable/disable row based on button click

I am trying to build an inline editable table using mat-table. But I am not able to enable/disable each row separately based on each row's button click. Currently if I click one edit button, whole textfields in the table are enabled/disabled. Could…
Joby Wilson Mathews
  • 10,528
  • 6
  • 54
  • 53
2
votes
1 answer

Data from rest API not showing up in Angular Material Table

I am trying to show data in angular material table, here is get request to fetch data from API export class ProductsListComponent implements OnInit { // Table fields displayedColumns = ['select', 'country', 'actions']; …
Junaid
  • 31
  • 5
2
votes
0 answers

Angular Material Table refreshes data once but then stops refreshing the data

I have a strange scenario occurring where I am displaying an angular material table of customer first names and last names. There is an "Add Customer Button" that pops up a modal to add a new customer in there. When you click Submit, it adds the…
MattE
  • 1,044
  • 1
  • 14
  • 34
2
votes
1 answer

How can I get the value/content of a custom component inside mat-table?

I want to build a custom table with mat-table where for the last column and for every row I want to define a custom component. This works. But the custom components are for some input, so the user can select some options or type something…
burhangoeksen
  • 23
  • 6
2
votes
1 answer

How to pass data to material table data source dynamically

I want to pass the dynamic data to material table. I show my code: parent.component.html
user1938143
  • 1,022
  • 2
  • 22
  • 46
2
votes
0 answers

mat-checkbox Selection: how to apply selection only to the current page in Angular Material Table?

I am working on Angular Material Table where I am using pagination with a selection when I click on the checkbox its selects all the rows of the data table I want to select only the rows that are on the currently selected page. Below is the link for…
vinuta
  • 423
  • 9
  • 29
2
votes
2 answers

Mat-sort is not working in angular mat-table

My mat-table is working fine, but when adding mat-sort following the official api documentation, it fails at the ngAfterViewInit with the following message Cannot set property 'sort' of undefined aq…
AbhiRam
  • 2,033
  • 7
  • 41
  • 94
2
votes
2 answers

Angular mat-table cancel ripple

I have an angular-material table with a clickable row with matRipple effect. Within the table I have a button as one of the rows. When the button is clicked it emits an event, and so far I have stopped event propagation and this works well at…
Kisinga
  • 1,640
  • 18
  • 27
2
votes
2 answers

Angular Material Table sort behaving resulting in incorrect order

Im probably being stupid but as far as i can tell, below code should follow examples from angular material website exactly. however, the sorting result is incorrect. I can see sorting happened because order changed. row xxx50 became the first row.…
Michael Zhou
  • 41
  • 1
  • 8
1
vote
0 answers

how does one programatically display sorting indicator arrows in angular mat-table (without triggering sorting event)?

Question: Is there a way to programatically display the sorting indicators (the little arrows) in an angular material table without triggering the sorting event? I have a page with a mat-table that allows for pagination, filtering and sorting. …
Scott Turnquist
  • 135
  • 3
  • 8
1
vote
1 answer

dynamic table in angular materials

I'm encountering an issue while working with Angular and Angular Material. After fetching data from an API and displaying it in an Angular Materials table, I'm trying to add an extra column with edit and delete buttons. However, I'm running into an…
Nadia akrach
  • 11
  • 2
1
vote
1 answer

Data is not rendered with mat-table [datasource] although it exists and is rendered with the "json" pipe

I am implementing a table with mat-table. I want to bind the data source to an array whose data is fetched by an API. When I fetch the data using httpclient and subscribe to the result, the table doesn't render anything. However, I used the "json"…
Ebrahim Mansour
  • 363
  • 1
  • 4
  • 13
1 2 3
…
35 36