I'm using angular 8. I need to fix first three column position of table to make it non-scroll able,
this is my recent code:
<mat-tab label="Rental details">
<div class="table-responsive" *ngIf="!rentLoader" >
<table class="table">
<thead class="text-info">
<tr>
<th>Voucher No.</th>
<th>Voucher Date</th>
<th>Amount</th>
<th>Mode Of deduction</th>
<th>Deduction Date</th>
<th>Deduction Amount</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rentals of rentalDetailsList | paginate: { itemsPerPage: 10, currentPage: rentalPage, id: 'rentalPagination'}">
<td>{{rentals.Voucher_No}}</td>
<td>{{rentals.Voucher_Date | date : 'short'}}</td>
<td>₹ {{rentals.Amount}}</td>
<td>{{rentals['Mode of deduction']}}</td>
<td>{{rentals['Deduction Date']}}</td>
<td>₹ {{rentals['Deduction Amount']}}</td>
<td>{{rentals.Remarks}}</td>
</tr>
</tbody>
</table>
</div>
<div class="text-center" *ngIf="rentalDetailsList.length == 0 && !rentLoader">
No data found.
</div>
</mat-tab>
I need to freeze Voucher No.,Voucher Date and Amount.
Thank you
I did it by using d-flex class bootstrap.
I divided them into two different div which is to be scrolled and different div for non scroll.
<div class="d-flex">
<div class="table-nowrap" *ngIf="!rentLoader">
<table class="table">
<thead class="text-info">
<tr>
<th>Voucher No.</th>
<th>Voucher Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr
*ngFor="let rentals of rentalDetailsList | paginate: { itemsPerPage: 10, currentPage: rentalPage, id: 'rentalPagination'}">
<td>{{rentals.Voucher_No}}</td>
<td>{{rentals.Voucher_Date | date : 'short'}}</td>
<td>₹ {{rentals.Amount}}</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive" *ngIf="!rentLoader">
<table class="table">
<thead class="text-info">
<tr>
<th>Mode Of deduction</th>
<th>Deduction Date</th>
<th>Deduction Amount</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr
*ngFor="let rentals of rentalDetailsList | paginate: { itemsPerPage: 10, currentPage: rentalPage, id: 'rentalPagination'}">
<td>{{rentals['Mode of deduction']}}</td>
<td>{{rentals['Deduction Date']}}</td>
<td>₹ {{rentals['Deduction Amount']}}</td>
<td>{{rentals.Remarks}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
How to Set Pagination Align Center using Angular ? I have added css for pagination too.
I had tried some styles but that are not effecting.
(1) justify-content-center class (2) class="pagination justify-content-center"
But none of them working. Please suggest some other designs if possible.
<table class="views-table cols-16 table table-hover table-0 table-0 table-0 neilsoft-region-table">
<thead class="neilsoft-region-table-head">
<tr>
<th style="width:100px">_id</th>
<th style="width:100px">Autodesk Material Description</th>
<th style="width:100px">Autodesk SAP Material Description</th>
</tr>
<tr *ngFor="let pricedata of ExcelData | paginate: { itemsPerPage: 10, currentPage: pages }">
<td style="width:100px">
{{pricedata['_id']}}
</td>
<td style="width:100px">
{{pricedata['Autodesk Material Description']}}
</td>
<td style="width:100px">
{{pricedata['Autodesk SAP Material Description']}}
</td>
</tr>
</thead>
<tr class="pagination justify-content-center">
<pagination-controls (pageChange)="pages = $event" style="width:100px"></pagination-controls>
</tr>
</table>
I am trying to print key in center of values.so that I tried to use rowspan but it's repeating n times.
here is my code
<table >
<tbody ng-repeat="(key,value) in values1" >
<tr >
<th translate> Heading 1</th>
<th translate> Heading 2 </th>
<th translate> Heading 3 </th>
<th translate> Heading 4 </th>
</tr>
<tr ng-repeat="itr in value">
<td >
{{itr .value1}}
</td>
<td >
{{itr .value2}}
</td>
<td >
{{itr .value3}}
</td>
<td rowspan="{{value.length+1}}" >
{{key}}
</td>
</tr>
</tbody>
</table>
But I am getting like this.
I need in this format
Firstly, here is my UI:
My output to my right displayed as a result of using the tag <tbody> inside my ajax:
success: function (response){
var tbody="";
$.each(response.all_categories, function (key, cat) {
tbody+=`
<tr>
<td class="p-0 btn-category-list-col">
<button id="submit" type="submit" class="btn float-left" data-toggle="modal" data-target="#createCategory">${cat.category_name}</button>
</td>
</tr>`; });
$('tbody').html(tbody) }
My problem is that I am using two <tbody> in this same page, so the table to the right shows up in the left:
Is there some way to make my ajax function read a class or an id instead of the tag itself?:
So kind of like my line tbody+= becomes: tbody(class/id)+=
Here is my table that uses two tbody tags:
<div class="col-md-2 border">
<table id="categoryList" class="table">
<thead>
<tr>
<th class="thead-category-list">Category List</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="col-md-10 border bbr-table-col">
<div id="success_message"></div>
<table id="categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
<thead>
<tr class="bbr-table text-light">
<th>Group Name</th>
<th>Group Type</th>
<th>Group Users</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
any help would be appreciated thanks
If you didn't use the same IDs for both tables(which is invalid html by the way) you could have used the table id to select the correct one.
From the html above you could use the table class to identify it
$('table.table-striped tbody').html(tbody);
or you could fix the invalid duplicate ids and use the id to select the correct table
<div class="col-md-2 border">
<table id="side-categoryList" class="table">
<thead>
<tr>
<th class="thead-category-list">Category List</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="col-md-10 border bbr-table-col">
<div id="success_message"></div>
<table id="main-categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
<thead>
<tr class="bbr-table text-light">
<th>Group Name</th>
<th>Group Type</th>
<th>Group Users</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
$('#main-categoryList tbody').html(tbody);
This is my herolist json:
herolist = [{
sl: 1,
title: 'Batman',
gender: 'male',
firstname: 'Bruce',
lastname: 'Wayne',
city: 'Gotham',
ticketprice: 123.4567,
releasedate: '1/26/2018',
poster: 'assets/images/batman.jpg',
movieslist: [
{
title: 'Batman Begins',
poster: 'assets/images/bat1_tn.jpg'
}, {
title: 'Dark Knight',
poster: 'assets/images/bat2_tn.jpg'
}, {
title: 'Dark Knight Raises',
poster: 'assets/images/bat3_tn.jpg'
}
]
}
I have a nested array as movieslist. I need to display all those tiles inside movie list in the table.
I followed the below approach to display remaining items
<h1>Heroes List Application</h1>
<ul>
<li *ngFor="let hero of herolist">{{hero.title}}</li>
</ul>
<div class="table-responsive">
<table class="table table-striped table table-bordered table table-hover">
<thead class="thead-dark">
<tr>
<th>Sl #</th>
<th>Title</th>
<th>Full Name</th>
<th>Poster</th>
<th>City</th>
<th>Ticket Price</th>
<th>Release Date</th>
<th>Movies List</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let hero of herolist">
<td>{{hero.sl}}</td>
<td>{{hero.title | titlecase }}</td>
<td>{{hero.firstname+' '+hero.lastname}}</td>
<td>
<img width="50" [src]="hero.poster" [alt]="hero.title">
</td>
<td>{{hero.city}}</td>
<td>{{hero.ticketprice | currency : 'INR': 'symbol': '3.2-3'}}</td>
<td>{{hero.releasedate | date }}</td>
**<td>
<span>{{ hero.movieslist.values()}}</span>
</td>**
</tr>
</tbody>
</table>
</div>
`
I need to display the movies list in the column. How should I use the ngFor as it is not the taking movieslist.
Use ngFor like this
<div *ngFor="let movie of hero.movieslist">{{ movie.title}}</div>
Full code
<h1>Heroes List Application</h1>
<ul>
<li *ngFor="let hero of herolist">{{hero.title}}</li>
</ul>
<div class="table-responsive">
<table class="table table-striped table table-bordered table table-hover">
<thead class="thead-dark">
<tr>
<th>Sl #</th>
<th>Title</th>
<th>Full Name</th>
<th>Poster</th>
<th>City</th>
<th>Ticket Price</th>
<th>Release Date</th>
<th>Movies List</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let hero of herolist">
<td>{{hero.sl}}</td>
<td>{{hero.title | titlecase }}</td>
<td>{{hero.firstname+' '+hero.lastname}}</td>
<td>
<img width="50" [src]="hero.poster" [alt]="hero.title">
</td>
<td>{{hero.city}}</td>
<td>{{hero.ticketprice | currency : 'INR': 'symbol': '3.2-3'}}</td>
<td>{{hero.releasedate | date }}</td>
**<td>
<div *ngFor="let movie of hero.movieslist">{{ movie.title}}
<img src={{movie.poster}}/>
</div>
</td>**
</tr>
</tbody>
</table>
</div>
I have the following table:
<div>
<table class="table-alignment table table-striped">
<tr class="text text-center">
<th>Symbol</th>
<th>Quantity</th>
<th>Timestamp</th>
<th>Amount</th>
</tr>
<div *ngIf="loading == true" class="loader loader-alignment"></div>
<div *ngIf="loading == false">
<tr *ngFor="let s of stats" class="text text-center" [ngClass]="{'text-success' : s.transaction_type=='BUY', 'text-danger' : s.transaction_type=='SELL'}">
<td>{{s.tradingsymbol | formatSymbol}}</td>
<td>{{s.filled_quantity}}</td>
<td>{{s.order_timestamp}}</td>
<td>{{s.average_price}}</td>
</tr>
</div>
</table>
</div>
The problem here is that the entire tr is rendered in 1st column. How do i fix this?
Consider using the basic HTML elements thead and tbody.
Also, for example you don't have to write loading == false, write !loading instead.
<div>
<table class="table-alignment table table-striped">
<thead>
<tr class="text text-center">
<th>Symbol</th>
<th>Quantity</th>
<th>Timestamp</th>
<th>Amount</th>
</tr>
</thead>
<div *ngIf="loading" class="loader loader-alignment"></div>
<tbody *ngIf="!loading">
<tr *ngFor = "let s of stats" class = "text text-center" [ngClass]="{'text-success' : s.transaction_type=='BUY', 'text-danger' : s.transaction_type=='SELL'}">
<td>{{s.tradingsymbol | formatSymbol}}</td>
<td>{{s.filled_quantity}}</td>
<td>{{s.order_timestamp}}</td>
<td>{{s.average_price}}</td>
</tr>
</tbody>
</table>
</div>