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

Angular Material 12: Customize Table Sort Button

I have an Angular Material Table with sorting: table.component.html: ...
Name
This displays a sort…
Elias Strehle
  • 1,722
  • 1
  • 21
  • 34
0
votes
1 answer

Angular Material dataSource filter with array of string

I am using Material table in my Angular project. There is a provision to filter string and it working perfectly myData: UserData[]; // Imagine its initialized dataSource = new MatTableDataSource(myData); applyFilter(filterValue: string) { …
karthick
  • 83
  • 7
0
votes
1 answer

Expanding multiple rows in a nested mat table in Angular not working

I have created a nested mat-table grid using Angular Material. But currently only 1 row gets expanded at a time. I want to add a feature so that multiple rows can be expanded at a time, without the previous one getting collapsed. Working Stackblitz…
angular_code
  • 319
  • 3
  • 18
0
votes
1 answer

How can I hide an empty row in angular material when the table is loading?

I am trying to display a loading spinner on a material table when the frontend is waiting for the backend. I have no problem doing that, the problem is that the empty row is displayed during this loading time and does not look good. I was using this…
nck
  • 1,673
  • 16
  • 40
0
votes
1 answer

Undefined key _paginator in MatTableDataSouce :

In the below-attached image, as you can see _paginator key-value pair is Undefined in the MatTableDataSouce object. Because of this, the paginator is not working.
S J BHAVANA
  • 1,421
  • 11
  • 8
0
votes
1 answer

Sorting Observable Data in an Angular Material Table

I'm trying to sort observable data in an Angular Material Table. I'm able to successfully load data to the table, but I am not able to sort it. Please see the code below: export class IntegratedComponent implements AfterViewInit { …
Berto
  • 25
  • 8
0
votes
1 answer

When filter is empty it returns empty array

i need help with the filter in a datatable in angular project. The filter is working fine and is filtering the results in the table, but one I delete all the letters in the filter field, it returns an empty datatable, and again if I input only 1…
sutin
  • 37
  • 1
  • 7
0
votes
2 answers

HOw can I iterate array of a column angular table

I'm using an angular-material table. I have an array like this: [ {"name": "name1", "category": [{ "id": "c1", "name":"cat1"}, {"id": "c2", "name":"cat2"]}] I have this code in the component.ts: export class ListComponent implements OnInit { …
cabita
  • 832
  • 2
  • 12
  • 36
0
votes
0 answers

Angular material table always delete the first row

I have a table with some data and a delete function on all rows which works but always delete the first row, doesn't matter if I click the delete button on other rows always delete the actual first row. here is my code: public deleteRow(recordId) { …
Kerk
  • 283
  • 1
  • 4
  • 24
0
votes
0 answers

Angular Material Table pagination not working, listing all rows even though the paginator is shown

I am trying to paginate an angular material table. The table at present is having dummy static data , in future once the backend api is ready it will be called to populate the table. At present, the table is not showing the data as paginated. All…
Ananthapadmanabhan
  • 5,706
  • 6
  • 22
  • 39
0
votes
1 answer

Angular Material table header sticky:true not working

I have a Angular Material table within a div that has a max-height set and overflow-y: auto, but the headers are not sticking to the top of the viewport as expected. ... …
Jadamae77
  • 828
  • 7
  • 13
0
votes
1 answer

Angular Material Table with keyboard navigation - listen to all keydown events except those from the Overlay Components

I'm trying to implement a MatTable with keyboard interaction, in order to select the rows inside the table. For the keyboard interaction, I've used FocusKeyManager from Cdk's- a11y module. Also, the keydown event is attached to the host…
andreivictor
  • 7,628
  • 3
  • 48
  • 75
0
votes
2 answers

How can you access the value of a cell in different cell of the same row in Angular Material Data-Table?

I have a Angular Material Data Table with four columns. The last cell of every row is a button with an on-click function attached to it. I want to use the value of my first cell ("Name") as a parameter in the function that is attached to the button…
John Bauer
  • 27
  • 8
0
votes
1 answer

MatSort: property name different from matColumnDef -> Not working

Is there any chance to sort a column with matSort in an Angular table where the name of the property differs from the matColumnDef: TEST
dschulie_27
  • 31
  • 4
0
votes
1 answer

Angular Material Table doesn't display any data

I need to merge data from 4 different endpoints to create a ListElement that will be displayed in angular material table. I can see correct data in logs, but the table remains empty. If I add condition: "data.data.length > 0" it manages to show only…
cannelle28
  • 168
  • 5
  • 17
1 2 3
…
35 36