I have a v-data-table and I am trying to print my headings, but with my code they are all appearing grouped into one column instead of across the entire table.
<template v-slot:header>
<thead>
<tr>
<div v-for="(itm, i) in hdrs" :key="i">
<th>
{{itm.value}}
</th>
</div>
</tr>
</thead>
</template>
Can anyone offer a suggestion as to how to resolve this issue please?
the loop should be done in the th elements and remove the div one :
<tr>
<tempalte v-for="(itm, i) in hdrs">
<th v-if="someCondition">
{{itm.value}}
</th>
</template>
</tr>
Related
In below html code when i focus on any button. All 3 button are read instead of just focused one.
<table>
<tr>
<th >Column 1</th>
<th >Column2</th>
<th >
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
</th>
</tr>
<tr>
<td>Row1</td>
<td>Row2</td>
<td>Row3
<div>
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
</div>
</td>
</tr>
</table>
Is this JAWS issue. or am i missing something in my code.
The object name has space like 'Apple Juice','Orange Juice', so how can I use it in v-for?
<div id="box" v-if="!loading">
<table>
<thead>
<tr>
<th>Name</th>
<th>Total Sales</th>
</tr>
</thead>
<tbody>
<tr v-for="name in Beverage" v-bind:key="name">
<td>{{name.Txn Group}}</td> //error
<td>{{name.TotalSales}}</td>
</tr>
</tbody>
</table>
</div>
I called API and get JSON data, so I unable to change the object name.
Thanks.
You can write it like {{ name['Txn Group'] }} and it will work properly.
I have a table where i show people's some properties. As these properties can be extended in the future, i need to show all the available properties in table head, and the related answers to those properties under table body
I can reach the people's properties with the syntax:
v-for='person in people' and {{people.name}}
But i need to dynamically write 'Name' to table head.
Is there any option to reach to the object properties like name, age, salary, country, etc. ?
ex: people={name:john, surname: black, age:35, country:german}
<table class="table table-filter">
<thead>
<tr>
<th>Key</th>
<th>Name</th>
<th>Age</th>
<th>Whatever</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value</td>
<td>John</td>
<td>35</td>
<td>Green</td>
</tr>
<tr>
<td>Value</td>
<td>Selin</td>
<td>23</td>
<td>Black</td>
</tr>
</tbody>
As with v-for directive you can cycle not only arrays, but objects also, just use second, nested v-for directive. Generic example:
<thead>
<tr>
<th v-for="val, key in person[0]"> // with first object in array
{{ key }} // show key - name for each column
</th>
</tr>
</thead>
<tbody>
<tr v-for="person, idx in people" :key="idx"> // with whole array
<td v-for="val, key in person"> // with each object in array
{{ val }} // show value for each column
</td>
</tr>
</tbody>
Accordibg to your sample data people={name:john, surname: black, age:35, country:german}
Key value in horizontal Table
<table>
<tr>
<th v-for="(value, index) in people">
{{ index }}
</th>
</tr>
<tr>
<td v-for="(value, index) in people">
{{ value }}
</td>
</tr>
<table>
Key value in vertical Table
<table>
<tr v-for="(value, index) in people">
<th>
{{ index }}
</th>
<td>
{{ value }}
</td>
</tr>
<table>
I'm using Angular-datatables and when I define the table using the angular renderer I can see nice arrows for sorting column.
<table class="dataTable row-border hover" datatable="ng" dt options="vm.dtOptions">
<thead>
<tr>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">My header</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ex in ::vm.exes">
<td>{{ex.myValue}}</td>
</tr>
</tbody>
</table>
When I define the columns with DTColumnBuilder.newColumn the arrows are missing (sorting works).
<table datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns"
class="dataTable row-border hover"
dt-disable-deep-watchers="true"
dt-instance="vm.dtInstanceCallback">
</table>
and
vm.dtColumns = [
DTColumnBuilder.newColumn('myValue').withTitle('My header'),
Can I bring the sorting arrows back?
<table>
<tbody>
<tr>
<th style="width:200px;">Features</th>
<th style="width:300px;">Settings for this entry round</th>
<th style="width:300px;">
</tr>
<tr>
<td style="background-color: rgb(234, 234, 234);"> is_team_round </td>
<td style="text-align:center;">
<div>
<select id="account_3" onchange="changeAccount(3);" style="background-color: rgb(255, 255, 255);">
<div> </div>
</div>
</td>
<td style="text-align:center;"> Yes </td>
</tr>
<tr>
<td> is_file_uploads </td>
<td style="text-align:center;">
<div>
<select id="account_4" onchange="changeAccount(4);">
<div> </div>
</div>
</td>
<td style="text-align:center;"> Yes </td>
</tr>
</tbody>
</table>
How can I select the ID account 3 depending if the text is is_team_round?
I tried //td[contains(text(), 'is_team_round')], and it selects is_team_round.
Then I tried //td[contains(text(), 'is_team_round')]//select[#id='account_3'], but it doesn't work
Try the xpath:
//tr[./td[contains(text(), 'is_team_round')]]//select
This says to find the row (tr) that has the cell (td) with text 'is_team_round". Then find the select list inside that row.
Note: Your original solution did not work because it tried to find a select list inside the cell containing the text. As seen in the HTML, the select list is not inside the same cell. Hence, the need to use a common ancestor (ie the row).
I'd do it using 2 nested jquery's .each() function to iterate over the cells, and then testing the values with jquery's .val() or .html() function to get and compare the values.check out those functions uses and syntax at jquery.com.
hope it helped
$("#table").find("tbody td").eq('is_team_body');
id try something like this