I have a angular material table:
<ng-container matColumnDef="index">
<th mat-header-cell *matHeaderCellDef>Index</th>
<td mat-cell *matCellDef="let element"> {{element.index}} </td>
</ng-container>
<ng-container matColumnDef="time">
<th mat-header-cell *matHeaderCellDef>Time</th>
<td mat-cell *matCellDef="let element"> {{element.Time}} </td>
</ng-container>
<ng-container *ngFor="let quantity of quantities" >
<ng-container [matColumnDef]="quantity.name">
<th mat-header-cell *matHeaderCellDef>{{quantity.name}}</th>
<td mat-cell *matCellDef="let element"> {{element[quantity.name]}} </td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columns; sticky:true"></tr>
<tr mat-row *matRowDef="let row; columns: columns;"></tr>
</table>
and I want to highlight specific line when I click a button in my screen.
I tried to find a solution on the web and I didn't find any way to do that.
If that possible?
Thank you very much for your help and have a nice day,
Amit.
Do something like this:
<tr mat-row *matRowDef="let row; columns: columns;" [class.highlight]="row.field===specificLine"></tr>
And in the component's style flie:
tr.highlight { background-color: red; }
Related
I am trying to use this angular material table, like this:
<div class="flex flex-col pb-4 bg-card rounded-2xl shadow overflow-hidden">
<table mat-table class="" [dataSource]="$candidates">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name</th>
<td mat-cell *matCellDef="let candidate"> {{candidate.name}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> Email</th>
<td mat-cell *matCellDef="let candidate"> {{candidate.email}} </td>
</ng-container>
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>Position</th>
<td mat-cell *matCellDef="let candidate"> {{candidate.position_id.name}} </td>
</ng-container>
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row *matRowDef="let row; columns: columnsToDisplay"></mat-row>
</table>
</div>
Which should display something like this:
https://material.angular.io/components/table/overview#table-basic
But instead I get this:
Update mat-header-row and mat-row in the template to:
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>
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 ideal because the starting points of the cells would be in different places resulting in a messy looking table.
EDIT (code sample from proof of concept):
.component.html
<table mat-table [dataSource]="consolidation" class="container">
<ng-container matColumnDef="parameter">
<th mat-header-cell *matHeaderCellDef>Consolidation Parameter</th>
<td mat-cell *matCellDef="let element" [attr.rowspawn]="2"> {{element.parameter}} </td>
</ng-container>
<ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element"> {{element.unit}} <br> {{element.value}} </td>
</ng-container>
<ng-container matColumnDef="value2">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element"> {{element.unit2}} <br> {{element.value2}} </td>
</ng-container>
<ng-container matColumnDef="value3">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element"> {{element.unit3}} <br> {{element.value3}} </td>
</ng-container>
<ng-container matColumnDef="value4">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element"> {{element.unit4}} <br> {{element.value4}} </td>
</ng-container>
<ng-container matColumnDef="value5">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element"> {{element.unit5}} <br> {{element.value5}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['parameter', 'value', 'value2', 'value3', 'value4', 'value5']"></tr>
<tr mat-row *matRowDef="let row; columns: ['parameter', 'value', 'value2', 'value3', 'value4', 'value5'];"></tr>
</table>
Which results in something that looks like this. It's close. But everything is in one single cell while I would like to split those two up. Had to cross out the numbers since it may or may not be confidential.
Data source consist of an array with objects made out of parameter and value unit pairs. Where the unit makes up the "header cell"
You could divide the mat-cell into further smaller blocks to achieve what you are trying to with more control over the styling. Something like this:
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef>
</mat-header-cell>
<mat-cell *matCellDef="let element">
<div class="d-flex flex-column text-center w-100">
<div class="font-weight-bold unit">
RR (trap)[-]
</div>
<div class="value">
5.25
</div>
</div>
</mat-cell>
</ng-container>
Using flexbox you can create your layout of the cell always to include one cell(div) of the unit and the other cell(div) of the value.
Some styling just to add borders around the cells:
.value {
border-top-width: 0 !important;
border: 1px solid;
padding: 3px;
}
.unit {
border: 1px solid rgb(82, 79, 79);
padding: 3px;
}
Here is my code for my datatable. The columns too packed together, and it's hard to tell them apart. I tried to change the spacing, width of the columns in CSS, add a custom ngClass but nothing had worked. What should I do to fix this?
<table id="order-information" mat-table [dataSource]="dataSource" matSort class="order-table w-100-p mt-24">
<ng-container matColumnDef="DeliveryNumber" >
<th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'w-75'">Tesellüm No</th>
<td mat-cell *matCellDef="let row" [ngClass]="'w-75'">
<div>{{row?.DeliveryNumber}}</div>
</td>
</ng-container>
<ng-container matColumnDef="StockIntegrationCode" >
<th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'w-75'">Stok Kodu</th>
<td mat-cell *matCellDef="let row" [ngClass]="'w-75'"> {{row?.Product?.StockIntegrationCode}} </td>
</ng-container>
<ng-container matColumnDef="ProductName" >
<th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'w-100'">Stok Adı</th>
<td mat-cell *matCellDef="let row" [ngClass]="'w-100'"> {{row?.Product?.ProductName}} </td>
</ng-container>
<ng-container matColumnDef="QuantityIn">
<th mat-header-cell *matHeaderCellDef> Miktar </th>
<td mat-cell *matCellDef="let row"> {{row.QuantityIn}} </td>
</ng-container>
<ng-container matColumnDef="UnitTypeId">
<th mat-header-cell *matHeaderCellDef> Birim </th>
<td mat-cell *matCellDef="let row"> {{row?.UnitTypeId}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></tr>
</table>
try to remove all width classes (w-100, w-75,...), and see how it looks.
I have an angular material table with information columns and date columns. I want to have the information columns stay at the left side, mean sticky.
I have already tried to add the "sticky"-tag to all the columns I want sticky but didn´t work out.
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8" >
<ng-container matColumnDef="group" sticky>
<th mat-header-cell class="group" *matHeaderCellDef mat-sort-header> Konzern </th>
<td mat-cell class="group" *matCellDef="let element"> {{element.group}} </td>
</ng-container>
<ng-container matColumnDef="customer"sticky>
<th mat-header-cell class="customer" *matHeaderCellDef mat-sort-header> Kunde </th>
<td mat-cell class="customer" *matCellDef="let element"> {{element.customer}} </td>
</ng-container>
<ng-container matColumnDef="brand" sticky>
<th mat-header-cell class="brand" *matHeaderCellDef mat-sort-header> Marke </th>
<td mat-cell class="brand" *matCellDef="let element"> {{element.brand}} </td>
</ng-container>
<ng-container matColumnDef="subBrand" sticky>
<th mat-header-cell class="subBrand" *matHeaderCellDef mat-sort-header> Submarke </th>
<td mat-cell class="subBrand" *matCellDef="let element"> {{element.subBrand}} </td>
</ng-container>
<ng-container matColumnDef="subgroup" sticky>
<th mat-header-cell class="subgroup" *matHeaderCellDef mat-sort-header> Untergruppe </th>
<td mat-cell class="subgroup" *matCellDef="let element"> {{element.subgroup}} </td>
</ng-container>
<ng-container *ngFor="let week of this.displayedRowInformation; let i=index" [matColumnDef]="i.toString()">
<th mat-header-cell class="week" [id]="i.toString()" *matHeaderCellDef> {{week.weeknumber}} </th>
<td mat-cell class="week" *matCellDef="let element">
<div style="position:relative">
<div>{{ getEvent(week, element).description}}</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
I think this site could help you. You can check by changing the options in the site.
https://tburleson-layouts-demos.firebaseapp.com/#/docs
I just got the mat-table to work, but I'm having some real problems fixing the alignment on it, I'm unsure how to manipulate it but would really need the cells to be left-aligned, just as the headers are.
A picture of how the table looks at the moment might help:
[![enter image description here][1]][1]
As you can see the alignment is really off, I've been looking at some threads here on Stack Overflow and github but haven't been able to implement any of the suggestions.
Currently my css looks super-simple like this:
table {
width: 100%;
}
And my html looks like this:
<h3> All Uploaded invoices:</h3>
<div class="invoice-table mat-elevation-z8">
<table mat-table #table [dataSource]="invoices">
<ng-container matColumnDef="rating">
<th mat-header-cell *matHeaderCellDef> Rating </th>
<td mat-cell *matCellDef="let invoice"> {{invoice.rating}} </td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef> Amount </th>
<td mat-cell *matCellDef="let invoice"> {{invoice.amount}} </td>
</ng-container>
<ng-container matColumnDef="debtor">
<th mat-header-cell *matHeaderCellDef> Debtor </th>
<td mat-cell *matCellDef="let invoice"> {{invoice.debtor}} </td>
</ng-container>
<ng-container matColumnDef="serial">
<th mat-header-cell *matHeaderCellDef> Serial </th>
<td mat-cell *matCellDef="let invoice"> {{invoice.serial}} </td>
</ng-container>
<ng-container matColumnDef="dateout">
<th mat-header-cell *matHeaderCellDef> Dateout </th>
<td mat-cell *matCellDef="let invoice"> {{invoice.dateout}} </td>
</ng-container>
<ng-container matColumnDef="expiration">
<th mat-header-cell *matHeaderCellDef> Expiration </th>
<td mat-cell *matCellDef="let invoice"> {{invoice.expiration}} </td>
</ng-container>
<ng-container matColumnDef="daysleft">
<th mat-header-cell *matHeaderCellDef> Days left </th>
<td mat-cell *matCellDef="let invoice"> {{invoice.daysleft}} </td>
</ng-container>
<ng-container matColumnDef="fid">
<th mat-header-cell *matHeaderCellDef> Fid </th>
<td mat-cell *matCellDef="let invoice"> {{invoice.fid}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[20, 100, 200]" showFirstLastButtons></mat-paginator>
</div>
<p><a [routerLink]="['/login']">Logout</a></p>
Is there a simple way to left-align the values like the headers are aligned? [1]: https://i.stack.imgur.com/i5SyD.png
You can have like this instead of using td and th, unless you want to particularly use table tags
<mat-table #table [dataSource]="invoices">
<ng-container matColumnDef="dateout">
<mat-header-cell *matHeaderCellDef> Dateout </mat-header-cell>
<mat-cell *matCellDef="let invoice"> {{invoice.dateout}} </mat-cell>
</ng-container>
</mat-table>
Everything looks good to me other than the invoice-table class on the table element
are you applying any kind of css property in that ? like a padding or something to the child elements ?