I have a table like this:
<table data-test='container-component-table'>
<tr data-test='container-component-table-column-names'>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</table>
I have tried to get the children of container-component-table-column-names by writing
expect(wrapper.find('container-component-table-column-names').children().length).toBe(3)
but it not working. It found zero children elements. Anyone know why?
Related
Using React Bootstrap table, I'm getting the warning Warning: Each child in a list should have a unique "key" prop. I've read about how this is necessary for lists, but not sure where I'm supposed to set a key for a Table? My table looks something like this
<Table size="sm" responsive="sm" bordered hover striped>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody>
{ histories.map((h) => (
<tr>
<th>{ h.col1} </th>
<th> { h.col2}</th>
<th> { h.col3}</th>
<th>{ h.col4}</th>
</tr>
)) }
</tbody>
</Table>
This would work is there's an id for histories.
{ histories.map((h) => (
<tr key={h.id}>
<th>{ h.col1} </th>
<th> { h.col2}</th>
<th> { h.col3}</th>
<th>{ h.col4}</th>
</tr>
)) }
The key can really be anything (even h.col1 if you like), as long as it's unique within that list. It's not super important to have (hence the warning instead of error), but it's definitely is good practice when you're iterating over some data and rendering a list from it, in order to prevent some unpredictable behavior, and to help React do its thing properly.
I want to print some values of an array which is inside another array like the first capture in a Twig, but I got an error:
"Notice: Array to string conversion".
I prove with a join but the result isn't what I want, I expected the values of the second array become separated by a <td></td> inside a table and I got a result like is on the second capture in the first table.
This is my current template:
<table class="table-bordered" width="100%">
<tbody class="text-center">
<tr>
<th>Usuarios</th>
<th>Preguntas</th>
</tr>
{% for reporte in discriminacionPregunta %}
<tr></tr>
<tr>
<th>{{reporte.cedula}}</th>
<td><b>{{reporte.nombrepregunta|join('~ ~')}}</b></td>
</tr>
<tr>
<th></th>
<td>{{reporte.respuestas|join('~ ~')}}</td>
</tr>
{%endfor%}
</tbody>
</table>
Here is the image of the result:
If someone could help me on that I would really appreciate it.
I'm trying to display an object of an object in an array, I've been hitting my head against the wall since I cant change the backend.
this is what I got so far, M01, M02, M03... might refer to months since we are November there are 11 however if it was February id be only M01 and M02. since I got a property of an object I cant loop it on a second for and I'm having a lot of trouble with it
this is my view
<div *ngIf="estados" class="table-responsive col-lg-12 tablilla">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th></th>
<th *ngFor="let month of listaMonthsNames">{{month}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let estado of estados">
<td>{{estado.nom_item}}</td>
<td *ngFor="let month of estado.M[0]">{{month}}</td>
</tr>
</tbody>
</table>
</div>
I think this will help you :
There is no direct way to access Object from the Template side so,
All you need to do is provide Object.keys access to the Template side by this way from Component :
// Component Side :
objectKeys = Object.keys;
// Template Side :
<td *ngFor="let key of objectKeys(estado.M)">
Key: {{key}}, value: {{estado.M[key]}}
</td>
You can read more about the Object.keys HERE
Since examples always tell more then just words here is what I would like to do in another language
<tr>
<c:forEach items="${items}" var="item">
<td>...</td>
<td>...</td>
<td>...</td>
<c:if test="${item.showWarning}">
</tr><tr><td colspan="3">${item.warning}</td>
</c:if>
</tr>
So this will loop over a set of items and show some properties of these items. If there is a warning, a new row will be added underneath the current row in which the warning will be shown. However, how can I do this in angularJs? If I put a ng-repeat on the tr, it will stop at the first end tag of tr. I have read on some other threads that this is not very easily done, but how can it be done? And yes, I really do want to use a table. Here is my contrived example with angularjs which is obviously not working as I would like it to. Any pointers how this can be done?
JSBin example with tr-ng-repeat
Currently (1.0.7/1.1.5) you can't output data outside the ng-repeat, but version 1.2(see youtube video AngularJS 1.2 and Beyond at 17:30) will bring the following syntax(adapted to your example):
<tr ng-repeat-start="item in items">
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr ng-repeat-end ng-show="item.showWarning">
<td colspan="3">{{item.warning}}</td>
</tr>
The idea is that whatever is between -start and -end will be repeated including the -end element.
One solution that I can think of is having multiple tbody tags within the same table. Here is a discussion on the use of multiple tbody tags within the same table.
So, for your issue, you could have the following setup:
<table ng-controller="ItemController">
<thead>
<th>Name</th>
<th>Description</th>
<th>warning?</th>
</thead>
<tbody ng-repeat="item in items">
<tr>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.warning}}</td>
</tr>
<tr ng-show="item.warning">
<td colspan="3" style="text-align: center">Warning !!!</td>
</tr>
</tbody>
</table>
Repeat the table body as many times as there are entries for the table and within it have two rows - one to actually display the row entry and one to be displayed conditionally.
You can repeat over the tbody
<tbody ng-repeat="item in items">
<tr>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.warning}}</td>
</tr>
<tr ng-show="item.warning">
<td colspan="3">Warning !!!</td>
</tr>
</tbody>
Also you do not need to wrap the ng-show expression in {{}}, you can just use item.warning
I'm trying to use the JQuery tablesorter plugin working along with Angular.
Currently if you click on any column for sorting the entire width and structure of the table changes and a new row with the ng-repeat expressions is created.
$(document).ready(function() {
$("#check").tablesorter();
});
<table id="check" class="table table-bordered table-striped table-condensed table-hover tablesorter" cellspacing="1">
<thead>
<tr>
<th class="header">Product Code#</th>
<th class="header">Item Description#</th>
<th class="header">Unit Cost#</th>
</tr>
</thead>
<tbody>
<tr ng:repeat="i in itemresponse" >
<td><a href="#/ItemSearch/{{i._ItemID}}" >{{i._ItemID}}</a></td>
<td>{{i.PrimaryInformation._ShortDescription}}</td>
<td>{{i.PrimaryInformation._UnitCost}}</td>
</tr>
</tbody>
</table>
You're doing it wrong.
If you want to sort rows in a table with AngularJS, you should use the orderBy filter. There is no need to include another framework. Once you have made that leap, you can find a plethora of samples online (or on SO).
See for example this fiddle: http://jsfiddle.net/uRPSL/1/
Fortunately there's an Angular Module called ng-table.