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

Angular Material Table horizontal overflow moves columns off-screen?

I've been trying to make my tables more mobile/tablet friendly and I used Angular Material's table example in the documentation with the sticky column. The problem is when I scroll horizontally, the table goes off the screen, beyond the sticky…
SebastianG
  • 8,563
  • 8
  • 47
  • 111
3
votes
1 answer

Mat-table with row that has varying # of sub-rows

Trying to use the mat-table directives, such as *matRowDef and multiTemplateDataRows to build a table where each row can have a varying number of sub-rows. An example interface would look like this: interface ReportCard { student: string; …
ahong
  • 1,041
  • 2
  • 10
  • 22
3
votes
0 answers

Getting error: Can't bind to 'dataSource' since it isn't a known property of 'table'

I am trying to create a dialog box with a table inside of it. I already created it but then I was told to use mat-table instead of creating a table from scratch and ever since that, I have been stuck with this particular error. I'll share my code to…
GeekAndNerd223
  • 121
  • 7
3
votes
2 answers

Vertical Headings table Angular material

in this example, ( https://stackblitz.com/edit/angular-ivy-xtyoyq?file=src/app/app.component.ts ), we have basic table, but in my case I want to make this table like this : table, th, td { border: 1px solid black; border-collapse:…
Aziz bouchtaoui
  • 80
  • 7
3
votes
0 answers

Angular mat-table displaying repeat rows

I am trying to create a relatively simple mat-table that displays elements from a "dataSource". My problem is that when I run my code it gives me the error: There can only be one default row without a when predicate function. Adding…
Timothy Cottrell
  • 33
  • 4
3
votes
2 answers

Angular Material Table with expandable rows - Arrange colums of sub-table under each other

I created an Angular Material table with expandable rows. Instead of a single cell like in the example from the Angular Material docs I want to display a sub-table. Does anyone know how to arrange cells of the same columns below each other? For…
Tom
  • 1,358
  • 2
  • 14
  • 36
3
votes
2 answers

Reset this.dataSource.filterPredicate in Angular

I am using a filter and a select on my mat-table, In order to filter using the select I am using filtered predicate on the concerned field. public applyFilter(filterValue: string) { this.dataSource.filterPredicate = (data: SP, filter: string) =>…
Sahil
  • 25
  • 7
3
votes
1 answer

how to add multiple filter values to angular material table?

I am working on angular material table which should be filtered based on selected items from mat-select box. It works fine when I have normal select box where user can select only one item. But the issue is I have it as multi-select box where user…
IamGrooot
  • 940
  • 1
  • 17
  • 44
3
votes
0 answers

mat table custom pagination

Im using mat-table from angular material with collapsible rows. Each row of the parent table is meant as a heading and is expandable to show a nested table inside this parent table as the content of the expanded row. I want to use pagination with…
Mohit Harshan
  • 1,916
  • 1
  • 18
  • 41
3
votes
0 answers

Angular 8 Material Table Pagination and sorting with custom component and dynamic data from API Error - Problem

_ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/…
Dimi Kak
  • 31
  • 1
  • 5
3
votes
1 answer

Reset Angular's Mat Data Table search filter

My web app uses a Material Data Tale (https://code-maze.com/angular-material-table/) to display some existing data. It also has various filters including the Mat Data Table's built in search filter. My problem is I can reset all of my other…
JamieT
  • 1,177
  • 1
  • 9
  • 19
3
votes
1 answer

How to set correct serial numbers in angular 7 Mat-table with Pagination

I have used a mat-table in my Angular7 app with firebase and have populated it successfully. I want to add an auto incrementing serial no. My Html for the code:
Supritha
  • 79
  • 2
  • 12
3
votes
1 answer

mat-table columns width not changing when they contain an Input

I'm trying to make an Angular component to both display data and receive data. I made a mat-table with input type form fields and the regular data display with {{element.value}}. And I set up the width of each column diffrently like this…
AnotherBrick
  • 153
  • 3
  • 6
  • 14
3
votes
2 answers

Angular Material Input Floating Label Default Color Change

Can i change the floating default purple color of the lable?
Geeth
  • 31
  • 1
  • 3
3
votes
2 answers

How to add sub columns in Mat table column of angular Material table

I am trying to create a mat table with sub columns using Angular Material Table like the link. Is there a way to do this with angular material table? Can I create sub columns from one the columns? Please check the table from the below…
user3154990
  • 555
  • 4
  • 13
  • 27
1 2
3
…
35 36