mat-table

MatTable Row Span Drag & Drop Issue

由 无人久伴 提交于 2019-12-24 18:38:50
问题 I am trying to achieve drag and drop functionality in angular table row but the issue is the table I have has spanned row.When I try to drag and drop the spanned row it just pick up a single row instead of whole spanned row. I am using https://stackblitz.com/edit/angular-wudscb-kpjdfv to achieve row span in angular table. app.component.html <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows cdkDropList [cdkDropListData]="dataSource" (cdkDropListDropped)=

CDK Angular Table with dynamic checkboxes not finding correct column names

由 南楼画角 提交于 2019-12-24 06:14:24
问题 I have a dynamic CDK Angular Material mat-table that I have fixed a mat-checkbox to. It is populating data, but it is not allowing me to set the correct column headers. Everything that gets displayed is from the key:value pairs from the UserInformation array. However, I need to set a second array to display the correct header names as I will not have control of the key names coming from the API and will need to set them in the TypeScript. Not all information coming from the API will be

Should I use “<table mat table … ” or “<mat-table …”

由 半世苍凉 提交于 2019-12-23 09:55:25
问题 The title already says it, which one should I use and is there / what is the difference between having <table mat table [dataSource]="items" ... or <mat table [dataSource]="items" ... in my HTML markup? On a cursory glance they both work fine, but I assume there must be a difference... EDIT: I'm specifically talking about resizeable columns, like in this example: https://stackblitz.com/edit/angular-rtfc5v?file=src%2Fapp%2Fapp.component.html If you switch the 来源： https://stackoverflow.com

Angular 7 Mapping object with array of object to mat table

由 百般思念 提交于 2019-12-12 18:28:00
问题 I am trying to map one of my object to mat-table . Input object from Web API is as follows : [ { "inventoryId": 1004, "inventoryName": "Red Shirt Material", "dateReport": [ { "date": "2019-03-04T19:15:16.828", "quantity": 109.9 }, { "date": "2019-03-09T10:36:12.198", "quantity": 26.6 } ] }, { "inventoryId": 1003, "inventoryName": "Blue Pant Material", "dateReport": [ { "date": "2019-03-04T19:15:16.828", "quantity": 64.4 }, { "date": "2019-03-09T10:36:12.198", "quantity": 8 } ] } ] HTML code

Angular mat-table custom data source undefined MatSort

由 十年热恋 提交于 2019-12-11 14:31:47
问题 I have a mat-table with a custom data source (that implements DataSource and returns an observable on connect ), similar to this. I enabled the search, but my @ViewChild(MatSort, {static: true}) sort: MatSort; is still undefined. I do not have any *ngIf and I also gave some initial data to my custom dataSource just to test some of the answers from here, but it still does not work: export class ItemsDataSource implements DataSource<Item>{ private dummyItem: Item = {}; private items: Item[] =

How colSpan and row Span added to material table Header Angular 7?

由 笑着哭i 提交于 2019-12-11 00:15:24
问题 I'm trying to add rowSpan and colSpan in Angular material Table header . Can anyone help me to achieve it. Below is the Attached Header I want to get using material table 回答1: I have the sample task like you. I just easy to display none with second header. <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef [ngStyle]="{'display': 'none'}"> No. </th> <td mat-cell *matCellDef="let element"> {{element.position}} </td> </ng-container> <!-- first stage header --> <ng

Reorder mat-table rows with angular material's drag-and-drop

由 谁都会走 提交于 2019-12-10 03:44:06
问题 Angular 7 brought the powerful DragDropModule with it: https://material.angular.io/cdk/drag-drop/examples The documentation deals with rearranging items within lists or transferring items between several lists. However, it doesn't talk about tables. I was wondering whether there is a comfortable way of using angular material's drag-and-drop system for reordering rows in mat-table or cdk-table. (You can add cdkDropList to mat-table which makes the mechanism work but without all the fancy

Column oriented mat-table

由 人盡茶涼 提交于 2019-12-07 23:57:50
问题 I have a situation where the data I receive from my backend is column-oriented. An example of how this data looks like is this: [ { columnName: "ID", cells: [1, 2, 3, 4, 5] }, { columnName: "Name", cells: ["a", "b", "c", "d", "e"] } ] So far I have managed to configure my mat-table like this: <table mat-table [dataSource]="data" class="mat-elevation-z8"> <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns"> <th mat-header-cell *matHeaderCellDef> {{column}} </th> <td

Reorder mat-table rows with angular material's drag-and-drop

由 北战南征 提交于 2019-12-05 04:50:30
Angular 7 brought the powerful DragDropModule with it: https://material.angular.io/cdk/drag-drop/examples The documentation deals with rearranging items within lists or transferring items between several lists. However, it doesn't talk about tables. I was wondering whether there is a comfortable way of using angular material's drag-and-drop system for reordering rows in mat-table or cdk-table. (You can add cdkDropList to mat-table which makes the mechanism work but without all the fancy animations and default drag placeholders.) Does something like an easy-to-implement default for sorting

Array of formGroup within mat-table for each row

由 倖福魔咒の 提交于 2019-11-28 14:49:30
I have an array of formGroup, where each element represents a form. Next I have a mat table, where what I want to do is to generate each tr (so each row) as a distinct form, so that the i-th row of the table is linked to the i-th formGroup. So inside the i-th row, each td element contains an input, and this input should be linked to a formControl which is inside the i-th formGroup. So basically each row is a form, which can be submitted individually (each row also has a "Submit" button). How can I accomplish this? Can you provide me a boiler plate I can work on? Edit: here's what I tried so
订阅 mat-table