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
5
votes
1 answer
How can I get a mat-table to resize automatically to fit headers
I have a mat-table where I have center-aligned the headers and cells using the following css:
.center-align.mat-header-cell {
display: flex !important;
justify-content: center !important;
padding-left: 18px…
Woody
- 1,677
- 7
- 26
- 32
5
votes
1 answer
How to change elvation of a row in mat-table
I am trying to elevate hovered row in mat-table so changing elevation to a on hover but elevation that is shadow effect not showing at the bottom side of the row however showing for the top, left, and right sides of the row.
.html
Ramesh
- 1,041
- 15
- 39
5
votes
5 answers
2 mat-paginator for the same data source
I have a mat-table that might show up to 100 entries per page. At first, I had one mat-paginator at the bottom that worked fine. Now I'm being asked to set a paginator at the top and another one at the bottom of the table, so the user won't have to…
Gustavo Alejandro
- 101
- 1
- 7
4
votes
1 answer
Angular material table server side filtering
I want to make mat-table where I could do filtering while retrieving data through HTTP. I managed to get sorting and pagination working by using official docs example. But I have no idea how to add filtering to this example:
HTML:
idiot4352
- 61
- 1
- 8
4
votes
2 answers
Array of objects as dataSource in mat-table
I have array of objects in this structure:
data = [
{
course: 'Angular',
students: [
{name: '', enrolled_date: '', email: ''},
{name: '', enrolled_date: '', email: ''},
{name: '', enrolled_date: '', email: ''}
]
…
Eranki
- 750
- 1
- 11
- 30
4
votes
1 answer
Mat-table display rows depending on condition
I only want to show data on the table if status == 'done'.
I tried doing but what i did was just remove the status but it is still displaying the row.
How to do this?
data
{
equipmentOrdered: 'laptop',
qty: 1,
status:…
user10860402
- 912
- 1
- 10
- 34
4
votes
3 answers
Mat-table performance issues - once the table has loaded, it freezes the page
I have a mat-table that has over 150 rows, which doesn't seem like much but it completely freezes the page (especially if I have the developer console open).
To set the table data I use an input getter and setter (the reason being that it then…
Jm3s
- 556
- 2
- 12
- 24
4
votes
3 answers
How to use a slide toggle in a mat-table?
I have a mat-table that is viewed by 3 users of different roles.
The table has multiple columns; one of the columns is active (a boolean value that controls the activation and deactivation of the account). I want to toggle that value with a switch…
capuche
- 55
- 1
- 6
4
votes
1 answer
Add condition for row value (angular material)
I want to add a condition on the value of the current column. I can't read the value of curent row.
i don't know what the variable i must be used for check the condition i used row but is not defined
Achraf Marrouk
- 37
- 1
- 3
4
votes
2 answers
Inline text editing with Mat-table:
Does anyone have a good solution to adding inline text editing to a column where you can edit and save and re-edit with mat table like in this example:
https://material.io/design/components/data-tables.html#behavior
it look like it's still an open…
Flash
- 924
- 3
- 22
- 44
4
votes
2 answers
How to display only few columns based on condition in mat-table using angular 6?
I have a mat table which is having few columns. Here for one condition I need to hide two columns. For normal table, we would use simple ngIf condition. But for this mat-table that seems to be not working. I have tried this,
displayedColumns1:…
sasi
- 836
- 4
- 17
- 33
4
votes
1 answer
Sorting using mat-table for nested properties
I have the following table
| Name |
|---|
