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

Keep expanded mat-table from collapsing row when datasource updates (Angular Material)

I am building an app which uses live data that should update every few seconds. I am using mat-table, which displays an addition mat-table inside the collapsable row. The collapse works fine, but when I update the datasource it collapses. Is there…
2
votes
1 answer

How to implement IntersectionObserver on angular mat-table for lazy loading?

I want to lazy load more data as the user scrolls down the table and wanted to use IntersectionObserver. I am using bootstrap grid as the container. I used the code below but the callback is never triggered. This is my .html
Tea Zulo
  • 65
  • 1
  • 6
  • 14
2
votes
1 answer

angular mat table server side pagination - paginator does not enable

I have a table which data is from the server side (from the parent component to the child component ) the data is pass through input as you can see @Input() properties: any; and it has been loaded as the data source , Now I want to apply server…
2
votes
0 answers

Multiple column sorting in Angular material data table

I want to sorting on multiple columns in a data table (Angular Material) where next sorting column will give me the result based on previous column sorting. this.dataSource = new MatTableDataSource(yourData); this.dataSource.sortingDataAccessor =…
2
votes
3 answers

Angular : disable sort header for specific column

I have a mat-table with the matSort attribute. As I understood, this enables the sort header for all columns. Is there any possibility to disable the sort header for a single column? With ...
, I can specify a mat-sort-header…
Valentino Ru
  • 4,964
  • 12
  • 43
  • 78
2
votes
4 answers

Angular Material table filtering out all results when input is initially blank, will work after typing into input Only

So my table works really well, except that it shows no data until either a row is clicked or the filter is used. I am unsure as to what is going on here, not sure what I am doing wrong. I just want all data to initially load visibly into the…
2
votes
1 answer

Angular Material Pagination Not Showing but is working

im using the material Pagination i have imported module i put th material-pagination's tag inside the table and i notice that if i change the pageSizeOptions inside the tag the number of element displayed change but the paginator itself is not…
2
votes
1 answer

How to properly set up angular table datasource to pull data from API

Generating a table using the angular material schematics presents you with a table component that include a datasource.ts file. In this, the data to be displayed is hard coded. I have replaced the interface in this file to match my data, and with…
Dandesaj
  • 107
  • 8
2
votes
1 answer

Angular Material table filterPredicate not invoked

I have a custom filterPredicate that I had working with sample data, but now that I am using a request service to get data from an API is not being invoked. I have looked at other Stack Overflow answers, but none got me on the right track. The table…
2
votes
1 answer

MatTabGroup is not reliably showing pagination buttons

I am having an issue with the Angular Material Tabs component. I am trying to use the MatTabGroup with a handful of tabs in it. The problem is, when my component gets created, the Pagination buttons are not shown even though the existing tabs use up…
2
votes
2 answers

How to set Scroll position near to mat row in Angular?

I have more than 20 records loaded to angular material table. When I click one row it navigates to a page. And when I hit back button it return to table page. The problem is when I click on last row of the table, the scroll position goes to the top.…
2
votes
2 answers

Material table - trigger filter programatically

Following this sample I know I can write my own this.dataSource.filterPredicate. This works fine as long as I search for a string. I want to filter additionally according to a used state (=myFilterState). I try to use the predicate…
LeO
  • 4,238
  • 4
  • 48
  • 88
2
votes
1 answer

Data disappears from mat table when grouping

Rows disappear from mat-table when the search bar is put on focus and then the table is grouped.filtereddata property of datasource becomes empty when i group it. When filtered or put focus on search bar, the table gets filtered but then if I group…
2
votes
2 answers

How can I display a select list within an Angular Material table?

How can I display a select list within an Angular Material table? error: TS2339: Property 'element' does not exist on type 'MyaccountComponent'. I get the same error if I…
user1532669
  • 2,288
  • 4
  • 36
  • 72
2
votes
1 answer

Material table component throws error on destroy

I am upgrading an application to Angular 10. In one of my components I use a material table. In the Angular 9 application my html looks like this: it works fine there, but…
Michiel
  • 4,160
  • 3
  • 30
  • 42