I am using primeNg row expansion feature.
Code is here : https://primefaces.org/primeng/showcase/#/table/rowexpansion
I have a requirement to display yellow background for odd rows and grey background for even rows, but the additional inserted row having the child table should not be included during calculation.
Consider the below html example, where user has expanded the first row. I do not want the rows with 'table-row-expand' class to be considered in the even/odd rule. Here I want first row to have yellow color, second row to have grey color and third row to have yellow again. The expanded row should not have any background.
Note that the .table-row-expand row gets added to the DOM only when user expands the corresponding row. Kindly help me with this problem.
.table-row:nth-child(odd) {
background-color: yellow;
}
.table-row:nth-child(even) {
background-color: grey;
}
<table>
<tr class='header-row'>
<th> </th>
</tr>
<tr class='table-row'>
<td> // first row (should be gray)</td>
</tr>
<tr class='table-row-expand'>
<td> // expanded row (should not be colored)
<div>
<p-table> // child table </p-table>
</div>
</td>
</tr>
<tr class='table-row'>
<td> // second row (should be yellow)</td>
</tr>
<tr class='table-row'>
<td> // third row (should be gray)</td>
</tr>
</table>
Save yourself a headache and drop in a wee bit 'o JavaScript. You may need to put this code in a function to be called when new rows are added.
.table-row.odd {
background-color: yellow;
}
.table-row.even {
background-color: grey;
}
<table>
<tr class='header-row'>
<th> </th>
</tr>
<tr class='table-row'>
<td> // first row (should be gray)</td>
</tr>
<tr class='table-row-expand'>
<td> // expanded row (should not be colored)
<div>
<p-table> // child table </p-table>
</div>
</td>
</tr>
<tr class='table-row'>
<td> // second row (should be yellow)</td>
</tr>
<tr class='table-row'>
<td> // third row (should be gray)</td>
</tr>
</table>
<script>
const styledRows = document.querySelectorAll('.table-row');
const isOdd = n => Boolean(n % 2); // returns true if n / 2 has a remainder
styledRows.forEach((row, i) => {
row.classList.add(isOdd(i) ? 'odd' : 'even');
});
</script>
Related
I have a source of data from a service like the following.
this.ateco2007 = [{code: this.anagrafica?.ateco2007?.code, description: this.anagrafica?.ateco2007?.description}]
if(this.anagrafica?.atecoSecondari && this.anagrafica?.atecoSecondari.length > 0) {
let i = 0;
for(let elem of this.anagrafica.atecoSecondari) {
this.atecoSecondari.push({
index: i++,
code: elem.code,
description: elem.description
});
}
...where ateco2007 has got always one elem, instead atecoSecondari can have multiple values. But there is always a pair code/description.
I want to show this data in a table. The first row will always be one row(ateco 2007), the other rows can be multiple.
I want a structure like this:
The first column will be always fix with the label, the second column shows the code and the last the description.
I tried the following, this is almost correct:
But I want to achieve something closer to the following:
As you see, there is a sort of rowspan and in the second and third columns, the rows have borders and are in the same line.
I tried the following code:
<p-table [value]="ateco2007" [autoLayout]="true">
<ng-template pTemplate="body">
<tr>
<td class="font-weight-bold"> {{'cliente.ateco'|translate}}</td>
<td>{{ateco2007[0]?.code}}</td>
<td class="text-left">{{ateco2007[0]?.description}}</td>
</tr>
<tr>
<td rowspan="atecoSecondari.length" class="font-weight-bold">
{{'cliente.atecoSecondari'|translate}}</td>
<td>
<table>
<tr *ngFor="let elem of atecoSecondari">
<td>{{elem.code}}</td>
</tr>
</table>
</td>
<td>
<table>
<tr *ngFor="let elem of atecoSecondari">
<td class="text-left">{{elem.description}}</td>
</tr>
</table>
</td>
</tr>
</ng-template>
But I don't know if it's the best way to build the table.
I solved it in this way
<p-table [value]="ateco2007" [autoLayout]="true">
<ng-template pTemplate="body" let-rowIndex="rowIndex">
<tr>
<td class="font-weight-bold"> {{'cliente.ateco'|translate}}</td>
<td>{{ateco2007[0]?.code}}</td>
<td class="text-left">{{ateco2007[0]?.description}}</td>
</tr>
<tr *ngFor="let elem of atecoSecondari">
<td *ngIf="rowIndex == elem.index" [attr.rowspan]="atecoSecondari.length" class="font-weight-bold">
{{'cliente.atecoSecondari'|translate}}
</td>
<td>{{elem.code}}</td>
<td class="text-left">{{elem.description}}</td>
</tr>
</ng-template>
</p-table>
I added the rowspan and changed the structure.
So I have a weird situation were I have a table footer that I only need to repeat once so I decided to just add the "footer" trs to the end of the tbody so it would only appear once at the end of the table and look like a footer without the repeating on each printed page.
<table>
<tbody>
#foreach(var item in Model.Items)
{
<tr><td>#item.Name</td></tr>
<tr><td>#item.Total</td></tr>
}
<tr>
<td>Total</td>
<td>#Model.Items.Sum(x => x.Total)</td>
</tr>
<tr>
<td>Discount</td>
<td>#(Model.Items.Sum(x => x.Total) / 50)</td>
</tr>
</tbody>
</table>
This was fine until Model.Items had enough rows that it pushed the second row of the footer onto the next page when I need to keep the two footer rows together.
I've also tried using the actual tfoot tag like so with a page-break-inside:avoid style.
<table>
<tbody>
#foreach (var item in Model.Items)
{
<tr><td>#item.Name</td></tr>
<tr><td>#item.Total</td></tr>
}
</tbody>
<tfoot style="page-break-inside:avoid;">
<tr>
<td>Total</td>
<td>#Model.Items.Sum(x => x.Total)</td>
</tr>
<tr>
<td>Discount</td>
<td>#(Model.Items.Sum(x => x.Total) / 50)</td>
</tr>
</tfoot>
</table>
This kept the footer together but its now repeating on each page instead of once. Someone on another Stack Overflow question suggested using the following style on the tfoot to stop it repeating which worked, but now it ignores the page-break-inside:avoid style.
<tfoot style="display: table-row-group"></tfoot>
Does anyone know how to get a footer to appear once and avoid breaking over multiple printed pages?
I got it working but I had to apply a few styles to make it looks like one table. I put the original footer HTML into a tr > td > table like so:
<table>
<tbody>
#foreach (var item in Model.Items)
{
<tr><td>#item.Name</td></tr>
<tr><td>#item.Total</td></tr>
}
<tr style="page-break-inside:avoid;">
<td colspan="2">
<table>
<tr>
<td>Total</td>
<td>#Model.Items.Sum(x => x.Total)</td>
</tr>
<tr>
<td>Discount</td>
<td>#(Model.Items.Sum(x => x.Total) / 50)</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
This allowed the footer to stay together while only appearing once at the end of the page.
I need the html table for the following table structure.
This is something similar I have tried till now: (this is a .cshtml view, which takes a model as input)
<table>
<tbody>
<tr>
<th>Code Number of Equipment</th>
<th>Name of Equipment</th>
<th>Brand</th>
<th>Model</th>
<th>Quantity</th>
<th>Check Item</th>
<th>Note</th>
<th>Quoted Price</th>
</tr>
#foreach (var equipment in Model.Equipments)
{
<tr>
<td>#equipment.Code</td>
<td>#equipment.Name</td>
<td>#equipment.EquipmentBrand</td>
<td>#equipment.EquipmentModel</td>
<td>#String.Format("{0:n0}", equipment.Quantity)</td>
<td colspan="2">
<table >
<tbody >
#foreach (var item in equipment.EligibilityChecksheets)
{
<tr>
<td>#item.CheckListItem</td>
<td>#item.Note</td>
</tr>
}
</tbody>
</table>
</td>
<td>#String.Format("{0:n0}", Model.Currency + " " + equipment.UnitPrice)</td>
</tr>
}
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>Total : </th>
<th>#String.Format("{0:n0}", Model.Currency + " " + Model.TotalPrice)</th>
</tr>
</tbody>
</table>
The problem with this code is - there is a gap between <td> and the inner table. I want to do this work using rowspan - is it possible to do it for this scenario?
When you are making an HTML table, the table rows of the table are constructed sequentially in HTML; i.e.- once you create a new <tr>, you can't add new <td> or other table elements in any previous <tr> directly from HTML.
For this reason, any variant of this approach will not work as you are expecting:
<table>
foreach(parent-row in parent-table)
{
<tr>
<!-- parent table data of each row in "td"s with rowspan -->
foreach(child-row in child-table)
{
<tr>
<!-- child table data of each row in "td"s without rowspan -->
</tr>
}
<!-- remaining parent table data of each row in "td"s with rowspan -->
</tr>
}
</table>
One thing I can think of about how you can do what you are asking for is -
completely construct the first row - including the first row of the child table. After constructing that row, you can construct the remaining rows of the child table for that particular parent table row.
In code, the approach will be something like this (considering rowspan = 'number of rows in child table for a particular row in the parent table'):
<table>
foreach(parent-row in parent-table)
{
<tr>
<!-- parent table data of each row in "td"s with rowspan -->
foreach(child-row in child-table) // this loop will iterate only once
{
<!-- child table data of first row in "td"s without rowspan -->
}
<!-- remaining parent table data of each row in "td"s with rowspan -->
</tr>
<!-- parent table row with first row of child table for that parent table row created -->
<!-- creating the remaining rows of the child table -->
foreach(child-row in child-table) // this loop will iterate (rowspan - 1) times
{
<tr>
<!-- child table data of each row except first row in "td"s without rowspan -->
</tr>
}
} // parent table row with its corresponding child table fully constructed
</table>
Basically I am creating a data grid that displays data from different tables in database.I am using ASP.NET MVC4 for this.
Following is how my part of my code looks:
<table class="myTable">
<tbody>
#foreach (var item in Model.sets)
{
<tr class="parent" data-level="0">
<td>
#item.setName
#* Here my logic would go*#
</td>
</tr>
}
So after displaying the rows of name of sets,in the next column I would want to display the elements that belong to that set.So I wrote another for loop in <td></td> that would loop through the Model.elements and check if it belongs to that set and display it.But I am getting "Element td cannot be nested within element td " validation error.
So how can I add data into rows of the next column?
Put your logic below the first end td tags instead. You can't put td tags inside other td tags; a series of sibling td tags make up a row.
If you want each separate piece of data in its own column:
#foreach (var item in Model.sets)
{
<tr class="parent" data-level="0">
<td>
#item.setName
</td>
#foreach (var element in Model.elements)
{
<td>
#*logic here*#
</td>
}
</tr>
If you want all your content inside the same cell, then you want:
#foreach (var item in Model.sets)
{
<tr class="parent" data-level="0">
<td>
#item.setName
</td>
<td>
#foreach (var element in Model.elements)
{
#*logic here*#
}
</td>
</tr>
}
I have a HTML table. It has 3 columns. The first column is name. 2nd is School and 3rd is HomeAddress.
The table loads records from the DB, therefore the number of rows may vary from time to time. The 3rd Column (HomeAddress) should have no rows, while the other 2 columns (name and school) can have more rows. How should i model the HTML table to have the 3rd column with no rows ?
<table border="1">
<tr>
<th>
Name
</th>
<th>
School
</th>
<th>
Home Address
</th>
</tr>
#foreach (var i in Model.allPpl)
{
<tr>
<td>
#Html.DisplayFor(modelItem => i.name)
</td>
<td>
#Html.DisplayFor(modelItem => i.school)
</td>
<td>
// THERE SHOULDN'T BE ANY ROWS FOR THIS COLUMN, JUST ONE COLUMN FOR THE WHOLE TABLE
</td>
</tr>
}
Rowspan attribute is your only friend.
Try <td rowspan="rowcount"></td> for third column where rowcount is the no. of rows returned.
And modify your foreach loop as follows:
#bool flag=false;
#foreach (var i in Model.allPpl)
{
<tr>
<td>
#Html.DisplayFor(modelItem => i.name)
</td>
<td>
#Html.DisplayFor(modelItem => i.school)
</td>
if(!flag){
<td rowspan="#Model.allPpl.count">
// THERE SHOULDN'T BE ANY ROWS FOR THIS COLUMN, JUST ONE COLUMN FOR THE WHOLE TABLE
</td>
}flag=true;
</tr>
}
Note: I haven't tested this razor view code so please take care of compiler error if shows any.
I think these entries will help you:
http://www.w3schools.com/tags/att_td_rowspan.asp
http://www.w3schools.com/tags/att_td_colspan.asp