Angular Material - mat-table
The mat-table provides a Material Design styled data-table that can be used to display rows of data.
Questions tagged [mat-table]
607 questions
3
votes
2 answers
How do I set my mat-table CSS column width to only take up as much space as the data?
I have an Angular 9 mat-table that looks like below
category
satish
- 703
- 5
- 23
- 52
3
votes
0 answers
Angular Mat-Table: how to make each row as separated form?
I'm working on my custom grid component that use Mat-table. In my grid I have a adding row that is a records in data sourse and has inputs in cells, in the last column there is a button to add a new record. To achive this I was using a
D.Zet
- 753
- 3
- 11
- 32
3
votes
2 answers
How to access child component from parent component in Angular?
I have mat-paginator in a child component a shown below:
child.component.html
Jack
- 1
- 21
- 118
- 236
3
votes
0 answers
Angular Mat-table Schematic issue
I'm facing an issue displaying my backend data in the mat-table schematic that I created. I was able to pull the data using my service and pass it in the connect() to load the data with fields from my DB, my main issue is that the table is showing…
Elias Khattar
- 163
- 2
- 19
3
votes
1 answer
Cannot change Angular mat-table column order
I created a base list using Material mat-table as on this page and and it works without any problem. However, when trying to move the actions column to the end column of the table a shown below, the order remains same at the first column and it does…
Jack
- 1
- 21
- 118
- 236
3
votes
1 answer
How to align 'search' box to the right side in angular mat table?
I am using mat-card such that add button and search box need to be aligned horizontally in a single line.
I want add to be on left side and search to be on the right side.
I have written following html but search is not aligning to the right…
meallhour
- 13,921
- 21
- 60
- 117
3
votes
1 answer
Cell renderer component moving outside of an AG-grid when it is inside a mat tab
I have two AG-grid displaying datas. Each of them has, at the end of each row, two icons meant to modify or suppress the data line. They each are inside of a mat tab.
Mathis Chapuis
- 121
- 6
3
votes
1 answer
Angular Material Table: Property 'displayedColumns' does not exist on type 'ContentComponent'
Problem statement
I have an Angular material table which I want to display data, but it breaks on these lines:
Compiler v2
- 3,509
- 10
- 31
- 55
3
votes
1 answer
How to reset mat table filter predicate?
I am using Mat Table in which I am having 2 filter criteria/options.
A toggle button for filtering based on 1 column.
And a normal input text box for filtering based on default behavior, string matching.
So when I am calling the toggle function,…
SanDash
- 733
- 1
- 6
- 15
3
votes
0 answers
How to limit rows in mat-table and create filter to even filter data which is not in table but in datasource?
I am new to angular and mat-table. I am trying to create a table using mat which performs following functions -
Displays only top 10 users.
Create filter to search for user which may/maynot be in top 10.
I am fetching data from service API. I have…
pragati sukhija
- 63
- 4
- 7
3
votes
1 answer
Mat Paginator not working with FormArray on Material Table
I am using mat-table with formArray in it, also I need to Mat-paginator.
But unfortunately pagination not working.
Stackbltiz Demo
Sample Source,
.html