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
Related
I have a table where I want to sort a column "BugId".
The inbuilt bootstrap sorting sorts in a particular fashion where ID-1 is followed by ID-11,then ID-12 and so on,(in an alphabetic fashion) whereas I want ID-1 to be followed by ID-2, then ID-3 ....ID-11 and so on.(in a numerical fashion)
This is how my table looks:
<table id="myTable" class="footable table table-striped toggle-arrow-tiny m-xxs" data-page-size="1000">
<thead>
<tr>
<th >Bug ID</th>
<th>Component</th>
<th data-sort-ignore="true">Report Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
Can I change the sorting for only one column in this fashion?
<table data-toggle="table" id="myTable" class="footable table table-striped toggle-arrow-tiny m-xxs" data-page-size="1000">
<thead>
<tr>
<th data-field="bugid" data-sortable="true" data-sort-name="_bugid_data" data-sorter="bugidsorter" >Bug ID</th>
<th data-field="component" data-sortable="true" >Component</th>
<th data-sort-ignore="true">Report Date</th>
</tr>
</thead>
<tbody><tr>
<td data-bugid="1">id-1</td>
<td >x</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="2" >id-2</td>
<td >a</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="3">id-3</td>
<td >b</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="4">id-4</td>
<td >c</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="5">id-5</td>
<td >d</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="6">id-6</td>
<td >e</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="10">id-10</td>
<td >e</td>
<td>11/12/2015</td>
</tr>
</tbody>
</table>
sorting function
function bugidsorter(a, b) {
console.log(a);
if (a.bugid < b.bugid) return -1;
if (a.bugid > b.bugid) return 1;
return 0;
}
fiddle
I need something like this:
<tr>
somecode...
</tr *ngIf="some condition">
which of course isn't supported, but is there any way to achieve this behavior?
I have a table, and I want to add rows to it recursively using a component that receives node's list(List), iterates over the nodes, print them and calls itself for each of the children of each node roughly like this:
main.component.html
<table class="table table-bordered">
<thead>
<tr>
<th>node names</th>
</tr>
</thead>
<tbody>
<tr app-rower [nodes]="nodes"></tr>
</tbody>
</table>
rower.component.html:
<ng-container *ngFor="let node of tree">
<tr>
<td>
{{node.name}}
</td>
</tr *ngIf="node.hasChildren">
<tr *ngIf="node.hasChildren" app-rower [tree]="node.children" >
</tr *ngIf="!node.hasChildren">
</ng-container>
so a final html would be:
<table>
<thead>
<tr>
<th>node's names</th>
</tr>
</thead>
<tbody>
<tr>
<td>node 1</td>
</tr>
<tr>
<td>node 1's child</td>
</tr>
<tr>
<td>node 1's grandchild</td>
</tr>
<tr>
<td>node 2</td>
</tr>
<tr>
<td>node 2's child</td>
</tr>
</tbody>
</table>
No, that's not supported. A template needs to be valid HTML otherwise Angular won't parse it.
<ng-container *ngFor="let node of tree">
<tr>
<td>
{{node.name}}
</td>
</tr>
<tr *ngIf="node.hasChildren" app-rower [tree]="node.children" >
</tr>
</ng-container>
I have a table inside table in html as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr>
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{.quantity * .rate}</td>
</tr>
{/items}
</tbody>
</table>
</tr>
{/orders}
</tbody>
</table>
I get the output as shown below:
Why I get such an output? I expected to see nested tables.
Your HTML has several errors, starting with this:
{#orders}
As others have mentioned, this is also bad:
<tr>↩ <table class="sortable draggable row-details"
Do yourself a big favor and start using an HTML validator like W3C's. It will find problems like this quickly. (It will also find other things to complain about that you might not need to fix, but when it helps, it will save a lot of time.)
Also, start using the Chrome inspector to see what it's done when your markup goes haywire. In this case, you can see that Chrome closed your first table, instead of nesting it. When Chrome messes with your HTML like this, it's a sign you might have an error in that spot.
</tr></tbody></table>
{#items}
{/items}
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<table>
<tr>
<td> <!-- must be in td -->
<table> <!-- nested table -->
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
your nested table need to be inside of td or th.
You need to nest the child <table> tag inside a <td> tag, not inside a <tr> tag. Doing this should make it display properly, as only a <td> or <th> tag can go directly inside a <tr> tag.
The <table> tag needs to be inside <td> or <th> tag for it to be nested. In your code, you have put the <table> tag as a child of <tr> tag which is wrong. It should be child of <td> or <th>.
Inserting <td> or <th> between <tr> and <table> will give the output correctly.
Here is working link for reference:
Nested Tables in HTML
Example:
<table border="1">
<thead>
<tr>
<th>Item 1
<th>Item 2
</tr>
</thead>
<tbody>
<tr>
<td>
<table border="1">
<tr>
<td>1
<td>2
</tr>
<tr>
<td>1
<td>2
</tr>
</table>
<td>A
</tr>
</tbody>
</table>
I am trying to prepare a simple mark sheet [as an example to demonstrate my requirement]. Am planning to have a collapsible div which will render all the mark details once it is expanded.
<div class="well">
<table class="table table-bordered"
style="background:#fff; margin-bottom:10px;">
<tbody>
<tr class="inverse">
<th> ID</th>
<th colspan="2"> Name</th>
</tr>
<tr>
<td>1</td>
<td>ABC</td>
<td>
<a class="btn btn-primary" data-toggle="collapse" href="#ID_1"
aria-expanded="false" >
Hide/Unhide
</a>
</td>
</tr>
<tr>
<td colspan="3">
<div class="collapse" id="ID_1">
<div class="well">
<table class="table table-hover table-bordered" style="background:#fff; margin-bottom:10px;">
<thead>
<tr class="inverse">
<th>Subject</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td>Physics </td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="inverse">
<th> ID</th>
<th colspan="2"> Name</th>
</tr>
<tr>
<td>2</td>
<td>PQR</td>
<td>
<a class="btn btn-primary" data-toggle="collapse" href="#ID_2"
aria-expanded="false" >
Hide/Unhide
</a>
</td>
</tr>
<tr>
<td colspan="3">
<div class="collapse" id="ID_2">
<div class="well">
<table class="table table-hover table-bordered" style="background:#fff; margin-bottom:10px;">
<thead>
<tr class="inverse">
<th>Subject</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chemistry</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
fiddle
But in this approach, when a section is not expanded, the row which encloses the collapsible div appears like a blank row in the table - which is quite misleading.
I am sure this is not the best way to render this sort of details.Would like to know what are the alternate UI options to render these details.
Use this CSS:
td[colspan="3"] {
padding: 0;
}
Fiddle
I am trying to shrink one cell in the table, but it refuses to shring..here is my table.
<table cellspacing="0" style="position: absolute;width: 990px;margin-left: 8px;" align="center">
<thead>
<tr class='no-wrap'>
<th width="20%"></th>
<th width="10%">Our Rating</th>
<th width="10%">Users' Rating</th>
<th width="30%">Review</th>
<th width="30%">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20%"></td>
<td width="10%">Our Rating</td>
<td width="10%">Users' Rating</td>
<td width="30%">Review</th>
<td width="30%">Price</td>
</tr>
</tbody>
</table>
The problem is that the review part doesnt shrink..even when I give it a lower percentage..why is that?
You have incorrect HTML syntax.
You need to wrap your table row elements in tr:
<tbody>
<tr>
<td></td>...
</tr>
</tbody>
Also you have a </th> where you should have a <td> on your 2nd row, 4th cell (Review):
<td width="30%">Review</th>