PrimeNg TurboTable colgroup dynamic colspan - angular5

How can I assign variable to primeng TurboTable ColGroup colspan property.
<ng-template pTemplate="header">
<tr>
<th rowspan="3">Brand</th>
<th colspan="4">Sale Rate</th>
</tr>
<tr>
<th colspan="colSpanCount">Sales</th>
<th colspan="2">Profits</th>
</tr>
<tr>
<th>Last Year</th>
<th>This Year</th>
<th>Last Year</th>
<th>This Year</th>
</tr>
</ng-template>
In above example, I want to bind colSpanCount variable to colspan attribute of p-table.


I think, I have found an answer myself. We can set [attr.colspan]="colSpanCount" property to set colspan dynamically.
<ng-template pTemplate="header">
<tr>
<th rowspan="3">Brand</th>
<th colspan="4">Sale Rate</th>
</tr>
<tr>
<th [attr.colspan]="colSpanCount">Sales</th>
<th colspan="2">Profits</th>
</tr>
<tr>
<th>Last Year</th>
<th>This Year</th>
<th>Last Year</th>
<th>This Year</th>
</tr>
</ng-template>


As you've discovered, you can change colspan to [attr.colspan].
Another solution is to change colspan to [colSpan].
See this answer for a deeper explanation

Related

JSTL table colspan merge

By clicking the above link, I will generate a screen to request.
<div class="sub_contents_wrap">
<div class="btn_div" style="width:100%;">
<div class="left_div controll_btn p0">
<div>* 상세현황</div>
</div>
</div>
<div id="gridD" class="data_grid k-grid k-widget" data-role="grid" style="height: 500px;">
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap" data-role="resizable">
<table role="grid" style="width:100%;">
<thead role="rowgroup">
<tr align="center" style="font-size: 15px;">
<th scope="col" bgcolor="CDCDCD" rowspan="2">NO</th>
<th scope="col" bgcolor="CDCDCD" rowspan="2">부서</th>
<th scope="col" bgcolor="CDCDCD" rowspan="2">이름</th>
<th scope="col" bgcolor="CDCDCD" rowspan="2">직급</th>
<th scope="col" bgcolor="CDCDCD"rowspan="2">시간단가</th>
<th scope="col" bgcolor="CDCDCD" colspan="6">연차수당</th>
<th scope="col" bgcolor="CDCDCD" colspan="5">보상수당</th>
<th scope="col" bgcolor="CDCDCD" colspan="5">유급수당</th>
</tr>
<tr role="row">
<th scope="col" bgcolor="E6E6E6">기본</th>
<th scope="col" bgcolor="E6E6E6">조정</th>
<th scope="col" bgcolor="E6E6E6">사용</th>
<th scope="col" bgcolor="E6E6E6">사용조정</th>
<th scope="col" bgcolor="E6E6E6">잔여</th>
<th scope="col" bgcolor="E6E6E6">연차수당</th>
<th scope="col" bgcolor="E6E6E6">생성</th>
<th scope="col" bgcolor="E6E6E6">이월</th>
<th scope="col" bgcolor="E6E6E6">사용</th>
<th scope="col" bgcolor="E6E6E6">잔여</th>
<th scope="col" bgcolor="E6E6E6">보상수당</th>
<th scope="col" bgcolor="E6E6E6">생성</th>
<th scope="col" bgcolor="E6E6E6">이월</th>
<th scope="col" bgcolor="E6E6E6">사용</th>
<th scope="col" bgcolor="E6E6E6">잔여</th>
<th scope="col" bgcolor="E6E6E6">유급수당</th>
</tr>
</thead>
<tbody>
<c:set var="pass_cnt" value="0"/>
<c:set var="spanCnt" value="0"/>
<c:forEach var='item' items="${list}" varStatus ="status">
<td>${status.index+1}</td>
<td>${item.dept_name}</td>
<td>${item.emp_name}</td>
<td>${item.position_name}</td>
<td></td>
<td>${item.annv_basic_day}</td>
<td>${item.annv_abjust_day}</td>
<td>${item.annv_used_day}</td>
<td>${item.annv_used_abjust_day}</td>
<td>${item.annv_remain}</td>
<td></td>
<td>${item.exp_vacate_day}</td>
<td></td>
<td>${item.exp_vacate_used_day}</td>
<td>${item.exp_vacate_remain}</td>
<td></td>
<td>${item.paid_vacate_day}</td>
<td>${item.paid_vacation_carried}</td>
<td>${item.paid_vacate_used_day}</td>
<td>${item.paid_vacate_remain}</td>
<td></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
==============================================================================
Using jstl TAG I want to progress colspan Merge as shown on the screen above.
Please help me.
The above code is to read the data of Grid and read it into Excel file when clicking Button on the Grid screen. Therefore, it can not be created with JavaScript. Help me.

