I'm using multiple mat-tables on one page. I need a mat-sort for one table.
when I debug the code response get with results but matSort not working
<table #transactions class="transactions-table" mat-table [dataSource]="trassactionDataSource" matSort>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
<td mat-cell *matCellDef="let row"> {{row.transaction_id}} </td>
</ng-container>
<ng-container matColumnDef="product_name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Product </th>
<td mat-cell *matCellDef="let row"> {{row.listing_title}} </td>
</ng-container>
.....
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"> </tr>
</table>
'
displayedColumns: string[] = ['id', 'product_name', ...];
#ViewChild(MatSort)private sort: MatSort;
ngOnInit() {
this.userService.getDashboardData().subscribe((response) => {
if (response.code == 401) {
this.authService.logout(true);
} else {
this.trassactionDataSource = new MatTableDataSource(response.result.transactions);
var that = this;
setTimeout(function () {
that.trassactionDataSource.sort = that.sort;
}, 500);
}
}[enter image description here][1]
I don't get any console errors.
Thanks for reading this. I figure it out. matColumnDef = response result
ex:
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
<td mat-cell *matCellDef="let row"> {{row.transaction_id}} </td>
</ng-container>
change in to
<ng-container matColumnDef="transaction_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
<td mat-cell *matCellDef="let row"> {{row.transaction_id}} </td>
</ng-container>
Related
I have created a mat-table with paginator all that works fine but I am having some unwanted space in between which makes the table look ugly. Is there any style I should change for that? Can I use some css styles or is there any predefined styles that I can use so that the style of the table is clean. It is for a project hence I would really appreciate it if you can explain to me clearly regarding the change that I should make to the given code.
Also my default theme is purple-green.
Also will any bootstrap classes work for this?
component.ts file
table mat-table class="table" matSort aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="Pt_Id">
<th mat-header-cell *matHeaderCellDef >Patient Id</th>
<td mat-cell *matCellDef="let row">{{row.Pt_Id}}</td>
</ng-container>
<ng-container matColumnDef="Pt_Name">
<th mat-header-cell *matHeaderCellDef >Patient Name</th>
<td mat-cell *matCellDef="let row">{{row.Pt_Name}}</td>
</ng-container>
<ng-container matColumnDef="Pt_Age">
<th mat-header-cell *matHeaderCellDef >Patient Age</th>
<td mat-cell *matCellDef="let row">{{row.Pt_Age}}</td>
</ng-container>
<ng-container matColumnDef="Department">
<th mat-header-cell *matHeaderCellDef >Department</th>
<td mat-cell *matCellDef="let row">{{row.Department}}</td>
</ng-container>
<ng-container matColumnDef="Docname">
<th mat-header-cell *matHeaderCellDef >Doctor Name</th>
<td mat-cell *matCellDef="let row">{{row.Docname}}</td>
</ng-container>
<ng-container matColumnDef="Pt_Email">
<th mat-header-cell *matHeaderCellDef >Patient Email</th>
<td mat-cell *matCellDef="let row">{{row.Pt_Email}}</td>
</ng-container>
<ng-container matColumnDef="Pt_Mob">
<th mat-header-cell *matHeaderCellDef >Patient Mobile</th>
<td mat-cell *matCellDef="let row">{{row.Pt_Mob}}</td>
</ng-container>
<ng-container matColumnDef="Options">
<th mat-header-cell *matHeaderCellDef >Options</th>
<td mat-cell *matCellDef="let row">
<button type="button" class="btn btn-light mr-1"
data-toggle="modal" data-target="#exampleModal"
(click)="editClick(row)">
Edit</button>
<button type="button" class="btn btn-light mr-1"
(click)="deleteClick(row)">
Delete</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [length]="1000" [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
Output of the table
<div *ngIf="this.v_type != 'NULL'">
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="voucherdataSource">
<ng-container matColumnDef="Credit_Card_No">
<th mat-header-cell *matHeaderCellDef>Credit Card Number</th>
<td mat-cell *matCellDef="let voucher">{{voucher.Credit_Card_No}}</td>
</ng-container>
<ng-container matColumnDef="Seller_Name">
<th mat-header-cell *matHeaderCellDef>Seller Name</th>
<td mat-cell *matCellDef="let voucher">{{voucher.Seller_Name}}</td>
</ng-container>
<ng-container matColumnDef="Account_No">
<th mat-header-cell *matHeaderCellDef>Account Number</th>
<td mat-cell *matCellDef="let voucher">{{voucher.Account_No}}</td>
</ng-container>
<ng-container matColumnDef="Buyer_Name">
<th mat-header-cell *matHeaderCellDef>Buyer Name</th>
<td mat-cell *matCellDef="let voucher">{{voucher.Buyer_Name}}</td>
</ng-container>
<ng-container matColumnDef="GST_No">
<th mat-header-cell *matHeaderCellDef>GST Number</th>
<td mat-cell *matCellDef="let voucher">{{voucher.GST_No}}</td>
</ng-container>
<ng-container matColumnDef="Invoice_No">
<th mat-header-cell *matHeaderCellDef>Invoice Number</th>
<td mat-cell *matCellDef="let voucher">{{voucher.Invoice_No}}</td>
</ng-container>
<ng-container matColumnDef="Amount_Value">
<th mat-header-cell *matHeaderCellDef>Amount Value</th>
<td mat-cell *matCellDef="let voucher">{{voucher.Amount_Value}}</td>
</ng-container>
<ng-container matColumnDef="Voucher_Type">
<th mat-header-cell *matHeaderCellDef>Voucher Type</th>
<td mat-cell *matCellDef="let voucher">{{voucher.Voucher_Type}}</td>
</ng-container>
<ng-container matColumnDef="financial_year">
<th mat-header-cell *matHeaderCellDef>Financial Year</th>
<td mat-cell *matCellDef="let voucher">{{voucher.financial_year}}</td>
</ng-container>
<ng-container matColumnDef="Voucher_Date">
<th mat-header-cell *matHeaderCellDef>Voucher Date</th>
<td mat-cell *matCellDef="let voucher">{{voucher.Voucher_Date}}</td>
</ng-container>
<ng-container matColumnDef="Filepath">
<th mat-header-cell *matHeaderCellDef>Local Filepath</th>
<td mat-cell *matCellDef="let voucher">
<a mat-icon-button href=" {{ voucher.Filepath }} " target="_blank">
<mat-icon>picture_as_pdf</mat-icon>
</a>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
<tr mat-row *matRowDef="let row;columns:displayedColumns"></tr>
</table>
</div>
</div>
I need a fixed header of the table on a dialog box, I can see table but the header is not fixed. In the last 5th line I have used sticky:true that should fix the table's header but it's not fixing and getting scrolled with the table.
I'm using angular7 with Angular material design templates. Currently, my result is as follows,
But I want my result is as follows. Scrollbar under sticky header.
I put some demo code and live demo as your reference.
HTML
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- 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; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
CSS
.example-container {
height: 400px;
overflow: auto;
}
table {
width: 100%;
}
You can do something like that using two table one for the header and another for the data. Please see the working demo.
I have an angular application.It was implemented using Angular Material.I have used a table with tag with 22 column.
Now when I maximize the browser some of the columns are not showing and event in mobile browser all the columns are not shown .
I have tried with the below approach:
First I tried with angular material 'sticky' attribute. It is working fine for browser up to width 110%. But it was not working well when I enlarge the browser size.
Adding bootstrap and using but still not working for mobile screen and large screen.
.html::
<div *ngIf="!loadingAnimation && events.length > 0">
<h1>View All Events</h1>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
</mat-form-field>
</div>
<div class="loading-shade" *ngIf="loadingAnimation" class="center">
<mat-spinner *ngIf="loadingAnimation"></mat-spinner>
</div>
<div fxLayout="row" *ngIf="!loadingAnimation && events.length > 0">
<mat-paginator [length]="totalEvents" [pageSize]="eventsPerPage" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="true" *ngIf="events.length > 0"
(page)="onChangedPage($event)"></mat-paginator>
<div class="table-container">
<table class="table table-hover" mat-table matSort [dataSource]="dataSource" (matSortChange)="changeSort($event)">
<ng-container matColumnDef="status" sticky >
<th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
<td mat-cell *matCellDef="let event">
<!-- <a [routerLink]="['/events/details-events']" [queryParams]="{matchId: event.matchId}" > {{event.status}}
</a> -->
<button mat-raised-button color="primary" (click)="openDialogDetails(event.matchId)">{{event.status}}</button>
</td>
</ng-container>
<ng-container matColumnDef="eventDate" >
<th table-primary mat-header-cell *matHeaderCellDef mat-sort-header> Event_Date </th>
<td mat-cell *matCellDef="let event"> {{event.eventDate}} </td>
</ng-container>
<ng-container matColumnDef="teacherName" >
<th mat-header-cell *matHeaderCellDef mat-sort-header > Teacher_Name </th>
<td mat-cell *matCellDef="let event">
<!-- <a [routerLink]="['/events/details_teachers']" [queryParams]="{memType:'R',memId:event.memId}" > {{event.teacherName}}</a> -->
<button mat-raised-button color="primary" (click)="openDialog('R',event.memId)">{{event.teacherName}}</button>
</td>
</ng-container>
<ng-container matColumnDef="school" >
<th mat-header-cell *matHeaderCellDef mat-sort-header> School </th>
<td mat-cell *matCellDef="let event"> {{event.school}} </td>
</ng-container>
<ng-container matColumnDef="address1">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Address1</th>
<td mat-cell *matCellDef="let event"> {{event.address1}} </td>
</ng-container>
<ng-container matColumnDef="address2">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Address2 </th>
<td mat-cell *matCellDef="let event"> {{event.address2}} </td>
</ng-container>
<ng-container matColumnDef="city">
<th mat-header-cell *matHeaderCellDef mat-sort-header> City </th>
<td mat-cell *matCellDef="let event"> {{event.city}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef mat-sort-header> State </th>
<td mat-cell *matCellDef="let event"> {{event.state}} </td>
</ng-container>
<ng-container matColumnDef="zip">
<th mat-header-cell *matHeaderCellDef mat-sort-header > Zip </th>
<td mat-cell *matCellDef="let event"> {{ event.zip }} </td>
</ng-container>
<ng-container matColumnDef="grade">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Grade </th>
<td mat-cell *matCellDef="let event"> {{ event.grade }} </td>
</ng-container>
<ng-container matColumnDef="scientistName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Scientist_Name </th>
<td mat-cell *matCellDef="let event" >
<!-- <a routerLink="/events/events-scientists">{{event.scientistName}}</a> -->
<button mat-raised-button color="primary" (click)="openDialog('V',event.scientistUserId)">{{event.scientistName}}</button>
</td>
</ng-container>
<ng-container matColumnDef="instName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Institute_Name </th>
<td mat-cell *matCellDef="let event" > {{event.instName}} </td>
</ng-container>
<ng-container matColumnDef="instAddress1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_Addr1 </th>
<td mat-cell *matCellDef="let event" > {{event.instAddress1}} </td>
</ng-container>
<ng-container matColumnDef="instAddress2">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_Addr2 </th>
<td mat-cell *matCellDef="let event" > {{event.instAddress2}} </td>
</ng-container>
<ng-container matColumnDef="instCity">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_City </th>
<td mat-cell *matCellDef="let event" > {{event.instCity}} </td>
</ng-container>
<ng-container matColumnDef="instState">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_State </th>
<td mat-cell *matCellDef="let event"> {{event.instState}} </td>
</ng-container>
<ng-container matColumnDef="instZip">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_Zip </th>
<td mat-cell *matCellDef="let event" > {{event.instZip}} </td>
</ng-container>
<ng-container matColumnDef="classSize">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Class_Size </th>
<td mat-cell *matCellDef="let event" > {{event.classSize}} </td>
</ng-container>
<ng-container matColumnDef="shirtSize" stickyEnd >
<th mat-header-cell *matHeaderCellDef mat-sort-header > Shirt_Size </th>
<td mat-cell *matCellDef="let event" > {{event.shirtSize}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<!-- <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> -->
</div>
<label *ngIf="!loadingAnimation && events.length == 0">No events found, please create one!</label>
.css::
table {
overflow: scroll;
}
.table-container {
height:400px;
width:900px;
overflow:scroll;
}
.loading-shade {
position: absolute;
top: 0;
left: 0;
bottom: 56px;
right: 0;
background: rgba(0, 0, 0, 0.15);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.mat-table-sticky:first-child {
border-right: 1px solid #e0e0e0;
}
.mat-table-sticky:last-child {
border-left: 1px solid #e0e0e0;
}
td.mat-column-star {
width: 5px;
padding-right: 4px;
}
th.mat-column-position, td.mat-column-position {
padding-left: 4px;
}
I need more responsive approach so that it can works in any browser irrespective of size.
For a responsive table with flex you need to use <mat-table> instead of <table mat-table> . You don't get auto sizing for content. Also you need to change all of the rows and header like the <tr mat-row>to <mat-row>
https://material.angular.io/components/table/overview#tables-with-code-display-flex-code-
If you still want to use table, Another option is to set horizontal scroll for your table in css like this
In your html
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort matSortActive="posteddate" matSortDirection="asc">
....
and in your css
.mat-elevation-z8 {
overflow-x: auto;
}
The default shows the first 10 records and there is a couple inches of white space under the table.
How can I modify this so card/table takes up the rest of the screen and the pagination links are at the very botton bottom?
<mat-card>
<mat-card-content>
<table mat-table [dataSource]="dataSource" matSort matSortStart="desc" class="mat-elevation-z6">
<ng-container matColumnDef="virtualMachineName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
Virtual Machine Name
</th>
<td mat-cell *matCellDef="let element">{{ element.virtualMachineName }}</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
<td mat-cell *matCellDef="let element">{{ element.status }}</td>
</ng-container>
<ng-container matColumnDef="labName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Lab Name</th>
<td mat-cell *matCellDef="let element">{{ element.labName }}</td>
</ng-container>
<ng-container matColumnDef="instance">
<th mat-header-cell *matHeaderCellDef>Instance</th>
<td mat-cell *matCellDef="let element">{{ element.instance }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator
[pageSize]="10"
[pageSizeOptions]="[10, 25, 50, 100]"
></mat-paginator>
</mat-card-content>
</mat-card>