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.
Related
I made a mat-table in Angular. When the screen is small, a horizontal scrollbar appears. The problem is that the scrollbar appears at the bottom of the page, I want the scrollbar at the bottom of the table.
The HTML:
<div id="tableWrapper">
<table mat-table class="table table-striped" [dataSource]="tableData" dense>
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell id="nameCol" *matCellDef="let prod">{{ prod.productName }}</td>
</ng-container>
<ng-container matColumnDef="HabitableSize">
<th mat-header-cell *matHeaderCellDef>Woon Oppervlakte</th>
<td mat-cell *matCellDef="let prod">{{ prod.habitableSize }} m²</td>
</ng-container>
<ng-container matColumnDef="GardenSize">
<th mat-header-cell *matHeaderCellDef>Tuinoppervlakte</th>
<td mat-cell *matCellDef="let prod">{{ prod.gardenSize }} m²</td>
</ng-container>
<ng-container matColumnDef="TotalSize">
<th mat-header-cell *matHeaderCellDef>Totale Oppervlakte</th>
<td mat-cell *matCellDef="let prod">{{ prod.totalSize }} m²</td>
</ng-container>
<ng-container matColumnDef="Bedroom">
<th mat-header-cell *matHeaderCellDef>Aantal Slaapkamers</th>
<td mat-cell *matCellDef="let prod">{{ prod.amountBedroom }}</td>
</ng-container>
<ng-container matColumnDef="TypeProduct">
<th mat-header-cell *matHeaderCellDef>Type Bebouwing</th>
<td mat-cell *matCellDef="let prod">{{ getProductTypeAsText(prod) }}</td>
</ng-container>
<ng-container matColumnDef="Price">
<th mat-header-cell *matHeaderCellDef>Prijs</th>
<td mat-cell *matCellDef="let prod">€ {{ prod.price }}</td>
</ng-container>
<ng-container matColumnDef="Sold">
<th mat-header-cell *matHeaderCellDef>Verkocht?</th>
<td mat-cell *matCellDef="let prod">{{ getisSoldAsText(prod) }}</td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Beschrijving</th>
<td mat-cell id="descriptionCol" *matCellDef="let prod">{{ prod.productDescription }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
</table>
</div>
The CSS:
#tableWrapper{
width: 100%;
}
mat-table {
overflow-x: auto;
display: none;
}
mat-table ng-container{
display: table;
}
The result:
Example
So I want the scrollbar under the table and above the orange footer.
Angular sticky columns aren't working on Firefox browser, Even the examples in the documentation aren't working.
Table with sticky columns example:
https://material.angular.io/components/table/examples
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name" sticky>
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
</table>
</div>
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 ?