Simple table with colspan giving errors with datatables

I have this simple html table
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
<tbody>
<tr>
<td>MyName</td>
<td onclick="delete()">X</td>
<td onclick="update()">U</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#mytable').DataTable();
});
</script>
If i open this on the browser i get
"Cannot read property 'mData' of undefined".
I don't undestand where is the problem.. I am following the official example: https://datatables.net/examples/basic_init/complex_header.html
Thank you all!

your html have unmatched number of columns, notice the first row of your header has colspan while the second row doesn't.
what you can do is to provide a rowspan.
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
here's a link to the datatables example of complex headers. https://datatables.net/examples/basic_init/complex_header.html

Move the content, not text, of a table's cell to the right

I have a series of nested tables, below I created a jsfiddle structure.
I was using the arab notation, ( direction: rtl ) which is obviously wrong. I can not find the right css that moves the content to the right.
I wish to recreate the same structure.
Without using direction: rtl; because this makes the text reversed too. Borders are only to highlight it better.
Thanks to anyone who can help me
https://jsfiddle.net/wo77wgL5/
<table width = "800px" border=3 class="centralTable">
<tr>
<th></th>
<th></th>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tbody>
<tr>
<td> </td>
<td> </td>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
<td>Text 4</td>
</tr>
<tr>
<td colspan=6 style= "direction:rtl;">
<table width = "500px" border=1 class="toTheRight">
<tr>
<th></th>
<th></th>
<th>header 11</th>
<th>header 22</th>
<th>header 33</th>
<th>header 44</th>
</tr>
<tbody>
<tr>
<td> </td>
<td> </td>
<td>Text 11</td>
<td>Text 22</td>
<td>Text 33</td>
<td>Text 44</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

You can use <td align="right">
https://jsfiddle.net/msp5m4k9

vb.net: Get data from Xelement <table></table>

I have loaded a Xelement from my SharePoint site.
Dim elTable2 As XElement = <table border="1" id="table2" style="font-size:1em;border-collapse:collapse;display:inline;width:100%">
<tbody>
<tr class="ms-rteTableHeaderRow-default" style="text-align:center">
<th class="ms-rteTableHeaderFirstCol-default">​</th>
<th class="ms-rteTableHeaderOddCol-default">LAN IP​</th>
<th class="ms-rteTableHeaderEvenCol-default">Username​</th>
<th class="ms-rteTableHeaderOddCol-default">Password​</th>
<th class="ms-rteTableHeaderEvenCol-default">Port​</th>
<th class="ms-rteTableHeaderOddCol-default">OS​</th>
<th class="ms-rteTableHeaderEvenCol-default">Extra Info​</th>
</tr>
<tr class="ms-rteTableOddRow-default" style="text-align:center">
<th class="ms-rteTableFirstCol-default">Netasq</th>
<td class="ms-rteTableOddCol-default"></td>
<td class="ms-rteTableEvenCol-default"></td>
<td class="ms-rteTableOddCol-default">​</td>
<td class="ms-rteTableEvenCol-default">​</td>
<td class="ms-rteTableOddCol-default">​</td>
<td class="ms-rteTableEvenCol-default">​</td>
</tr>
</tbody>
</table>
The table will have an unknown number of rows. Can I loop trough all the rows and check what data is in the first column?

