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

Angular Material Table - How to update column header of an existing table?

I'm using Angular 7 and I have a simple component with an Angular Material Table. Through some event, say a mouse click, I want to be able to update both the data and the header of that existing table. Before: After (goal): Currently, I'm getting…
Andrew
  • 893
  • 12
  • 28
6
votes
1 answer

Render html in Angular Material Table cell

I am trying to add html content in angular material but the tags show as simple text in html for example "first line
.here should be a new line" How do I do it?
Anna
  • 101
  • 8
6
votes
1 answer

Is there any Angular event on mat-table when table rendering is finished?

I'm looking for an event what is fired when the Angular Material table (mat-table) rendering is finished. I think it's need to fire on data source is changed, or the user changed the displayed columns or paginate event happend (but it's the same the…
netdjw
  • 5,419
  • 21
  • 88
  • 162
6
votes
2 answers

Angular mat-table: Is it possible to merge cells by columns?

I'm having trouble finding an answer on how to merge columns cells in mat-table. Only saw few examples in merging row cells using when. So was wondering if i can find answers here. I have this JSON data: { "id": 4, "description": "this is…
simple guy
  • 633
  • 1
  • 6
  • 19
5
votes
1 answer

Vertical scroll bar and fixed headers with mat-table

I would like to know how to display a vertical scroll bar for the rows only (headers are not moving) with Angular Material mat-table. When I set overflow: auto and max-height in mat-table style, the whole table (including the headers) are…
corleone88
  • 161
  • 2
  • 2
  • 9
5
votes
1 answer

MatTable Expand Collapse Icon issue on pagination and sort

I've a angular material table which uses detailRow directive to insert a detail/sibling adjacent row to a table row. StackBlitz I wanted to give it an appearance of as if the row is being expanded or collapsed, so I added couple of icons to it which…
kal93
  • 522
  • 1
  • 9
  • 22
4
votes
1 answer

Fix column width in Angular Material Table

I am using Angular material table and trying to fix width for few columns as shown below: No.…
Diksha
  • 246
  • 2
  • 13
4
votes
3 answers

How do I verify I've selected the correct user from a table in Cypress (html-table / angular-material)

I'm trying to delete a specific user, and would rather the test fail then delete a different user if the user I want doesn't exist. The issue, I can't seem to find a way to verify the checkbox is next to the user I want. I've been using a .each()…
Daniel
  • 95
  • 1
  • 11
4
votes
0 answers

Angular material table detect Scroll

I'm using Angular Material Table and want to detect when user scrolls the table. For this, I'm using cdkScrollable. app-my-component: constructor(private scrollDispatcher: ScrollDispatcher)…
user5155835
  • 4,392
  • 4
  • 53
  • 97
4
votes
1 answer

Angular Material Table: custom sort folder and file items

I have different types of items in my mat-table: Files and Folders. They have to get sorted like in Microsofts file-explorer. Folders can`t be separated from folders and likewise with files. All other sorting rules staying the same. Has anyone an…
andreas.herz
  • 85
  • 1
  • 1
  • 10
4
votes
3 answers

Button within Angular Material Table not working

I have the following Angular Material Table setup:
…
Sun
  • 4,458
  • 14
  • 66
  • 108
4
votes
0 answers

ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable in Angular 8

I am using mat sort to sort mat-table in angular 8. Getting error "You provided 'undefined' where a stream was expected" when using following code. ngAfterViewInit() { this.dataSource.sort = this.sort } Please find below full source code: html…
tsummo
  • 41
  • 4
4
votes
2 answers

Angular Mat-Table finished rendering Event / Mat Paginator Loading Spinner

I am using an Angular Material Table with a rather big, pre queried Datasource. Now, everytime i change the Table Pages with the built in Paginator, i have a short Delay before the new Table-Rows are rendered and i would like to display a Loading…
max Haslehner
  • 41
  • 1
  • 2
4
votes
2 answers

Angular (7+) Material table with expandable rows - multiple expanded rows at the same time

I am using Material table with expandable row I would like to have multiple rows expanded on row clicks. The default behavior is to close the previously expanded row upon a new row click. I don't want the previous ones to be closed, each should be…
Efron A.
  • 353
  • 3
  • 10
  • 19