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

Own table component is not handling service calls right

Currently I am working on a project where I need a table component which can be implemented as ChildComponent in multiple ParentComponents. The ParentComponents can provide data with different services. Example given: For ComponentA the table shows…
Celebrombore
  • 170
  • 11
0
votes
1 answer

Material Angular Table row cell render(calculate) conditonally when checkbox is checked in Angular 13

How can I achieve that the result calculated(not rendered) only when the checkbox in the row checked in angular-material-table.(See on pic)Otherwise it has to be blank. Its just a simple multiplier operation. I have no idea how can I get a…
0
votes
1 answer

Couldn't sort and filter data using angular material

I am currently using firebase as my back end for retrieving data.. and all works fine including pagination except for sorting and filtering data.. as it is getting implemented on the basis of key and not the value, and i am not sure how to fix it.…
0
votes
0 answers

Angular Material Table and Paginator TypeError: Cannot read properties of undefined (reading 'length')

I am making a simple CRUD app for practicing and have an issue. Hope can get some help. I am using angular material dialog component for editing member's detail. my problem is once I close the dialog. I have 2 errors- 1. "TypeError: data.slice is…
0
votes
0 answers

Can the Material Table (Mat Table) in Angular Material have more than one datasource?

This is just a general question, but the material table provided from Angular Materials seems to only allow for one dataSource. Would it be possible to have a second dataSource used in the table? The below example code from the angular material…
0
votes
1 answer

Angular Mat-table DataSource value changed while updating the status

table -> Action -> InActive When we have changed the row status value, the mat-table data source value is also updated. Our requirement is to change the status value after being updated to the database but now the mat-table immediately changes the…
0
votes
0 answers

Navigating the mat table elements with the up and down button angular

enter image description here I want to be able to navigate with the up and down buttons on the data I pulled from IOrder[] but my code scrolls with keyboard keys. I would be very grateful if you could help, thanks in advance. html code
0
votes
2 answers

How to Generate and display nested angular material table dynamically

I have came across a situation where I need to implement logic for displaying nested angular mat table. I already have implemented logic for displaying nested (inner) table with data source of child element, But situation is tricky when there is…
0
votes
1 answer

Angular - FormArray with Material Table and data row was incorrect

I'm trying to create the dynamic form using FormArray and Angular Material table. Template:
0
votes
1 answer

Angular Material table pagination with GraphQL backend

I need to add pagination to Angular Material table. My data response is from GraphQL back-end is like this: import { Component, OnInit, ViewChild } from '@angular/core'; import { MatPaginator } from '@angular/material/paginator'; import {…
0
votes
1 answer

Click on angular material table doesn't work well because of frequently data change

I'm using angular-material table in angular and I wrote a function that is triggered by clicking on a row in my angular-material table. The function highlights the row that was clicked, but because I'm getting a lot of changes in the rows the click…
0
votes
1 answer

Angular Material - Sort the data for mat-table

I am using Angular Material. How can I sort the data? HTML file No.…
0
votes
0 answers

Angular - Table with expandable row (hierarchy structure)

I have hierarchy structure data which I'm trying to show in the table. I'm using material-table expandable which works fine when I show only one level of data. I created a table that shows the main data and when I click on detail it showing another…
0
votes
1 answer

Angular 12 table header sort is undefined

I'm working on an upgrade from Angular 8 to 12 and got some errors. Most of them are fixed. The only one left is this one The error This error means that the sortChange is undefined. The data is displayed in the table. I use this code for the sort…
ido435
  • 27
  • 2
  • 5
0
votes
1 answer

Is there a way to overwrite spacing for expandable rows in Angular Material tables?

I want to use Angular material table in my app and apply custom styling. The Rows should be separated by 8px while also supporting expandable rows. My desired styling for expanded rows looks something like this: I have forked the Angular material…