I have a simple element named "products". It is a table and I am rendering each product in the list as rows with a child element inside a dom-repeat. However, the columns don't line up even if I used a fixed width on both the parent and child. Does anyone know of a solution?
screenshot
<template>
<style>
</style>
<tr>
<th class="col1" style="min-width: 150px;" colspan="1">[[product.col1]] </th>
<td class="col2" colspan="1">[[product.col2]]</td>
<td class="col3" colspan="1">[[product.col3]]</td>
<td class="col4" colspan="1">[[product.col4]]</td>
<td class="col5" colspan="1">[[product.col5]]</td>
<td class="col6" colspan="1">[[product.col6]]</td>
<td class="col7" colspan="1">[[product.col7]]</td>
<td class="col8" colspan="1">[[product.col8]]</td>
</tr>
</template>
<dom-module id="product-item">
<template>
<tr>
<th class="col1" style="min-width: 150px;" colspan="1">[[product.col1]]</th>
<td class="col2" colspan="1">[[product.col2]]</td>
<td class="col3" colspan="1">[[product.col3]]</td>
<td class="col4" colspan="1">[[product.col4]]</td>
<td class="col5" colspan="1">[[product.col5]]</td>
<td class="col6" colspan="1">[[product.col6]]</td>
<td class="col7" colspan="1">[[product.col7]]</td>
<td class="col8" colspan="1">[[product.col8]]</td>
</tr>
</template>
codepen here
That's not supposed to work. <table>, <thead>, <tbody>, and <tr> don't not support custom elements as children.
Not even <template> is supported in all browsers (IE, Edge?,...) within these tags.
For the browser where <template> is actually working,
What you can do is to make <product-item> an element that extends <tr> and use it like
<tbody>
<template is="dom-repeat" items="{{products}}">
<tr is="product-item" product="{{item}}"></tr>
</template>
</tbody>
See https://www.polymer-project.org/1.0/docs/devguide/registering-elements for more details.
Related
I have an array json as follows
$scope.array =[{"id":"1","age":"3","name":"ab"},{"id":"2","age":"2","name":"ee"},{"id":"3","age":"1","name":"dd"}];
I need to show these data in a table using ng-if where if the age is 1 then that cell should have only data related to age = 1 etc. I used the following code.
<html>
<table>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
<tr>
<tr ng-repeat="record in array">
<td ng-if="record.age == '1'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '2'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '3'">{{record.id}} {{record.name}}</td>
</table>
</html>
But currently all the values are shown in the first column one after the other. I can't figure out the reason.
Don't forget to close your tr tag with an end tag. Something like this:
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<tr ng-repeat="record in array">
<td ng-if="record.age == '1'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '2'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '3'">{{record.id}} {{record.name}}</td>
</tr>
</tr>
However, in your case, you won't gain nothing by using ng-if. You will get the same output if you use the following code:
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<tr ng-repeat="record in array">
<td>{{record.id}} {{record.name}}</td>
</tr>
</tr>
If you really want to use a ng-if, the way that you're doing is fine.
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
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 am using ng-repeat from AngularJS in a table.
When I click on a row, there is data that appears just below this row.
The problem is that when I click on another row while one is already expanded, both are expanded.
I would like to close the first one and expand the second one.
HTML
<div id="accordion">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-10">Name</th>
<th class="col-md-1">Collateral</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="pack in packages | filter:search" id="row">
<td data-toggle="collapse" data-target="#collapse{{$index}}" data-parent="#accordion" ng-click="expand(pack)">{{pack.name}}</td>
<td><button class="btn btn-info"><span class="glyphicon glyphicon-open-file"></span></button></td>
<td><input type="radio" ng-model="$parent.selectedPackage" ng-value="pack" /></td>
</tr>
<tr ng-repeat-end>
<td colspan="3">
<div class="collapse" id="collapse{{$index}}">
<table class="table">
<tbody>
<tr>
<td>{{indication}}</td>
</tr>
<tr ng-repeat="bb in bananas">
<td>{{bb.name}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
first you don't need of unique id for it... Just try with https://github.com/angular-ui/bootstrap/tree/master/src/collapse or in your case maybe: https://github.com/angular-ui/bootstrap/tree/master/src/accordion
Good Luck.
I'm trying to leverage "column" as a number and re-use it to define the "colspan" in the following "td".
<table>
<tr>
<td ng-repeat="column in columns">
{{column}}
</td>
<td colspan="column">
Something
</td>
</tr>
</table>
Not sure if thats what you meant but you can try the following:
<table>
<tr>
<td ng-repeat-start="column in columns">
{{column}}
</td>
<td ng-repeat-end colspan="{{column}}">
Something
</td>
</tr>
</table>