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

How to get data from 2 api and view data in angular material table?

Ihave 2 api ( users and category ), and I have relationship between this api in category id, how can I make join this api like inner join in sql. My Code : frist API ( name in posts ): { "list": [ { "id": 1, "title": "samsung", …
Kareem
  • 47
  • 8
1
vote
1 answer

Add Input to mat-table datasource object

I have a problem. I'm trying to add input fields to mat-table but I'm having trouble. Attached is a Stackblitz link where I tried to recreate it. Unfortunately, I can't get along with the similar questions here in…
Svensen
  • 67
  • 1
  • 1
  • 7
1
vote
1 answer

Angular 15 Material Design table styling not working anymore

I want to style the table rows and cells in an Angular Material Table in Angular. But the "old" examples with simple css styles don't work anymore in Angular 15: table { width: 100%; border-spacing: 0 8px !important; } td.mat-cell { padding:…
Konrad
  • 4,329
  • 10
  • 54
  • 88
1
vote
1 answer

Trying to get column index on Angular Material matTable

So it is clear how to get an index value for the rows when rendering a table according to the guide for Angular Material .. you can do this But what…
LukePerrin
  • 235
  • 5
  • 17
1
vote
1 answer

Using an Angular Material Menu as a context menu

I have an Angular Material table. I want a right click on table rows to open a context menu, and I can't really seem to get this to work. I'm using Angular 14. I started by creating a menu: …
zmbq
  • 38,013
  • 14
  • 101
  • 171
1
vote
0 answers

Render row based on the row instance in mat-table in Angular

So, if the row.id has value(say: id_1313) I want to add a click event to mat-row else I need to simply display the mat-row. I'll provide a sample code of what I actually did app.component.html
Tamilvanan
  • 23
  • 2
  • 7
1
vote
1 answer

Display name instead of the id in angular material table

I used a material table as a reusable component. I call it in other component as followed. class UserTable { name: string; vehicleId: number; garageId: number; } tableColumns: Array = [ { columnDef: 'name', header:…
Thush Dananjan
  • 25
  • 5
1
vote
1 answer

How to Dynamically create a column in Angular Material Table based on the Json data

I am having a problem by adding columns in table dynamically with Angular Material tables. As the table depends on an model, I have a two fixed columns (start Date , End Date) . What I want is to have a dynamic table depending on response from the…
learntech
  • 13
  • 2
1
vote
0 answers

Mat-menu shows in wrong the place in angular material data table from mobile view

I have an angular (15) material data table in which each row has a vertical menu icon in the first column opening a small context menu (mat-menu). The problem is that on mobile view after a certain row it starts to show up somewhere else (see gif).…
Mitulát báti
  • 2,086
  • 5
  • 23
  • 37
1
vote
1 answer

placing several common columns for angular table in an ng-template

I'm using angular 15.1 with angular material, I use angular material Table component to show tables. my project have like 20 different tables that share 90% percent of the columns definitions so i would to place the shared columns in a ng-template…
ufk
  • 30,912
  • 70
  • 235
  • 386
1
vote
1 answer

How to create a mat-table with a checkbox and a label in the same column?

I'm using Angular Material and I would like my first column to have a checkbox as well as the value of my name-property. I dont need this column to be sticky. I appreciate any ideas for this. Under the following link you can find my stackblitz…
rugma ramachandran
  • 17
  • 5
1
vote
1 answer

Angular Material Set Multiple Columns in One Row

I want this type of column header design with two separate part using Angular Material Mat-Table. In below image mentation column like Amount, Debit, Credit, Balance. is it possible to do this things ? Yes than How!
ErDeep
  • 140
  • 8
1
vote
2 answers

How to do pagination with angular material?

I was following a tutorial by Muhi Masri Load, Add, Update and Delete Table Rows using API Services (Totally recommended tutorial by the way) to make an Editable Dynamic Table. Use a dataSource that I render every time I filter a date. But I wanted…
Izlia
  • 235
  • 1
  • 2
  • 18
1
vote
2 answers

How to get the edited cell position in Angular material table

I get this table in angular material
{{this.columnsToDisplay[3]}}
kintela
  • 1,283
  • 1
  • 14
  • 32
1
vote
0 answers

How to set default select values from drop down for multiple fields using mat-select-autocomplete

I'm using a custom plugin to display the custom form, which will show several dynamic multiple drop-down fields. However, I'm having trouble with the default value not being selected from the drop-down menu.
Pon Ilavarasan
  • 11
  • 2
1 2 3
…
35 36