merge cells for some records in Angular table - html

I am new to angular the following is the scenario:
I have a table with 10 columns.
Suppose I have different status like children,teen,young,adult,senior in column 4.
While displaying all records in Angular table, the records with senior status I need to display only 1,2,3& 4 columns with data and from 5-10 columns would be blank(actually there is data for these columns that is getting populated form data source but I need to show that as blank) and merged.
<mat-table #table [dataSource]="ds" matSort matSortDisableClear>
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition. -->
<!-- Request ID Column -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">
Req Id
</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="firstName">
<mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">
Name
</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.firstName}}<br />{{row.lastName}} </mat-cell>
</ng-container>
<!-- address Column -->
<ng-container matColumnDef="address">
<mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">
address
</mat-header-cell>
<mat-cell *matCellDef="let row">
{{row.address}}
</mat-cell>
</ng-container>
<!-- Status Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">
Status
<mat-cell *matCellDef="let row">
{{row.status}} </mat-cell>
</ng-container>
....
<!-- Other 6 columns that needs to be merged similar to Id name and address -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
Thanks in advance

By using a ng-container like this for each column where we need to verify Removed status and display data based on that

Related

Sorting Object's Attribute Angular Material

I am trying to sort a mat-table using the mat-sort-header. I am able to do it with common attributes like string or number.
<table #tablaClientes mat-table [dataSource]="dataSource" matSort multiTemplateDataRows>
<!-- Id Column -->
<ng-container matColumnDef="idIngreso">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id Comprobante</th>
<td mat-cell *matCellDef="let row">{{row.idIngreso}}</td>
</ng-container>
<!-- Proveedor Column -->
<ng-container matColumnDef="idProveedor">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre Proveedor</th>
<td mat-cell *matCellDef="let row">{{row.idProveedor.nombre}}</td>
</ng-container>
<!-- Fecha Compra Column -->
<ng-container matColumnDef="fechaCompra">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de Compra</th>
<td mat-cell *matCellDef="let row">{{row.fechaCompra}}</td>
</ng-container>
<!-- Fecha Recepcion Column -->
<ng-container matColumnDef="fechaRecepcion">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de Recepcion</th>
<td mat-cell *matCellDef="let row">{{row.fechaRecepcion}}</td>
</ng-container>
<!-- Monto Total Column -->
<ng-container matColumnDef="totalIngreso">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Monto Total</th>
<td mat-cell *matCellDef="let row">{{row.totalIngreso |currency}}</td>
</ng-container>
However I can't sort by idProveedor since it's an object.
Thank you very much!
The easer way is add to your dataSource a new property and sort by this new property like this SO (really if you don't need the "idProveedor" object, your dataSource can be transform to some like
this.data.forEach(x=>{
x.proveedorNombre=x.idProveedor.nombre
delete x.idProveedor
}
Another solution is create a sortingDataAccesor
this.dataSource.sortingDataAccessor = (item, property) => {
if (property=="idProveedor")
return item.nombre;
if (property=="idIngreso")
return item.idIngreso
if (property=="fechaCompra")
return item.fechaCompra
...
}
An example simple in this stackblitz

Setting Angular Material mat-table column width in column configuration

I have the following column configuration for my Angular Material mat-table columns:
export interface TableColumn {
name: string;
dataKey: string;
isSortable?: boolean;
width?: string; // column width
}
//...
this.tableColumns = [
{
name: 'Id',
dataKey: 'id',
position: 'left',
width: '50px'
},
{
name: 'Name',
dataKey: 'name',
position: 'left',
width: '100%'
}
];
As far as I see, many people use css in order to set column width as on this page, etc. However, would not it be nice if we set the column widths for each column by pixel and percentage in the this.tableColumns array as the other properties when defining columns? I think I just need a configuration of mat-table, but I am not sure if there is such a config for mat-table. If not, I think I can use [style.width] and set each column by column config value. Any suggestion for that?
In general, you defined the columns based in your array like:
<ng-container *ngFor="let column of tableColumns;let first=first">
<ng-container [matColumnDef]="column.dataKey">
<th [style.width]="column.width" mat-header-cell *matHeaderCellDef>
{{column.name}}
</th>
<td [style.width]="column.width" mat-cell
*matCellDef="let element"> {{element[column.dataKey]}}
</td>
</ng-container>
</ng-container>
And your displayedColumns as
this.displayedColumns=this.tableColumns.map(x=>x.dataKey)
NOTE: I supose you defined the width as '50%' or '30px' if only use a number you can use, e.g.
[style.width]="column.width+'px'"
Update imagine you want to create a column with actions buttons, but this buttons can be one, two or three. We can asign to this last colum a width of "1%" and 'white-space: nowrap'
//we has two variables
btDelete:boolean=true;
btEdit:boolean:true;
<ng-container matColumnDef="action">
<th style="width:1%" mat-header-cell *matHeaderCellDef>
</th>
<td style="width:1%;white-space: nowrap;" mat-cell
*matCellDef="let element">
<button *ngIf="btEdit" mat-button (click)="edit(element)">Edit</button>
<button *ngIf="btDelete" mat-button (click)="delete(element)">Delete</button>
</td>
</ng-container>
NOTE: I'm not prety sure what happens with the width of columns because the % total is bigger that 100%
We can try using the mat-table in flex-mode
<ng-container *ngFor="let column of columns">
<ng-container [matColumnDef]="column.name">
<mat-header-cell [style.flex]="column.width" *matHeaderCellDef> {{column.width}}</mat-header-cell>
<mat-cell [style.flex]="column.width" *matCellDef="let element"> {{element[column.name]}} </mat-cell>
</ng-container>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell style="flex:0 1 auto;visibility:hidden" *matHeaderCellDef>
<button *ngIf="btEdit" mat-button>Delete</button>
<button *ngIf="btDelete" mat-button>Delete</button>
</mat-header-cell>
<mat-cell style="flex:0 1 auto" *matCellDef="let element"> <button *ngIf="btEdit" mat-button>Edit</button>
<button *ngIf="btDelete" mat-button>Delete</button></mat-cell>
</ng-container>
See that the column "action" the "head" repeat the buttons -with visibility:hidden-
NOTE: In this case, the "with" -really the flex- is a number, not a %,
While there isn't a way to define column width in the array, you should be able to define it using ng-style. It is possible to provide column specific properties in the html template, therefore this too should work. An example would be
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<mat-text-column name="position" [headerText]="headerText" [ngStyle]="{'width':'20%'}"></mat-text-column>
<!-- Change the header text. -->
<mat-text-column name="name" headerText="Element" [ngStyle]="{'width':'40%'}"></mat-text-column>
<!-- Provide a data accessor for getting the cell text values. -->
<mat-text-column name="weight" [dataAccessor]="getWeight" [ngStyle]="{'width':'40%'}"></mat-text-column>
</table>
The result of style.width can also be accomplished by ngStyle, so that too should work in the same way.

Add new line in column name of dynamic material table in Angular

I have a material table with dynamic columns which currently look like -
But my expected output is like this -
What can i do to add new lines after PIN GROUNDED = 1 ? I tried adding BR but that didn't work .
My code for generating dynamic columns is -
<mat-table matSort [dataSource]="gridDataSource">
<ng-container [matColumnDef]="col" *ngFor="let col of columnsToDisplay">
<mat-header-cell mat-sort-header *matHeaderCellDef>
{{col | uppercase}}
</mat-header-cell>
<mat-cell *matCellDef="let element">
{{element[col]}}
</mat-cell>
</ng-container>
<mat-header-row class="headerHeight" *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row *matRowDef="let row; columns: columnsToDisplay;"
[ngClass]="row.SEQ % 4 == 0 ? 'rows' : 'row'"></mat-row>
</mat-table>
With some research i got the solution .
We can use [innerHtml] property instead of {{colName}} . This makes the tag in the string reflect as a horizontal break line .
<span [innerHTML]= "col | uppercase"></span>

Filling an angular table with data from http request

I am creating a table in angular and wish to fill it with data coming from an url . I have created a table following a tutorial. Code
dataSource : Parameters[]
getData(floor) {
console.log('Making a request')
this.vavService.getVavData(floor)
.subscribe(
(data11: any) => {
console.log(data11);
this.dataSource = data11;
console.log(this.dataSource)
}
)
}
parameters class
export class Parameters {
'date' : string;
'deviceID' : string;
'nvo_air_damper_position' : string;
'nvo_airflow' : string;
'nvo_temperature_sensor_pps' : string;
'timestamp' : string;
'vavID' : number;
'miloID' : string;
'miloTemperature' : number;
}
html code
<div>
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="deviceID">
<mat-header-cell *matHeaderCellDef>DeviceID</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="damper">
<mat-header-cell *matHeaderCellDef>Damper Position</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="airflow">
<mat-header-cell *matHeaderCellDef>Air Flow</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="temperature">
<mat-header-cell *matHeaderCellDef>Temperature</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="time">
<mat-header-cell *matHeaderCellDef>TimeStamp</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="vavID">
<mat-header-cell *matHeaderCellDef>VAV ID</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<!-- <ng-container matColumnDef="miloID">
<mat-header-cell *matHeaderCellDef>Milo ID</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="miloTemperature">
<mat-header-cell *matHeaderCellDef>Milo Temperature</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container> -->
<mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: tableColumns"></mat-row>
</mat-table>
</div>
when i load the component, api call is successful and i can see the data in the console. Also I see the table headers in the browser
0: {date: "2019-12-03", deviceId: "fd00::212:4b00:1957:d616", nvo_air_damper_position: "100.0", nvo_airflow: "0.0", nvo_temperature_sensor_pps: "327.6700134277344", …}
1: {date: "2019-12-03", deviceId: "fd00::212:4b00:1957:d616", nvo_air_damper_position: "100.0", nvo_airflow: "0.0", nvo_temperature_sensor_pps: "327.6700134277344", …}
But the data binding is not happening. Can someone help me with binding the data. Thanks
Try this, hope it helps:
Set the correct dataSource type:
dataSource: MatTableDatsSource<Parameters> = new MatTableDataSource<Parameters>([]);
and set the data like:
this.dataSource.data = data11;
I think you have to reference your table and call the renderRows() function when you use the data that way instead of using MatTableDataSource because initialy your value is empty and filled when your observable emit a value.
If a data array is provided, the table must be notified when the array's objects are added, removed, or moved. This can be done by calling the renderRows() function which will render the diff since the last table render. If the data array reference is changed, the table will automatically trigger an update to the rows.
At mat-table tag, add #table1 <mat-table #table1>
In your component
Add #ViewChild('table1', {static: false}) table: MatTable<any>;
Then after your set the data, call this.table.renderRows();

Align the Columns of the Data-Table

I have an angular-material Data Table and I want it to align to a certain column left/right.
<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="col0">
<mat-header-cell *matHeaderCellDef mat-sort-header> Col0</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.col0}} </mat-cell>
</ng-container>
<ng-container matColumnDef="col1">
<mat-header-cell *matHeaderCellDef mat-sort-header> Col1 </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.col1}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
What CSS do I need to do this?
After a few googling action I've found the solution in form of a github change request:
See here
The short form is like this:
.mat-column-col1 {
display: flex;
justify-content: flex-end;
}
Just replace the col1 to the column you're gonna need!