Questions tagged [angular-material-table]
Introducing a cutting-edge Angular component featuring Material Design aesthetic for presenting tabulated data. Be sure to add [angular] and [angular-material] tags when sharing your query.
Looking to create a flexible material table with the ability to utilize TemplateRef along with ngTemplateOutlet for generating columns. Check out this demo where I have employed the cards component within my custom material-table component. Inside the card ...
I am currently working on implementing inline editing for a mat table. I found a helpful guide at this link. When I try to edit the second row on page 1 (the edit symbol icon changes), and then move to the next page without saving the changes, the second r ...
In my application, I am working with a MatTable that has a datasource consisting of AbstractControls (FormGroups) to create an editable table. At the end of each row, there are action buttons for saving or deleting the elements. My goal is to implement tr ...
Currently, I have implemented an angular material table with the following configuration: <table mat-table [ngStyle]="{'height': '600px'}" [dataSource]="items" multiTemplateDataRows matSort ...
In one of the tables I'm working with, there is a column called uploadedOn. You can see it in action here: https://stackblitz.com/edit/angular-ivy-tntvst?devToolsHeight=33&file=src/app/app.component.ts 1: https://i.stack.imgur.com/aQ6wh.png. My g ...
There seems to be an issue with my code. When I press the down arrow key for the first time, it goes to the next row as expected. However, when I press the down arrow key again, it does not function properly. (https://i.stack.imgur.com/4qznx.jpg) **HTML* ...
Currently, I am in the process of learning Angular along with its Angular Material UI Framework. Following the installation of dependencies, I created a Material Rank Table using the command below: ng generate @angular/material:table rank-table --module=ap ...
I'm currently trying to build a mat table based on an online tutorial, but I'm facing a problem where the table appears empty even though I have hard coded data. As someone new to Angular and HTML/CSS, I'm struggling to understand why the ma ...
I am working with an Angular Material Data Table that has four columns. In every row, the last cell contains a button with an on-click function attached to it. I need to pass the value from the first cell ("Name") as a parameter in the corresponding button ...
I am facing a new challenge and feeling unsure about how to approach it. The issue at hand is filtering a table based on the date range obtained through the ngx-daterangepicker-material library. This library triggers events that provide a start date and a ...
Could it be that I’m starting this project from scratch using Angular Material 10, a framework I’m not familiar with yet, or am I simply missing something? My mat-table isn’t showing up on the page at all, which is completely new to me. Here’s the ...
Here we have a screenshot of HTML source code showing a button that is wider than the content it contains. The highlighted area in yellow indicates there is extra space at the right side of the button due to it being displayed on multiple lines. Is this be ...