I'm using vuetify and trying to use either a data-table, or simple table to display rows of checkboxes and a couple of text fields.
Like this:
However, when I use v-simple-table all of the checkboxes and fields have their own lines; breaking the table.
<v-form>
<h3>Shifts:</h3>
<v-simple-table>
<thead>
<tr>
<th>Su</th><th>M</th><th>T</th><th>W</th><th>Th</th><th>F</th><th>Sa</th><th>From:</th><th>To:</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<v-checkbox></v-checkbox>
</td>
<td>
<v-checkbox></v-checkbox>
</td>
<td>
<v-checkbox></v-checkbox>
</td>
<td>
<v-checkbox></v-checkbox>
</td>
<td>
<v-checkbox></v-checkbox>
</td>
<td>
<v-checkbox></v-checkbox>
</td>
<td>
<v-checkbox></v-checkbox>
</td>
<td>
<v-text-field value="9:00"></v-text-field>
</td>
<td>
<v-text-field value="22:00"></v-text-field>
</td>
</tr>
</tbody>
</v-simple-table>
</v-form>
Changing v-simple-table to just table gives me the correct layout.
I wouldn't mind using a data-table, but I didn't see a way to have a row of checkboxes instead of a row of data text.
The v-simple-table component is a simple wrapper component around the
element. Inside the component you can use all the regular
table elements such as <thead>, <tbody>, <tr>, etc.
v-simple table give you some extra options which you don't have to program like fixed headers, or a dense format.
So when you use v-simple-table u still have to define table
Related
So it is the first time fo me to work with logic app or any technology that have the same idea. I need to use email trigger when eamil is received then extract data to send it to jira ticket as table.
example of the html table from email body:
<table>
<tr><td> Number: </td> <td> 12 </td> </tr>
<tr><td> Priority: </td> <td> High </td> </tr>
<tr><td> Status: </td> <td> Open </td> </tr>
<tr><td> Time: </td> <td> 14:26:39 </td> </tr>
</table>
please consider that I am new to this and I am trying to use array filters, select, compose but still I can't reach anywhere.
I found some solutions but it works with them because the table titles are on the top while form me it is on the side (inline with the values)
example:
There table:
Number
Priority
Status
12
High
Open
Note: I can't change the table format!
I tried to replace the </tr> with |
and </td> with ^ to split them but I got stuck there.
I think the easiest way is to use XML and and XPath query to get your desired outcome.
***Disclaimer: *You need to do the work to style the table, I am merely providing the ability to pivot your source table.
This is the flow I tested with.
The first step is merely the HTML you provided in your question.
The second step is the pivoting of the HTML. This is the text contained within the body of the variable initialisation ...
<table>
<tr>
<th>Number</th>
<th>Priority</th>
<th>Status</th>
</tr>
<tr>
<td>#{trim(xpath(xml(variables('HTML Source')), '//td[contains(text(),"Number")]//following-sibling::td/text()')[0])}</td>
<td>#{trim(xpath(xml(variables('HTML Source')), '//td[contains(text(),"Priority")]//following-sibling::td/text()')[0])}</td>
<td>#{trim(xpath(xml(variables('HTML Source')), '//td[contains(text(),"Status")]//following-sibling::td/text()')[0])}</td>
</tr>
</table>
That results in this output ...
<table>
<tr>
<th>Number</th>
<th>Priority</th>
<th>Status</th>
</tr>
<tr>
<td>12</td>
<td>High</td>
<td>Open</td>
</tr>
</table>
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>
I want to filter my table generated with a ng-repeat.
<tbody>
<tr ng-repeat="x in contact.listeContacts | filter:contact.searchText track by $index">
<td>
<b>{{x.gd$name.gd$fullName.$t}}</b>
</td>
<td>
<p>{{contact.listeContacts[$index].gd$name.gd$familyName.$t}}</p>
</td>
<td>
<p>{{contact.listeContacts[$index].gd$name.gd$givenName.$t}}</p>
</td>
<td>
<p>{{contact.listeContacts[$index].gd$email[0].address}}</p>
</td>
<td>
<p>{{contact.listeContacts[$index].gd$phoneNumber[0].$t}}</p>
</td>
<td>
<p>{{contact.listeContacts[$index].gd$organization[0].gd$orgTitle.$t}}{{contact.listeContacts[$index].gd$organization[0].gd$orgName.$t}}</p>
</td>
</tr>
</tbody>
My issue is that my filter seems to be applied only on the first column.
Imagine I have these three objects to display :
obj1 = {
'name':'obj1',
'age':10
}
obj2 = {
'name':'obj2',
'age':1000
}
obj3 = {
'name'='obj3',
'age':100000
}
If my searchText is "obj3", the table will display something like this obj3 / 10
instead of obj3 / 100000
I don't understand why behaving like this.
EDIT: John Joseph, Xun Chao & tanmay helped me to resolve my first problem, check their answers.
Now, I don't understand why my search filter is not working as expected. Please see this Plunker : https://plnkr.co/edit/SfaYdgVkSfhOdI5enpOd?p=preview
While all provided answers are correct, none of them has explained why this happened. When you filter with "obj3", it displays only one item in the ng-repeat but your contact.listeContacts array still has length say 3. So, while searching for third item's text (here obj3), it tries to show contact.listeContacts[0] because filtered array has only one element.
You have two ways to solve this:
As mentioned by all other answers, put x instead of contact.listeContacts[$index]
You can have a reference to filtered array like this:
<tr ng-repeat="x in mycontacts = (contact.listeContacts | filter:contact.searchText) track by $index">
And, instead of contact.listeContacts[$index] you can then use mycontacts[$index] which points to filtered array and not actual array
You are directly accessing the contact.listeContacts for the rest of the columns instead of the looped variable x. That should be the problem. Try the following, replace contact.listeContacts[$index] with x.
<tbody>
<tr ng-repeat="x in contact.listeContacts | filter:contact.searchText track by $index">
<td>
<b>{{x.gd$name.gd$fullName.$t}}</b>
</td>
<td>
<p>{{x.gd$name.gd$familyName.$t}}</p>
</td>
<td>
<p>{{x.gd$name.gd$givenName.$t}}</p>
</td>
<td>
<p>{{x.gd$email[0].address}}</p>
</td>
<td>
<p>{{x.gd$phoneNumber[0].$t}}</p>
</td>
<td>
<p>{{x.gd$organization[0].gd$orgTitle.$t}}{{x.gd$organization[0].gd$orgName.$t}}</p>
</td>
</tr>
</tbody>
You have used contact.listeContacts[$index] instead of x...
<tbody>
<tr ng-repeat="x in contact.listeContacts | filter:contact.searchText track by $index">
<td>
<b>{{x.gd$name.gd$fullName.$t}}</b>
</td>
<td>
<p>{{x.gd$name.gd$familyName.$t}}</p>
</td>
<td>
<p>{{x.gd$name.gd$givenName.$t}}</p>
</td>
<td>
<p>{{x.gd$email[0].address}}</p>
</td>
<td>
<p>{{x.gd$phoneNumber[0].$t}}</p>
</td>
<td>
<p>{{x.gd$organization[0].gd$orgTitle.$t}}{{x.gd$organization[0].gd$orgName.$t}}</p>
</td>
</tr>
</tbody>
Your problem lies in the $index you use for accessing your items. Whenever your list in ng-repeat is filtered, the index property is looping on your filtered list.
You just have to use your local variable, named x in your case.
See this codepen for a live example:
<td>{{contact.name}}</td>
<td>{{contacts[$index].name}}</td> <!-- may not be the same -->
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
I am having trouble trying to present data from an api. The data comes in a json response organized like this API from Guild Wars for character data
I made an angularJS request and used a series of nested ng-repeats to present the data, but the innermost loop , the inventory data , isn't being present properly. Only some of it is being iterated.
This is my code :
<table>
<tr ng-repeat="char in $ctrl.chars | orderBy:'-age'">
<td>
<table id="charTotal">
<ng-include src="'charBasic.html'"></ng-include>
<ng-include src="'charBags.html'"></ng-include>
</table>
</td>
</tr>
</table>
Forgot to include charBasic.html :
<tr>
<td>
<table id="charBasic" class="charBasic">
<tr>
<td>{{char.name}}</td>
<td>{{char.race}}</td>
<td>{{char.profession}}</td>
<td>{{char.level}}</td>
<td>{{char.deaths}}</td>
<td>
<table>
<tr ng-repeat="craft in char.crafting">
<td>{{craft.discipline}}</td>
<td>{{craft.rating}}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
charBags.html :
<tr>
<td>
<table id="charBags" class="charBags" border="1">
<tr ng-repeat="bag in char.bags">
<td>{{bag.id}}</td>
<td>{{bag.size}}</td>
<td ng-repeat="inv in bag.inventory"><ng-if "{{inv}}">{{inv.id}}</ng-if></td>
</tr>
</table>
</td>
</tr>
As it is, not all inventory arrays are iterated, and the results vary each time
What would be the correct way to iterate this data ?
I found out the problem, it was a duplicate item issue :(
I "solved" it by using track-by $index option inside ng-repeat, which will bypass the problem of duplicate ids.