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
42
votes
5 answers

How to use the MatTableDataSource with an observable?

I am using the mat-table and I am trying to use the MatTableDataSource with an observable (I get the data from a web service), but I don't know how to configure the MatTableDataSource to use an observable instead of an array. Is the only solution to…
Christoph Hummler
  • 971
  • 2
  • 7
  • 20
21
votes
1 answer

How to add mutiple header rows using angular material table

Parameter 1: Time Period {{element.value}} Parameter 2: Gender {{element.gender}} Patients with Base Condition…
v3nu
  • 315
  • 1
  • 3
  • 10
18
votes
5 answers

Include Buttons and Paginator in the Material Table Footer

I use Angular Material Table and I need a command button and the table's paginator in the table's footer row, something like this My code is like this actually
serge
  • 13,940
  • 35
  • 121
  • 205
16
votes
7 answers

mat-paginator breaks when mat-table is inside of NgIf

I have an angular project that is using mat-table and mat-paginator for a certain view, the problem is the view has a grid view and table view with a toggle, the grid view is default and table is hidden using an NgIf when the grid view is active. …
jmona789
  • 2,711
  • 6
  • 24
  • 57
16
votes
3 answers

Why am I unable to apply a border to an angular mat-table row?

I have a simple angular material table:
Name {{element.name}}…
Rob
  • 897
  • 3
  • 8
  • 22
15
votes
3 answers

Missing definitions for header, footer, and row; cannot determine which columns should be rendered - Angular Material Table

I'm using Angular 9.0.4 with @angular/material 9.1.3 and I want to show a basic material table:
netdjw
  • 5,419
  • 21
  • 88
  • 162
13
votes
1 answer

Angular Material Table how to pass object to displayedColumns instead of array

I am building a table in Angular8 with Material table. I am using an array of strings to define the displayedColumns and passing in each array value to the matColumnDef directive. This is working properly. TS displayedColumns: any[] = ['username',…
pengz
  • 2,279
  • 3
  • 48
  • 91
12
votes
2 answers

The correct method of updating a MatTableDataSource in Angular 2 version 6

I have a listing that uses the mat-table component which is fed by the MatTableDataSource. in the component.html in the component.ts dataSource = new MatTableDataSource(); when I click to delete…
Adamski
  • 839
  • 2
  • 10
  • 28
11
votes
3 answers

Angular show image in Material Table Cell

I try to show an image in a cell of my Material table. Therefore I tried this code in my HTML File: imageUrl …
Dominik
  • 143
  • 1
  • 1
  • 7
11
votes
1 answer

Angular material 2 table - define column using TemplateRef and ngTemplateOutlet

I am trying to make reusable material table and I want to use TemplateRef with ngTemplateOutlet to generate columns. In this example I created cards components which is using my material-table component. In cards.component.html I have template of…
tprieboj
  • 1,680
  • 6
  • 31
  • 54
10
votes
5 answers

Angular Material Table Cell Formatting

I'm using angular material table for displaying data and dyanmically binding the table header and table data. Is there any way to format particaular column's cell content dynamically?. For example how can i format the value of amount column right…
Tom
  • 183
  • 1
  • 1
  • 9
9
votes
1 answer

How to create custom filtering using MatTableDataSource in angular 5?

In Angular material official website Angular Material Table it is mentioned that filterPredicate: ((data: T, filter: string) => boolean) will filter data based on a specific field. But don't know how to start. Is there any example is present for…
Tanvi Shah
  • 497
  • 2
  • 9
  • 18
8
votes
1 answer

How to use 2 pagination for single table in angular material table?

I am creating an application in angular6 with angular material. How to use 2 pagination in a single table. I want to show pagination both places Header and Footer. The header pagination only shows the "Items per page" with drop-down. The footer…
imjayabal
  • 805
  • 1
  • 12
  • 24
7
votes
6 answers

Angular material table sticky headers not working as expected

I forked the example on angular material table with sticky header and I added more data. I see that the headers are not sticky. Stackblitz here Anyone knows how headers can remain sticky?
pantonis
  • 5,601
  • 12
  • 58
  • 115
7
votes
1 answer

How to use key-value object as datasource for Angular Material table

I have an API response that looks like this: { "2019-02-13": { "costs": 117, "commission": 271.07 }, "2019-02-14": { "costs": 123, "commission": 160.37 }, //etc.. } I want to use this object as a datasource for my material…
Stijn
  • 171
  • 1
  • 5
1
2 3
…
35 36