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>
Related
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 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; }
i am trying to use mat table in angular so i can have a table with data the problem is that the headers of the table fields are not in the right side but i want them to be i used RTl but i did not work what should i do?
this is my table right now
this is my html code
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" class="table" >
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef > NO </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
this is css
table {
direction: rtl;
width: 1300px;
}
Here a small Stackblitz: https://stackblitz.com/edit/angular-cunndn?file=src/app/table-basic-example.html
You just need to add dir="rtl" to your html tag like...
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" dir="rtl">
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 ?