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
vote
0 answers

Angular Material table sorting not working from 2nd page

I am using angular material table, and I am grabbing data individually for each page, so 50 rows for page 1 for example. The sorting works in the first page with no issues, however, from 2nd page onwards, if I click sort in any column, all the rows…
1
vote
0 answers

import {MatTableModule} from '@angular/material/table'; causing weird errors

I'm trying to implement a score board for my small project. And when I try to use mat table, it causes me "Can't bind to 'dataSource' since it isn't a known property of 'table'." error. My code : score-screen.components.ts import { Component, OnInit…
David Yoo
  • 11
  • 3
1
vote
1 answer

my filter does not work on the mat-table data table Angular Typescript

I try in vain to filter my table but it does not react correctly, I don't see where my mistake is. html part : Rechercher search
1
vote
1 answer

Angular MatTableDataSource filterPredicate : Filter sub-layers

I am using Angular's MatTableDataSource filterPredicate function applyFilter(event: Event) { const filterValue = (event.target as HTMLInputElement).value; this.dataSource.filter = filterValue.trim().toLowerCase(); } or for custom filter…
1
vote
1 answer

how do multiple timer countonw in mat table angular

I'm trying to make a table in which there will be some kind of time counter for each row. i used "mat-progress-bar" with dynamic value, but i cant customise each timer for is correspondant row. what i want is when i add a row the timer must start…
1
vote
1 answer

Pasted text doesn't work with mat-table filter in Angular

Got one question, when I use the pasted text inside the search cell, the filter doesn't work. But if you type the text, it will work. And also, if you use pasted text after typing or deleting anything, it will start to work. (for example: copy john…
sparky
  • 13
  • 3
1
vote
1 answer

Having a header row for each row in Angular Material Table

As the title (may) suggest. I am trying to make an Angular Material table which has a header for every other row. See a basic sketch down below. The only way I would have been able to this the best way is using seperate tables, this would not be…
1
vote
2 answers

Angular Template - Dynamically generated HTML is output as a string and not HTML

I am modifying an Angular template that is currently using innerHTML to dynamically build HTML fragments into the DOM. In this case, I am creating a mat-table and dynamically building the header. Here is the existing template code before my changes.…
Scott B
  • 38,833
  • 65
  • 160
  • 266
1
vote
2 answers

Add border to table row when field value changes to separate different datasets

I'm trying to write either HTML or CSS so that when a value changes it adds a bolded border to the bottom/top of the box as a separator Here is my html