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
0
votes
2 answers

mat table column with filter the sort arrows is not visible

I am new to angular... My mat-table is working fine, but when column has filter and sorting functionality the sort arrows is not visible on columns with filter. I was trying to adjust the column wight, but no matter how small or big the column the…
Happy Coder
  • 1,293
  • 1
  • 19
  • 35
0
votes
0 answers

Modeling data retrieved from HTTP to generate dynamic Material 2 table

Few days in a row I'm trying to create a dynamic mat-table from data that I retrieved trough HTTP. So far so good. I used this stackblitz as an example. In template, table is generated like this..
MaxLAB
  • 13
  • 9
0
votes
1 answer

angular 2 material table refresh

My situation: I have a drop down and a table below the drop down. For understanding assume drop down is city and table below shows list of cities with details. When user selects a city in the drop down the row for that city must be made the first…
Gullu
  • 3,477
  • 7
  • 43
  • 70
0
votes
1 answer

Filtering a Material Table with numbers ranges [Angular 7]

I am using Material Table on my Angular 7 project. I have a table that displays several objects. Each object has a property 'number of promotions' and i would like to filter this table using numbers ranges (under 5, from 6 to 10, from 11 to 20, more…
A. Guyot
  • 71
  • 1
  • 13
0
votes
1 answer

Drag n' drop between two material tables

I'm trying to implement drag n' drop into my project, but are a little stumped as to how to begin. In Angular 7 we now have the cdkDragDrop, which seems very promising. However, all the examples are based on one or more lists/divs. I would like to…
Lars Rødal
  • 809
  • 1
  • 9
  • 26
0
votes
1 answer

Sorting nested array object in angular

I have this json attached to a mat-table const pendingUsers: pendingUsersData [] = [{ 'autoReLogin': false, 'rolesAccess': [{ 'requestReason': 'because i need it', 'status': 'pending', 'role': 'API_ApplicationDeveloper' }], …
Sujith
  • 105
  • 1
  • 7
0
votes
1 answer

How do I use matSort to sort the columns in mat-table?

I am trying to implement sorting in mat-table but it does not work at all. I am not getting any errors. Here is my code. This is my component.ts file export class TerminalsComponent implements OnInit { cols: string[] = ['select',…
Rashmi Rai
  • 19
  • 1
  • 5
-1
votes
0 answers

text-overflow: ellipsis not working when using with [mat-sort-header]

I am using version 14 of angular (and angular material). I've migrated from primeNg to Material, and have noticed that my th block using the [mat-header-sort] directive do not display the ellipsis style anymore. Thus it is still detected in the…
Xavi
  • 1
  • 2
-1
votes
1 answer

Angular 16: How do I change the background color of every second row in mat-table and the row background color on hover?

Recently I have upgraded my project from Angular 13 to Angular 16. Post that the CSS workaround I was done for the mat row color on hover and alternate row color is not working . I have found so many references in stack overflow itself but nothing…
Zhu
  • 3,679
  • 14
  • 45
  • 76
-1
votes
2 answers

How to use footer with colspan to align total in mat table

Need to show the total below the amount column. Currently, I'm using the margin-left property to show the total below the amount column. Since this is not working properly, could someone suggest to me how to achieve this using a table footer with…
its me
  • 524
  • 6
  • 28
  • 62
-1
votes
1 answer

How we can merge row cells in angular mat table

I'm using angular material and mat-table to display records in table format. But I want to merge row cells and display data like shown in below image. (record 5,6,7) Can someone pls let me know how we can achieve this ?
Ajinkya More
  • 19
  • 1
  • 9
-1
votes
1 answer

Angular: Data Table - alphanumeric-sort with angular material mat-sort

I have a problem sorting my columns with angular material mat-sort. I have some codes called correlative_request which were assigned with letters, numbers and characters. Here the problem is that when I try to sort my table in ascending order I…
Izlia
  • 235
  • 1
  • 2
  • 18
-1
votes
1 answer

Dynamical adding checkbox to each row in table angular

In the above image i want to add checkbox and its label dynamical to each row when click on 'Add New checkbox' button. so when i click on it button will visible a input box and type the checkbox name and submit the new checkbox will visible only…
Abru007
  • 435
  • 4
  • 12
-1
votes
1 answer

show dynamic data in angular mat table range wise

I have to integrate service data to angular mat table but it should change like below scenarios. if start date & end date difference is < 21 days then it should show dd/mm between start_date & end_date in header if start date & end date difference…
Samadhan Sakhale
  • 29
  • 5
-1
votes
1 answer

Angular- Filter the data coming from the API and display it in a Mat-Data table

I need to display data in a angular Mat data table that are coming from the API. Before showing it, I want to filter 3 data records and display the top ones. As an example data = [ ['Admin user', '12'], ['Test User ', '2'], ['System user', '5'],…
Kasun D
  • 1
  • 1
1 2 3
…
35 36