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
Mat Sort on asynchronous in Mat Table with MatPaginator not working, datasource assigned asynchronously in template
I am trying to add a matSort to this already working and existing MatTable. I've tried to implement what I found on this other thread here mat-sort not working on mat-table, as it looks like describing the same issue, but can't manage to make it…
mike87
- 309
- 2
- 11
3
votes
2 answers
Angular mat-table Sticky Column overlaps when Scrolled
I'm using Angular 8's table (not using flex) with first 2 columns as sticky.
Issue :
The main issue is the space between the 1st and 2nd columns which leads to other issues.
When I do a horizontal scroll, the scrolling data is visible in the…
josiebhai
- 321
- 3
- 12
3
votes
1 answer
How to autofocus a table row in Angular
Context:
I have a component that loads a with a given data source.
I have added a (keydown) function to the .
The function allows me to shift the row highlighting up and down the rows as I press the up/down arrow…
Pep
- 371
- 2
- 8
- 17
3
votes
1 answer
Insert a component into another parent component and pass data
Is it possible to insert a component into another parent component and pass data to the child component from the parent component?
User Component
Table Component
Detail Component
in user.html
…
Rafael L R
- 521
- 1
- 4
- 8
3
votes
3 answers
Set minimum number of rows on angular material table
I'm trying to display an angular mat table with a minimum height. If there is no data available, I'd like it to simply show empty rows.
I've seen this article Angular Material Table set default number of rows
But I won't know the number of rows as…
kamcknig
- 883
- 3
- 9
- 27
3
votes
1 answer
Angular Material Navigate rows using up and down arrow key
I added a custom ngclass to my mat-table to to make the rows clickable. but now I would like the user to be able to navigate using the up and down arrow keys. using this git hub as a reference(https://github.com/angular/components/issues/14861) I…
Flash
- 924
- 3
- 22
- 44
3
votes
2 answers
Angular Material column width fit content?
This is my actual Angular Material table:
I would like the column width to fit the content so that the header
and the rows content occupy one line.
Tried adding padding and margin with:
.mat-row {
height: auto;
}
.mat-cell {
padding: 0px…
Iñigo
- 1,877
- 7
- 25
- 55
3
votes
1 answer
Error There is no directive with "exportAs" set to "matTableExporter" when using MatTableExporter
From the docs example I'm trying to use the mat table exporter, this way:
…
Usr
- 2,628
- 10
- 51
- 91
3
votes
3 answers
How to convert color code into actual color
I'm using Angular material with Angular6 in my project. What I want to do is convert color codes which stored in the database into actual colors in my mat-table.
Currently, my table is as follows,
This is how I'm getting visible columns data from…
INDRAJITH EKANAYAKE
- 3,894
- 11
- 41
- 63
3
votes
1 answer
How to create an Expand All Button for Mat-table so that it expands every row in the table in Angular 8?
I am using Angular Mat-Table and have created a table with expandable rows just like the one below in Angular 8:
https://stackblitz.com/angular/qykjaloknex?file=app%2Ftable-expandable-rows-example.ts
I wanted to know if there was a way that I can…
Big Diesel
- 113
- 2
- 7
3
votes
1 answer
Angular Material mat-paginator navigation is disabled
I would like to use the Angular mat-table with mat-paginator controlling the page changes with http request. So, I receive from my server an object with the following attributes:
content: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},…
Murilo Góes de Almeida
- 1,588
- 5
- 20
- 42
3
votes
2 answers
How to filter a MatTable in angular without filterPredicate
I have MatTable that i want to filter using values i store from the user input I am able to check that that the value match the data but I don't know how to filter the table without using filterPredicare as using another one will get me a…
EliKnaffo
- 354
- 5
- 17
3
votes
2 answers
Angular Tables mat-table and cdk-table
What is the difference in angular's mat-table and cdk-table and in mat-table can we render rows of table after it has been created once.
Akhil Shrivastava
- 31
- 1
- 3
3
votes
1 answer
Angular Material mat-table filter mat-table column containing boolean
I am trying to filter an Angular Material mat-table for a column that only contains boolean. I read here that datasource.filterPredicate can be used to filter the collection but I found out that the call uses a string parameter. Here is my code so…
c0micrage
- 1,118
- 2
- 21
- 56
3
votes
2 answers
mat-sort-header / mat-sort not working on a particular column
mat-sort is not working on the one column of a mat-table that comes from a database, the rest of the columns are working completely fine. The only difference is, I am fetching data for this one column from another service.
I tried to solve it with…
Amit Kumawat
- 114
- 1
- 1
- 12
Context:
I have a component that loads a with a given data source.
I have added a (keydown) function to the