I have a table in which after clicking on a row I want to show new child table just after the row I clicked. I am calling new api on row click so I have to show it in new table just after the row clicked. see the snapshot
After clicking on first row the new table is showing like 1, ABC_1, DEF
Here is code for template
<table md-table class="md-primary md-data-table">
<thead md-head md-order="vm.query.order">
<tr md-row>
<th md-column><span>S. No.</span></th>
<th md-column><span>Project Name</span></th>
<th md-column><span>Deadline</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-click="vm.ShowDetailed($index)" ng-repeat="project in vm.projects | limitTo : vm.query.limit : (vm.query.page-1)*vm.query.limit">
<td md-cell>{{($index+1)+(vm.query.page-1)*vm.query.limit}}</td>
<td md-cell>{{project.fields.project_name}}</td>
<td md-cell>{{project.fields.end_date}}</td>
<table md-table ng-show="vm.detailedShow[$index]">
<thead md-head>
<tr md-row>
<th md-column><span>Project Name</span></th>
<th md-column><span>District</span></th>
<th md-column><span>City</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="site in sites">
<td md-cell>{{site.projectName}}</td>
<td md-cell>{{site.district}}</td>
<td md-cell>{{site.city}}</td>
</tr>
</tbody md-body>
</table>
</tr>
</tbody>
</table>
Here is the functions for show/hide
vm.detailedShow = [];
vm.ShowDetailed = function(index){
vm.detailedShow[index] = !vm.detailedShow[index];
}
The value of vm.detailedShow[$index] is getting true/false on click still I am not able to show the table.
The first thing is you can't insert <table> just like a <tr> or <td>. But you can insert the table inside a <td> tag.
Try the below one.
<table md-table class="md-primary md-data-table">
<thead md-head md-order="vm.query.order">
<tr md-row>
<th md-column><span>S. No.</span></th>
<th md-column><span>Project Name</span></th>
<th md-column><span>Deadline</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-click="vm.ShowDetailed($index)" ng-repeat-start="project in vm.projects | limitTo : vm.query.limit : (vm.query.page-1)*vm.query.limit">
<td md-cell>{{($index+1)+(vm.query.page-1)*vm.query.limit}}</td>
<td md-cell>{{project.fields.project_name}}</td>
<td md-cell>{{project.fields.end_date}}</td>
</tr>
<tr ng-show="vm.detailedShow[$index]" ng-repeat-end>
<td> </td>
<td colspan="2">
<table md-table ng-show="vm.detailedShow[$index]">
<thead md-head>
<tr md-row>
<th md-column><span>Project Name</span></th>
<th md-column><span>District</span></th>
<th md-column><span>City</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="site in sites">
<td md-cell>{{site.projectName}}</td>
<td md-cell>{{site.district}}</td>
<td md-cell>{{site.city}}</td>
</tr>
</tbody md-body>
</table>
</td>
</tr>
</tbody>
</table>
Related
I'm trying to add entire row data of a table to my array of object whenever someone click on anchor tag named view/edit. I wrote some logic but I guess I'm missing something.
index.html file
<table class="table">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Order No</th>
<th scope="col">Order Date</th>
<th scope="col">Status</th>
<th scope="col">Total Amount</th>
<th scope="col">Total Qty</th>
<th scope="col">Total Products</th>
<th scope="col">View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="user-name">Alice</td>
<td id="order-no">8536</td>
<td id="order-date">13/07/2020</td>
<td id="status" >Pending</td>
<td id="total-amount" >1800</td>
<td id="total-qty" >3</td>
<td id="total-products" >3</td>
<td>
<a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
</td>
</tr>
<tr>
<td id="user-name">Michael</td>
<td id="order-no">4354</td>
<td id="order-date">12/07/2020</td>
<td id="status" >Approved</td>
<td id="total-amount" >1500</td>
<td id="total-qty" >2</td>
<td id="total-products" >2</td>
<td>
<a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
</td>
</tr>
</tbody>
</table>
app.js file
let usersData = []; // array to store user table objects
$('#view-data').click(function(){
var row = $(this).closest("tr");
// userData object to store data from a table complete row
var userData = {
"order_no": row.find('#order-no').text(),
"order_date": row.find('#order-date').text(),
"totalproducts": row.find('#total-products').text(),
"total_amount": row.find('#total-amount').text(),
"total_qty": row.find('#total-qty').text(),
"status": row.find('#status').text(),
"user_name": row.find('#user-name').text(),
}
usersData.push(userData)
console.log(usersData)
})
Note: I should use button instead a tag but I'm using anchor tag because it'll open another tab in future for same data manipulation.
Selector need to change to class (view-data) instead of id
let usersData = []; // array to store user table objects
$('.view-data').click(function(ev){
ev.preventDefault();
ev.stopPropagation();
var row = $(ev.currentTarget).closest("tr");
// userData object to store data from a table complete row
var userData = {
"order_no": row.find('#order-no').text(),
"order_date": row.find('#order-date').text(),
"totalproducts": row.find('#total-products').text(),
"total_amount": row.find('#total-amount').text(),
"total_qty": row.find('#total-qty').text(),
"status": row.find('#status').text(),
"user_name": row.find('#user-name').text(),
}
usersData.push(userData)
console.log(userData)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Order No</th>
<th scope="col">Order Date</th>
<th scope="col">Status</th>
<th scope="col">Total Amount</th>
<th scope="col">Total Qty</th>
<th scope="col">Total Products</th>
<th scope="col">View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="user-name">Alice</td>
<td id="order-no">8536</td>
<td id="order-date">13/07/2020</td>
<td id="status" >Pending</td>
<td id="total-amount" >1800</td>
<td id="total-qty" >3</td>
<td id="total-products" >3</td>
<td>
<a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
</td>
</tr>
<tr>
<td id="user-name">Michael</td>
<td id="order-no">4354</td>
<td id="order-date">12/07/2020</td>
<td id="status" >Approved</td>
<td id="total-amount" >1500</td>
<td id="total-qty" >2</td>
<td id="total-products" >2</td>
<td>
<a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
</td>
</tr>
</tbody>
</table>
I am trying to separate data by a user name with their respective column of data.
I have different Changeable users with their data. I want to display data in the table. I am not able to do that..
I want to display users in Name1 Name2... and their data(Cash, PhonePay, Card, etc) respectively.
HTML file
<table id="dtBasicExample" class="table table-hover table-bordered table-striped table-sm">
<thead class="table-primary">
<tr>
<th class="th-sm text-danger">Division:</th>
<th class="th-sm">Name 1</th>
<th class="th-sm">Name 2</th>
<th class="th-sm">Name 3</th>
<th class="th-sm">Name 4</th>
<th class="th-sm">Name 5</th>
</tr>
</thead>
<tbody>
<tr>
<th class="th-sm">Cash</th>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">00</td>
<td class="th-sm">00</td>
</tr>
<tr>
<th class="th-sm">Phone Pay</th>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">00</td>
<td class="th-sm">00</td>
</tr>
<tr>
<th class="th-sm">Card</th>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">00</td>
</tr>
<tr>
<th class="th-sm">Cell Pay</th>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">00</td>
</tr>
<tr>
<th class="th-sm">Total</th>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">00</td>
</tr>
</tbody>
</table>
TS FILE
getSalesData() {
console.log(this.cnvForm.value);
this.salesService.getSalesCollectionVariance(this.cnvForm.value).subscribe(data => {
this.recObj = data;
console.log(this.recObj);
this.filterData(data);
});
}
I have data in the console but I have no any idea how to place/display respective data in the HTML file.
the following code will build your table based on your dynamic data array, your thead should look like this
<thead class="table-primary">
<tr>
<th class="th-sm text-danger">Division:</th>
<th class="th-sm" *ngFor="let item of data;let index = index;">{{item?.user}}</th>
</tr>
</thead>
and body
<tbody>
<tr>
<th class="th-sm">Cash</th>
<ng-container *ngFor="let item of data; let i=index;">
<td class="th-sm">{{item?.cash}}</td>
</ng-container>
</tr>
<tr>
<th class="th-sm">Phone Pay</th>
<ng-container *ngFor="let item of data;let i=index;">
<td class="th-sm">{{item?.phonePay}}</td>
</ng-container>
</tr>
...
here's the code:
<nz-table #listTable nzSize="middle" [nzData]="data">
<thead>
<tr>
<th nzShowExpand></th>
<th>Location</th>
<th>Device</th>
<th class="tbWidth text-center">Actions</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-data [ngForOf]="listTable.data">
<tr>
<td nzShowExpand [(nzExpand)]="mapOfExpandData[data.id]"></td>
<td nzBreakWord [textContent]="data.name"></td>
<td nzBreakWord [textContent]="data.device"></td>
<td nzBreakWord class="text-center">
<nz-button-group>
<button nz-button nzType="primary" (click)="openFormDrawer(data)"><i nz-icon nzType="edit"
nzTheme="outline"></i></button>
<button nz-button nzType="danger" (click)="deleteRoomData(data)"><i nz-icon nzType="delete"
nzTheme="outline"></i></button>
</nz-button-group>
</td>
</tr>
<tr [nzExpand]="mapOfExpandData[data.id]">
<td></td>
<td colspan=7>
<nz-table>
<thead>
<tr>
<th nzWidth="25%">Location Code</th>
<th nzWidth="25%">Location Description</th>
<th nzWidth="25%">Device Code</th>
<th nzWidth="25%">Device Description</th>
</tr>
</thead>
<tbody>
<tr>
<td nzBreakWord [textContent]="data.locationCode"></td>
<td nzBreakWord [textContent]="data.locationDescription"></td>
<td nzBreakWord [textContent]="data.deviceCode"></td>
<td nzBreakWord [textContent]="data.deviceDescription"></td>
</tr>
</tbody>
</nz-table>
</td>
</tr>
</ng-template>
</tbody>
</nz-table>
Why the "NO DATA" keep showing?
How to remove the no data display in ng zorro?
cause there's a data but the "NO DATA" is always displaying, How to remove the "NO DATA" in angular zorro?
the expand is working, but when it click the expand the "NO DATA" also display, but there's a data inside the nz-table.
if there's a data it shouldn't display, if there's no data it will display. but even there's a data it also display.
Simply add [nzData]="['']" to your subtable
This messag is visible when nzData is empty in nz-table
<nz-table [nzData]="['']">
<thead>
<tr>
<th nzWidth="25%">Location Code</th>
<th nzWidth="25%">Location Description</th>
<th nzWidth="25%">Device Code</th>
<th nzWidth="25%">Device Description</th>
</tr>
</thead>
<tbody>
<tr>
<td nzBreakWord [textContent]="data.locationCode"></td>
<td nzBreakWord [textContent]="data.locationDescription"></td>
<td nzBreakWord [textContent]="data.deviceCode"></td>
<td nzBreakWord [textContent]="data.deviceDescription"></td>
</tr>
</tbody>
</nz-table>
Just add nzTemplateMode to your nz-table
<nz-table nzTemplateMode>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</tbody>
</nz-table>
I got 2 tables one of them has my products data such name,and bar-code.
The other one is empty and I want to copy products' table (selected rows only) into the second table via jQuery.
<table id="exampleTable1" style="max-width:50%;">
<thead>
<tr>
<th>bar-code</th>
<th>product name</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd selected">
<td class="sorting_1">545333456</td>
<td>Galaxy S9</td>
</tr>
<tr role="row" class="even selected">
<td class="sorting_1">876543</td>
<td>Galaxy S6</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">407654</td>
<td>SD 64G </td>
</tr>
<tr role="row" class="even selected">
<td class="sorting_1">876543</td>
<td>Galaxy S5</td>
<tr role="row" class="odd">
<td class="sorting_1">407654</td>
<td>Iphone 7 </td>
</tr>
</tbody>
</table>
My second table :
<table id="exampleTable2" style="max-width:50%;">
<thead>
<tr>
<th>bar-code</th>
<th>product name</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
<button class="btn btn-success" data-panelId="copy1" id="copy1">
Copy from exampleTable1 To exampleTable1
</button>
There are a few jQuery methods that make this easy to do, namely the .clone() and .each() method. You could achieve what you want by the following:
$('#copy1').click(function() {
$('tr.selected', '#exampleTable1').each(function() {
// For each "selected" row of table1 ..
var rowFromTable1 = $(this);
// .. Take a clone/copy of it ..
var clonedRowFromTable1 = rowFromTable1.clone();
// .. And append the cloned row to the tbody of table2
$('tbody', '#exampleTable2').append( clonedRowFromTable1 )
})
})
I am using sorttable to sort my columns in table.
Now I have a table 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 class="row-details">
<td>{.salesOrderId}</td>
<td colspan="4">
<table class="sortable draggable">
<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>{#math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
</tr>
{/items}
</tbody>
</table>
</td>
</tr>
{/orders}
</tbody>
</table>
Have you noted in the above mentioned table I have row details for each row?
Now when I click on a column header to sort it, I get the row details first and then I get all the main rows.
Here is how my table looks before sorting:
Here is how my table looks after sorting:
Is there any solution to this problem still using sorttable?
Update:
Here is sample jsFiddle
Row details are now sorted correctly as shown in the above jsFiddle. But now the problem is :
When you click on City column everything looks fine. Now if we again click on City Column, the row details are displayed before the actual rows which is wrong.
Please look at the images below for more information on problem:
After Clicking on City Column: (Which looks perfect)
After Clicking on City Column Again: (Expected for a developer but unexpected for a user)
I'am guessing but maybe the problem is the empty td beside the row details. I added first name as value and set css style display:none. Now the row details will be sorted also correctly.
Updated answer:
try to just nest the table inside the td like the below example.
Try this:
<table class="sortable">
<thead>
<tr>
<th>First Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishal</td>
<td> Sherathiya
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>67</td>
</tr>
</tbody>
</table>
<td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>80</td>
</tr>
<tr>
<td>M.E.</td>
<td>54</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Raj</td>
<td>Gosai</td>
</tr>
</tbody>
</table>