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

Add nested rows in angular material table

I want to create something like this but I don't want it to be an expansion panel just because I want the nested rows to be added or removed dynamically based on Add and delete button. I have a material data table with multiple rows and want to add…
0
votes
1 answer

Error using mat-checkbox inside an editable material table

I've created an editable using Angular Material, when a row is in an editable state each cell will show an input field depending on what data type is being displayed, e.g. if the cell is a string it will have an input field of type…
SkinnyBetas
  • 461
  • 1
  • 5
  • 27
0
votes
1 answer

Angular Material Table - moving user to a specific page

On loading a table, I need to move the user to a specific page e.g. If a table has 10 pages I need to move the user to Page 8 instead of user having to click 8 times to get to page 8. I am using Angular Material Table and Paginator.
Rajan
  • 1
0
votes
2 answers

Angular: How to transform this code in a loop?

I'm learning Angular and its Angular Material UI Framework. After installing dependencies, I generated an Material Rank Table with this command: ng generate @angular/material:table rank-table --module=app I manually edited it to add a new column…
neves
  • 33,186
  • 27
  • 159
  • 192
0
votes
2 answers

Trying to use Angular Material table on object that contains another object

So basically I have an interface defined in Angular that looks something like this: export interface product { brand: String, type: String, value: number, fields: Rating[] } the fields property is an array of Rating objects, the point…
SkinnyBetas
  • 461
  • 1
  • 5
  • 27
0
votes
2 answers

Dynamic rows on material table

I'm implementing a material table in Angular and I'm struggling to make it dynamic. So far I'm able to add columns dynamically, but trying to do the same with rows just doesn't work. the addColumn() function adds a column dynamically without having…
SkinnyBetas
  • 461
  • 1
  • 5
  • 27
0
votes
1 answer

Material table doesn't update with new values of @Input

I have an Angular Component that is taking an @Input (result of a search) which I want to use as the datasource of a Angular Material table. Unfortunately, the table doesn't seem to recognize when the variable in @Input changes and always stays…
xeraphim
  • 4,375
  • 9
  • 54
  • 102
0
votes
1 answer

Angular: hovering on menu triggers change in table

See this: https://stackblitz.com/edit/angular-ivy-ytwi1v Here, once we open menu and hover on the menu options, the function call used by table cells is being triggered. Console logs on hovering few times So, my question is: Why does this…
Surya
  • 48
  • 7
0
votes
1 answer

Multiple mat table in single component loading slow

I have 3 mat table in single component and i am loading its data on page load. Issue is with less that 500(for all 3 tables) records also it is taking 8-10 seconds of time to load data
0
votes
0 answers

Create grouped column mat-table

I am using mat-table for showing data in table format. I wanted to display the data in grouped column format as displayed in the following image. I've same columns in the first group & second group as well. I tried but not able to achieve the same.…
0
votes
2 answers

mat table paginator and sorting issue for dynamic data

I am trying to implement mat table , problem is its sorting and paginator is not working , i have gone through all questions related same but unable to fix it . If I am getting 10 records it shows only first five and if i change some code and try…
0
votes
2 answers

Setting Angular Material mat-table column width in column configuration

I have the following column configuration for my Angular Material mat-table columns: export interface TableColumn { name: string; dataKey: string; isSortable?: boolean; width?: string; // column width } //... this.tableColumns = [ { …
Jack
  • 1
  • 21
  • 118
  • 236
0
votes
2 answers

Why angular table didn't sort?

here is the table.component.ts file. I want to sort the table like in this example of angular: https://material.angular.io/components/sort/overview but in this case, it didn't sort anything. I don't know what the problem is. First I imported in the…
0
votes
2 answers