You could leverage Html Agility Pack for that purpose. It is a .NET code library that allows to parse HTML content and supports plain XPATH or XSLT.
Example
Dim table As XElement = <table border="1" id="table2" style="font-size:1em;border-collapse:collapse;display:inline;width:100%">
<tbody>
<tr class="ms-rteTableHeaderRow-default" style="text-align:center">
<th class="ms-rteTableHeaderFirstCol-default">​Val</th>
<th class="ms-rteTableHeaderOddCol-default">LAN IP​</th>
<th class="ms-rteTableHeaderEvenCol-default">Username​</th>
<th class="ms-rteTableHeaderOddCol-default">Password​</th>
<th class="ms-rteTableHeaderEvenCol-default">Port​</th>
<th class="ms-rteTableHeaderOddCol-default">OS​</th>
<th class="ms-rteTableHeaderEvenCol-default">Extra Info​</th>
</tr>
<tr class="ms-rteTableOddRow-default" style="text-align:center">
<td class="ms-rteTableFirstCol-default">Netasq</td>
<td class="ms-rteTableOddCol-default"></td>
<td class="ms-rteTableEvenCol-default"></td>
<td class="ms-rteTableOddCol-default">​</td>
<td class="ms-rteTableEvenCol-default">​</td>
<td class="ms-rteTableOddCol-default">​</td>
<td class="ms-rteTableEvenCol-default">​</td>
</tr>
</tbody>
</table>
Dim html = New HtmlDocument()
html.LoadHtml(table.ToString())
For Each row In html.DocumentNode.SelectNodes("//tr[position()>1]") 'XPath expression to select table rows and skip table header
Dim cell As HtmlNode = row.SelectSingleNode("td[1]") 'Get cell for first column
Console.WriteLine(cell.InnerText)
Next

Nested tables with related parent content

Having a semantics issue. I have a basic table with a standard header and footer. Each row contains an order, beneath each row I need to display another table, that will contain a break down of costs relating to that order. Additionally, these inner tables will be displayed with a jQuery accordion to hide and show when required (but I'm just concentrating on the HTML for now)
How can I semantically approach this in HTML?
<table>
<thead>
<th>Package number</th>
<th>Date placed</th>
<th>Placed by</th>
<th>Total cost</th>
</thead>
<tr>
<td>1</td>
<td>Weds</td>
<td>Jonno</td>
<td>£15</td>
</tr>
<tr>
<td colspan="4">
<table>
<thead>
<th>Part number</th>
<th>Description</th>
<th>Qty shipped</th>
<th>Weight</th>
</thead>
<tbody>
<td>18293</td>
<td>Blah blah blah</td>
<td>72</td>
<td>20Kg</td>
</tbody>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Thurs</td>
<td>Jonno</td>
<td>£1</td>
</tr>
<tr>
<td>3</td>
<td>Fri</td>
<td>Jonno</td>
<td>£7</td>
</tr>
</table>
Here's a fiddle: http://jsfiddle.net/yuW7f/ - The problem here is that the row containing the inner table, is totally unrelated to the order row

If you are looking for a parent element you can use to group related rows, you can use <tbody> elements. A table can have multiple <tbody> elements:
<table>
<thead>
<tr>
<th>Package number</th>
<th>Date placed</th>
<th>Placed by</th>
<th>Total cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Weds</td>
<td>Jonno</td>
<td>£15</td>
</tr>
<tr>
<td colspan="4">
<table>
<thead>
<tr>
<th>Part number</th>
<th>Description</th>
<th>Qty shipped</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>18293</td>
<td>Blah blah blah</td>
<td>72</td>
<td>20Kg</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tr>
<td>2</td>
<td>Thurs</td>
<td>Jonno</td>
<td>£1</td>
</tr>
<tr>
<td>3</td>
<td>Fri</td>
<td>Jonno</td>
<td>£7</td>
</tr>
</table>
Whether or not that makes your code more semantically correct is debatable. You could also give your rows classes to indicate whether the row is a summary row or a detail row, or attributes to indicate relationships to other rows. Semantically, it seems fine as it is to me.
By the way, you are missing some <tr> elements. A <tbody>, <thead>, or <tfoot> element does not replace a <tr> element.