So why is react complaining that I cannot have a 'tr' as a child of a 'td'?
<tr>
<td colSpan={2}>
<tr>
<td>
<Some picture>
</td>
<td>
<some content>
</td>
</tr>
<tr>
<td colSpan={2}>
<p>Paragraph stuff</p>
</td>
</tr>
</td>
</tr>
Maybe I have to put another table or something?
Yes, you'll need this mark up:
<table>
<tbody>
<tr>
<td colspan={2}>
<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan={2}>
<p>Paragraph stuff</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
It is not valid markup to have a nested <tr> within a <td>. Use another table to layout it.
According to https://github.com/facebook/react/issues/5652 you will need to wrap your table contents in a tbody:
Browsers need the <tbody> tag. If it is not in your code, then the
browser will automatically insert it. This will work fine on first
render, but when the table gets updated, then the DOM tree is
different from what React expects. This can give strange bugs,
therefore React warns you to insert the <tbody>. It is a really
helpful warning.
Thanks #Stefan Dragnev
Related
I need to bind data with row values to a table, when i'm using the data-ng-repeat-start and data-ng-repeat-end data is not binding correct format.
<table id="tbl">
<tbody>
<tr data-ng-repeat="data in RDetails" data-ng-if="Values(data)">
<td data-ng-repeat-start="d in data.Dtls" data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.V}}</span>
</td>
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.VP}}</span>
</td>
<td data-ng-if="ShowValuesBL(d)">
<span>{{d.AV}}</span>
</td>
<td data-ng-repeat-end="d in data.Dtls" data-ng-if="Values(d)">
<span>{{d.AVP}}</span>
</td>
</tr>
</tbody>
</table>
when I use the above condition table showing the same values how can i do this. Where i did mistake please help me on this Please see image here i am getting repeated values.
If I understand your problem correctly - just presenting content of every RDetails.Dtls element as a table row - here is solution:
<table id="tbl">
<tbody data-ng-repeat="data in RDetails">
<tr data-ng-repeat="d in data.Dtls" data-ng-if="Values(data)">
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.V}}</span>
</td>
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.VP}}</span>
</td>
<td data-ng-if="ShowValuesBL(d)">
<span>{{d.AV}}</span>
</td>
<td data-ng-if="Values(d)">
<span>{{d.AVP}}</span>
</td>
</tr>
</tbody>
</table>
<tbody ng-repeat="obj1 in personalProfileCtrl.workArray">
<tr>
<td class="tg-llyw">{{obj1.role}}</td>
<td class="tg-llyw">{{obj1.name}}</td>
<td class="tg-llyw" colspan="2">
{{obj1.start_date}} -{{obj1.end_date}}
</td>
</tr>
<tr ng-repeat="obj2 in personalProfileCtrl.workAchievementsArray"
ng-if="obj2.place=='{obj1.name}'">
<td class="tg-0pkys">{{obj2.title}}</td>
<td class="tg-0pky" colspan="6">
{{obj2.achievements_description}}
</td>
</tr>
</tbody>
This line of code is not working ng-if="obj2.place=='{obj1.name}'"
Here profileCtrl is controller
workAchievement is array of object
workArray is also a array of object
You do not need to add the extra '{}' to the obj1.name, so ng-if="obj2.place==obj1.name" should work fine.
<tr ng-repeat="obj2 in personalProfileCtrl.workAchievementsArray"
̶n̶g̶-̶i̶f̶=̶"̶o̶b̶j̶2̶.̶p̶l̶a̶c̶e̶=̶=̶'̶{̶o̶b̶j̶1̶.̶n̶a̶m̶e̶}̶'̶"̶
ng-if="obj2.place == obj1.name">
<td class="tg-0pkys">{{obj2.title}}</td>
<td class="tg-0pky" colspan="6">
{{obj2.achievements_description}}
</td>
</tr>
I am using nested array in angularjs and bootstrap and that is dynamically coming from server side code.In that displaying table format using rowspan but it is working two level nested array only need to have more level.I tried plunker code.In this example using sample only but I need more levels
<table class="table table-bordered">
<thead>
<tr>
<td>check</td>
<th>Member</th>
<th>Age</th>
<th>Branch</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr ng-repeat="member in group.members">
<td rowspan="{{group.members.length}}" ng-hide="$index>0">
{{group.id}}
</td>
<td >
{{member.name}}
</td>
<td >
{{member.age}}
</td>
<td >
<table >
<tbody>
<tr ng-repeat="stu in member.student" >
<td >{{stu.Branch}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
FIDDLE
You did not add class="table" for inner table.
Also give padding:0px to td
Fiddle
<td style="padding:0px">
<table class="table">
<tbody>
<tr ng-repeat="stu in member.student" >
<td>{{stu.Branch}}</td>
</tr>
</tbody>
</table>
</td>
var dataList = [{Id:1,Name: "xyz",Select: true},
{Id:2,Name: "PQR",Select : false }];
var headerList = [{"ID","Name","null"}]
i got this value from server side i can not make any changes in this array list.
My html code is
<table class= "table table-bordered">
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataList">
<td ng-repeat="value in data" ng-if="!$last">
{{value}}
</td>
</tr>
</tbody>
</table>
I don't want to generate "Select" column. code works propely , but when bordered class applies on table one blank column is display i.e "Select"
so that how can i remove this blank column in html DOM ?
You might want to write
<thead>
<tr>
<td ng-if="!$last" ng-repeat="header in headerList">
{{header}}
</td>
</tr>
</thead>
instead of this
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
I want to use same ng-show condition in more than 7-8 table rows of a table.
I dont want to repeat the ng-show="same condition" in all 7-8 tr elements.
is there any way i can put the condition in top level?
Below is my code, here sometimes both condition1 and condtion2 are true and sometimes only condition1 is true and some time only condition2 is true
I dont want to repeat conditions everytime.
<table>
<tr ng-show="condition1" >
<td>test1 </td><td>some value</td>
</tr>
<tr ng-show="condition1" >
<td>test2</td><td>some value</td>
</tr>
<tr ng-show="condition2" >
<td>test3</td><td>some value</td>
</tr>
<tr ng-show="condition2" >
<td>test4</td><td>some value</td>
</tr>
<tr ng-show="condition2" >
<td>test5</td><td>some value</td>
</tr>
<tr ng-show="condition2" >
<td>test6</td><td>some value</td>
</tr>
</table>
You can try the below way (instead of div try with span as well):
<table>
<div ng-show="condition1">
<tr>
<td>test1 </td><td>some value</td>
</tr>
<tr>
<td>test2</td><td>some value</td>
</tr>
</div>
<div ng-show="condition2">
<tr>
<td>test3</td><td>some value</td>
</tr>
<tr>
<td>test4</td><td>some value</td>
</tr>
<tr>
<td>test5</td><td>some value</td>
</tr>
<tr>
<td>test6</td><td>some value</td>
</tr>
</div>
</table>
Try
<table>
<tr>
<td>test1 </td><td>some value</td>
</tr>
<tr>
<td>test2</td><td>some value</td>
</tr>
<tbody ng-show="condition2">
<tr>
<td>test3</td><td>some value</td>
</tr>
<tr>
<td>test4</td><td>some value</td>
</tr>
<tr>
<td>test5</td><td>some value</td>
</tr>
<tr>
<td>test6</td><td>some value</td>
</tr>
</tbody>
</table>