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
-1
votes
1 answer

Updating data doesnt expand the data tree inside material-table

Im trying to build a table with nested tree folder inside. When trying to add nested data into the datasource data the structure will not updated and will not toggle anymore. Code…
user16799749
-1
votes
1 answer

Method to structure my json data for monthly attendance?

I have a material table that looks like this: Click here to see the image and i have a json server set up with data in the format: { "posts": [ { "empid": 12345, "name": "Dharini Iyer", "dates":[ {"1": "Absent", …
Dharini Iyer
  • 11
  • 4
-1
votes
1 answer

How can I apply pipes and get action buttons(Completely reusable) in Mat-table reusable component

I want to create a reusable component of the Angular Material Mat-table. I guess I've done pretty much about it (You can see in stackblitz) - I'm able to load the data from the parent component to the child component but I want to apply pipes on it…
Prafful Kamble
  • 11
  • 3
-1
votes
1 answer

Angular material insert html string

Is there a way i can insert a whole html string from typescript for example: I need this as each time info is of a different HTML type const ELEMENT_DATA: PeriodicElement[] = [ { position: 1, info: '…
Anna
  • 101
  • 8
-1
votes
1 answer

Angular - mat-select inside mat-table - Show selected drop down value

Requirement: I want to get the selected value printed in browser console when I click on the Save icon on each row. Here is my example. https://stackblitz.com/edit/angular-isif36-uokotq?file=app/select-value-binding-example.html Problem 1: When I…
SK.
  • 1,390
  • 2
  • 28
  • 59
-1
votes
1 answer

How to access MatTableDataSource in custom Thingsboard widget?

I have developed a few custom Thingsboard widgets. It seems that I am able to access much of @angular/material from within my widget code. I am utilizing mat-table successfully, but in order to easily support pagination/filtering/sorting etc. I…
pooley1994
  • 723
  • 4
  • 16
-1
votes
1 answer

Why is ChangeDetection triggered on Mat-Table header hover (despite using OnPush)

I'm having performance problems with a mat-table triggering change detections despite using OnPush. Here is a working example : https://stackblitz.com/edit/angular-bjouzc?file=src%2Fapp%2Fapp.component.ts When hovering the header cells, you will see…
Matthieu Riegler
  • 31,918
  • 20
  • 95
  • 134
-1
votes
2 answers

Angular - Error when trying to overwrite sortingDataAccessor

I want to overwrite sortingDataAccessor to make sorting my table work with all of its columns. However, I keep running into error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type…
Chris
  • 1,417
  • 4
  • 21
  • 53
-1
votes
1 answer

How to style mat table on hover like figma design attached

I have a design for a mat-table. find the attached image. on hover, the row should look like the attached image figma design on hover stackblitz link
Akash AR
  • 39
  • 6
-1
votes
1 answer

How to add inner rows dynamically in angular material table

Given this code https://stackblitz.com/edit/angular-nested-mat-table-iwytas?file=app%2Ftable-expandable-rows-example.ts But the data for inner rows are loaded when the component is loaded. Is there any way to load inner rows on request, i.e. when…
Tuvia Khusid
  • 792
  • 5
  • 15
  • 31
-1
votes
1 answer

Group and count the nested json response - Angular

Im trying to bind value in Angular Material table, before that i need to process the GET response v trying to achieve like below(just for understanding) my faulty code let filterByLocation = data.reduce((r, { group: location.country, ...object })…
Mr. Learner
  • 978
  • 2
  • 18
  • 48
-1
votes
1 answer

Angular - How to get selected cell value from mat table

How to get the value from selected cell of a mat table. I attached a sample code in which, the row and index can be fetched. But i want the value from the selected cell. I attached a sample code at stackblitz and required format in…
Kenny JohnJoseph
  • 1
  • 6
-1
votes
2 answers

Angular material table - column width by string length

In my app I have a bunch of different material tables. I want to find some way to automatically set column width. I know, I can set this directly in CSS like this and I try this .mat-column-position { flex: 0 0 10%; } .mat-column-name { flex: 0…
Arter
  • 2,224
  • 3
  • 29
  • 66
-1
votes
1 answer

MatTable not working properly on Angular 10

Not sure if it's because I'm creating this project from zero using Angular Material 10 and I haven't worked with it yet and it works differently or if it's because I'm just doing something wrong, but the mat-table is literally not even showing on my…
luifon
  • 197
  • 2
  • 16
-1
votes
2 answers

How to present Object object in a table using Angular Material

I would like to present data - which is an Object in Angular Mat Table example below: { "first": 15.0, "second": [{"id":1,"data_1":"foo","dat_2":"bar"}], "third": "2018-09-15T05:30", "fourth": ["ONE", "TWO"], "fifth":…
Robert Głowacki
  • 292
  • 5
  • 22
1 2 3
…
35
36