how to add table with nested values - thymeleaf

I want to display terms attribute using thymeleaf. I tried like
<table>
<tr th:each="term: ${contractMap.contractTerms}">
<td><table>
<tr th:each="termRow: ${term.rows}">
<td><table>
<tr th:each="atr: ${termRow.attributes}">
<td th:text="${atr.value}"></td>
</tr ></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
But it is not working.

Related

How to hide the Property name

It's a lot that I used MVC but I need to create a widget using Abp.IO,
What I currently got is
But I want to hide this SenzaAgente and ConAgente, I think this is generated since I use abp-input and it get the value of the property, does exist a way of hiding it and gaining the space (The SENZA Agente on the left should be on the same line of the number)
The code I used is
<abp-table hoverable-rows="true" responsive-sm="true">
<tbody>
<tr>
<td></td>
<td>% RINCARO</td>
</tr>
<tr>
<td>SENZA Agente</td>
<td><abp-input readonly="true" asp-for="#Model.Rincaro.SenzaAgente"></abp-input></td>
</tr>
<tr>
<td>CON Agente</td>
<td><abp-input readonly="true" asp-for="#Model.Rincaro.ConAgente"></abp-input></td>
</tr>
</tbody>
</abp-table>

You can use suppress-label="true" attribute
<abp-table hoverable-rows="true" responsive-sm="true">
<tbody>
<tr>
<td></td>
<td>% RINCARO</td>
</tr>
<tr>
<td>SENZA Agente</td>
<td><abp-input suppress-label="true" readonly="true" asp-for="#Model.Rincaro.SenzaAgente"></abp-input></td>
</tr>
<tr>
<td>CON Agente</td>
<td><abp-input suppress-label="true" readonly="true" asp-for="#Model.Rincaro.ConAgente"></abp-input></td>
</tr>
</tbody>
</abp-table>

tablesorter data-math-filter returns no results when given a valid css selector

I'm using Mottie's tablesorter plugin with the Math extension. I have a conditionally formatted table - the categories of conditional formatting are indicated in a data-color attribute on the data cell.
In the footer, I have several rows that summarize the values of the conditional formatting. The footer cells are decorated with data-math-filter="[data-color='color1']".
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td data-color='red' style='background-color:red'>
3
</td>
<td data-color='blue' style='background-color:blue'>
7
</td>
</tr>
<tr>
<td data-color='green' style='background-color:green'>
6
</td>
<td data-color='red' style='background-color:red'>
4
</td>
</tbody>
<tfoot>
<tr>
<td data-math-filter='[data-color="red"]' data-math='col-sum'></td>
<td data-math-filter='[data-color="red"]' data-math='col-sum'></td>
</tr>
<tr>
<td data-math-filter='[data-color="green"]' data-math='col-sum'></td>
<td data-math-filter='[data-color="green"]' data-math='col-sum'></td>
</tr>
<tr>
<td data-math-filter='[data-color="blue"]' data-math='col-sum'></td>
<td data-math-filter='[data-color="blue"]' data-math='col-sum'></td>
</tr>
</tfoot>
</table>
My reading of the docs leads me to believe that the math function will filter for the data-elements - but it doesn't seem to work. I've tried a bunch of different CSS filters - nothing seems to work.
What am I doing wrong?

How to implement bootstrap accordion in table in MVC?

I want to implement bootstrap accordion in my application. Currently, If I click on any rows, it gives me first #Html.Raw(item.D) and #Html.Raw(item.B).
What i want is that, if i click on 2nd row then its respective #Html.Raw(item.D) and #Html.Raw(item.B) should displayed and so on.
Please suggest me where I am going wrong.
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#12345-cores">
<td align="left">
#Html.Raw(item.H)
</td>
<td align="right">
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="accordion-body collapse" id="12345-cores">
<table>
<tbody>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td></td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</tbody>
</table>
</td>
</tr>
}
</table>

You need to specify id uniquely, to do so you need to append raw id(or something unique for each row) to id and data-target attributes,
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#12345-cores#(item.id)">
<td align="left">
#Html.Raw(item.H)
</td>
<td align="right">
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="accordion-body collapse" id="12345-cores#(item.id)">
<table>
<tbody>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td></td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</tbody>
</table>
</td>
</tr>
}
</table>
updated : data-target="#12345-cores#(item.id) & id="12345-cores#(item.id)"

How to set the highchart and the table horizontally?

This is what my highchart looks like atm
I kinda want the chart to be on the right side while the table to be on the left
this is my html:
<div id="words" style="width:70%;float:left;">
<table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column">
<thead>
<tr>
<th>Word</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>icon</td>
<td>12</td>
</tr>
<tr>
<td>text</td>
<td>12</td>
</tr>
<tr>
<td>your</td>
<td>9</td>
</tr>
<tr>
<td>post</td>
<td>6</td>
</tr>
<tr>
<td>document</td>
<td>5</td>
</tr>
<tr>
<td>with</td>
<td>5</td>
</tr>
<tr>
<td>parentNode</td>
<td>4</td>
</tr>
<tr>
<td>email</td>
<td>4</td>
</tr>
<tr>
<td>com"</td>
<td>4</td>
</tr>
<tr>
<td>googletag</td>
<td>3</td>
</tr>
</tbody>
</table>
What should i do to achieve such output?

If you can change HTML, then simply put table before Highcharts container and set proper styles (float, width). For example you can also use two divs: http://jsfiddle.net/68qdew8g/
<div style="float: left; width: 30%;">
<table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column">
...
</table>
</div>
<div id="words" style="width:70%;float:left;"></div>

Bind list of maps to a table in dart

I have defined the following data model in dart file:
#observable List alist = toObservable([{'rel':'self', 'name':'John'},
{'rel':'Father', 'name':'tom'},
{'rel':'Mother', 'name':'jane'}]);
and table in html as follows:
<table id="summaryTable">
<thead>
<tr>
<th>Name</th>
<th>Ralationship to Me</th>
<th>Update History</th>
<th>Remove Relative</th>
</tr>
</thead>
<tr repeat = "{{p in alist}}">
<td>
{{p['name']}}
</td>
<td>
{{p['rel']}}
</td>
<td>
<button on-click="{{updateClicked}}">Update</button>
</td>
<td>
</td>
</tr>
</table>
The table is not getting populated. What should be changed?

It's hard to tell as you didn't provide much code but at least the template is missing in
<tr template repeat="{{p in alist}}">

Resources