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>
Related
I would like to change the background color of the raw but it wont change
i have typed but still wont change <tr class="bg-green text-white">
<table border="0" class="table-striped" style="width:100%;table-layout:fixed">
<thead>
<tr class="bg-green text-white">
<th style="text-align:center">الترتيب</th>
<th style="text-align:center">النادي</th>
<th style="text-align:center">لعب</th>
<th style="text-align:center">فاز</th>
<th style="text-align:center">تعادل</th>
<th style="text-align:center">خسر</th>
<th class="d-none d-sm-table-cell" style="text-align:center">له</th>
<th class="d-none d-sm-table-cell" style="text-align:center">عليه</th>
<th style="text-align:center">فارق</th>
<th style="text-align:center">نقاط</th>
</tr>
</thead>
</table>
If you are using bootstrap you can use some common class to change the background color of the row. like-
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Bootstrap Ref
But if you are trying to change using only html and css, then you can try it like this.
tr{
background-color: blue;
}
I have a table in angular 6. This is working find, But I want to use it in ngfor and it not working as expected. Here is the table:
.hiddenRow {
padding: 0 !important;
}
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Description</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle" style="cursor: pointer;">
<td>1</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">$150.00</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse jumbotron" id="demo1">
Demo1
</div>
</td>
</tr>
</tbody>
</table>
This is working find except that I want to include *ngFor in order to loop on many elements. Any idea ?
Put this instead of the table row you want to repeat for each row
<tr *ngFor="for row of rows">
<td> {{row.id}} </td>
<td> {{row.date}} </td>
<td> {{row.desc}} </td>
<td> {{row.credit}} </td>
</tr>
(this code is not tested)
Update
Try this:
<table class="table table-condensed" *ngFor="let l of list_name" style="border-collapse:collapse;">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Description<th>
<th>Credit</th>
</tr>
</thead>
...
You can iterate over an array with your desired length
Why bootstrap responsive table is not working with dir-paginate.
I have created a responsive grid HTML table by using bootstrap which is working with hard-coded data, but when my angular developer colleague used some 'dir-paginate' for retrieving data from the database then my responsive design code is not working when minimizing the browser shorter.
<div class="portlet-body flip-scroll">
<div style="overflow-x:auto;">
<table id="Tbl_SiteVisitViewAll" class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr>
<th>S. No.</th>
<th ng-click="Sort('Active')">Attended By</th>
<th>Edit</th>
</tr>
</thead>
<tbody dir-paginate="S in SiteVisits |filter : FollowUp |orderBy:'key':AscOrDesc | itemsPerPage:20">
<tr>
<td>{{S.index}}</td>
<td>{{S.UpdatedBy}}</td>
<td>
<a href="#" ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I think you are using the directive at the wrong Position. You want to repeat the <tr>-element instead of the <tbody>-element.
For more Information look at this answer: https://stackoverflow.com/a/34392061/7225524
<div class="portlet-body flip-scroll">
<div style="overflow-x:auto;">
<table id="Tbl_SiteVisitViewAll" class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr>
<th>S. No.</th>
<th ng-click="Sort('Active')">Attended By</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="S in SiteVisits |filter : FollowUp |orderBy:'key':AscOrDesc | itemsPerPage:20">
<td>{{S.index}}</td>
<td>{{S.UpdatedBy}}</td>
<td>
<a href="#" ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Hello i have a table and i want to center a th between two other th.
I want to change the position of th Vieillesse de base to be displayed in the center of Provisionnel and Régularisation.
Here my HTML :
<div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
#for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">#(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div>
The key to do this is use html colspan in the th, to simulate equality of width with the second row. Then you only need to use .text-center.
In you particular case, use colspan="2" in the second th
JS FIDDLE DEMO
<table class="table">
<thead class="cordonnes-cabinet">
<tr>
<th>Date</th>
<th colspan="2" class="text-center">Vieillesse de base</th>
<th>Complémentaire</th>
<th>Total</th>
</tr>
<tr>
<th style="width:10%">...</th>
<th class="text-center">Provisionnel</th>
<th class="text-center">Régularisation</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbbody>
<tr>
<th>col1</th>
<td class="text-center">col2</td>
<td class="text-center">col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</tbbody>
</table>
So the issue here is that your text is centered but the Column to the right is X wide and creates a optical illusion that your column is a lot wider.
I would set the column saying "Complémentaire" to text-align: left with class text-left then it will create the illuion you want.
Ive attached a picture where you can see that your code actually centers the text its just an optical illuion
This is how it would look with left aligned in the blue column:
And now its just a question on how to make it pretier with paddings on the td's and th's
I currently have a table with multiple rows. I was wondering if there is a way to collapse several rows (i.e. BMW, Toyota, and Honda) under the first row (i.e. cars) with out remove the "colspan" spacing. All the example I have seen seems like you have to lose the formatting of the collapsed rows.
<table class="table table-sm table-hover">
<thead class="thead-inverse">
<thead>
<tr>
<th colspan="6"></th>
<th colspan="3">Current Month</th>
<th colspan="3">Year-to-Date</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#cars" class="accordion-toggle">
<th colspan="6">Cars</th>
<td colspan="3">456 mi</td>
<td colspan="3">700 mi</td>
</tr>
<tr class="hiddenRow"><div class="accordian-body collapse" id="cars">
<td colspan="1"></td>
<td colspan="5">Toyota</td>
<td colspan="3">534 mi</td>
<td colspan="3">800 mi</td>
</tr>
<tr>
<th colspan="1"></th>
<th colspan="5">Honda</th>
<td colspan="3">600 mi</td>
<td colspan="3">770 mi</td>
</tr>
</div>
</tbody>
</table>
If you use bootstrap you probably already have jQuery loaded, so you could use it to query and hide the rows on click. Like this:
(function() {
$('#carsTable .toggle').on('click', function() {
$('#carsTable .hideableRow').toggleClass('hiddenRow');
});
})()
https://jsfiddle.net/q4w8062y/1/
Another possibility, not sure it would work as you want, is to put the "toggler-row" on another tbody or as <table>'s child, and use the collapse class on <tbody>. Like this:
https://jsfiddle.net/wkmmro89/1/
http://www.w3.org/TR/html-markup/table.html#table