I have a Component in Vue
I need to add list of 6 items to the table 2x3.
Is there any way to conditionally add "" after every second insert?
<template>
<tr>
<td>asdasd</td><td>qweqwe</td>
<!-- here i would like to insert </tr><tr> after every second add
v-if="post.tag%2"? -->
</tr>
You could do something like this:
<table>
<tr v-for="i in fruits.length/2"> <!--- create a row for every second item -->
<td>
Fruit: {{fruits[i*2]}}
</td>
<td v-if="i*2+1 < fruits.length"> <!--- check if there is another item left to display -->
Fruit: {{fruits[i*2+1]}}
</td>
</tr>
</table>
It's not very elegant, but it does the job! I made a Codepen here.
I would like to use footable (I've already use footable for its responsive exploding display )and this to show records coming from a database but with a need to have a column (which display the stock quantity of products) that thye user can modify just by typing. Is there any way of having some sort of content editable column....
Any idea will be welcome
You can render the column as HTML, which will prevent footable from taking over the content of the cell, and have an <input type="text" /> for each row.
Something like:
<table>
<thead>
<tr>
<th>Name</th>
<th data-type="html">In stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td><input type="number" step="any" value="3"/></td>
</tr>
<tr>
<td>Oranges</td>
<td><input type="number" step="any" value="0"/></td>
</tr>
</tbody>
</table>
Check the documentation at https://fooplugins.github.io/FooTable/docs/getting-started.html , look for "Column Options" > "Type" .
After rendering you can attach an event listener to the input fields and send ajax calls accordingly.
I'm having a problem with my table when I scroll to the right
this is my code
TableComponent.vue
<div id="main-container">
<table class="maint-table">
<thead id="table-header">
<tr>
<th class="dates"> </th>
<th v-for="data in dateHeader">{{data}}</th>
</tr>
<tr>
<th class="title"> </th>
<th v-for="data in dayOfWeek">{{data}}</th>
</tr>
</thead>
<tbody id="table-body" #scroll="fixedScroll">
<table_block :table_data="dataHeader"></table_block>
<table_block :table_data="allData"></table_block>
</tbody>
</table>
</div>
...
...
...
<script>
components: {
table_block
},
methods: {
fixedScroll() {
fixedScroll(event) {
var thead = document.getElementById("table-header");
var tbodyScroll = document.getElementById("table-body").scrollLeft;
thead.scrollLeft = tbodyScroll;
}
</script>
I made a props to pass the data to my TableBlock to loop through the data and display it on the table. This is my TableBlock Code.
TableBlock.vue
<template>
<div>
<tr v-for="row in table_data">
<td>
<div class="drop-down-container"><span class="drop-down-controller"">{{ row.title }}</span></div>
</td>
<td v-for="cel in row.data" class="group-header">{{ cel }}</td>
</tr>
</div>
</template>
When I scroll it to the right, the first column must freeze but it's not.
I tried to create a dummy data inside TableComponent.vue with a normal HTML Table without passing the data to another component using props, it works perfectly. But when I use these codes, it doesn't work correctly.
Scenario
Let say I have 10 columns in the table, when I scroll it to the right, the 1st column will stick which is normal but when the 10th column reach to 1st column, the 1st column will scroll away together with the 10th column.
I'm trying my best to illustrate the scenario but this is the best that I can do. If someone can help, please help me.
I'm attempting to write some cucumber/capybara tests to validate data in a KendoGrid UI component and am having some real trouble determining how to select and validate the data on the page.
I've found the basic tutorials and examples on utlizing cucumber/capybara with table data but it appears that KendoGrid utilizing a slightly different configuration of it's tables and data where 1.) there is no "id" to easily select the grid on the page and 2.) there are multiple tables (one for the header) and another for the actual data itself.
Here is an excerpt of my current kendoGrid data I want to check:
<div id="item_grid" data-role="grid" class="k-grid k-widget k-secondary" style="">
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap">
<table role="grid">
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th role="columnheader" data-field="ItemA" data-title="Item A" class="k-header" data-role="sortable">
<a class="k-link" href="#">Item A</a>
</th>
<th role="columnheader" data-field="ItemB" data-title="Item B" class="k-header" data-role="sortable">
<a class="k-link" href="#">Item B</a>
</th>
<th role="columnheader" data-field="ItemC" data-title="Item C" class="k-header" data-role="sortable">
<a class="k-link" href="#">Item C</a>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table role="grid">
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr data-uid="2c77ea57-50ea-474d-950a-8379b3690936" role="row">
<td role="gridcell">A</td>
<td role="gridcell">223.63</td>
<td role="gridcell">0</td>
</tr>
<tr class="k-alt" data-uid="979534bc-7dea-47e9-9471-088c5bffe5b5" role="row">
<td role="gridcell">B</td>
<td role="gridcell">223.63</td>
<td role="gridcell">180</td>
</tr>
<tr data-uid="4d4c31e7-4daf-44ad-b6c1-20ffdfde57c4" role="row">
<td role="gridcell">C</td>
<td role="gridcell">143.58</td>
<td role="gridcell">0</td>
</tr>
<tr class="k-alt" data-uid="8d315558-b014-4219-b21b-dbe52cc6dd18" role="row">
<td role="gridcell">D</td>
<td role="gridcell">143.58</td>
<td role="gridcell">180</td>
</tr>
</tbody>
</table>
</div>
</div>
Where is the best place to start for writing tests to cover this scenario?
I have done some additional playing with the Telerik Test Studio and testing this specific scenario in that application is extremely easy!
One approach would be to collect the table of data into a 2D array using:
data_rows = page.all(:css, 'div#item_grid div.k-grid-content tr')
data = data_rows.collect do |tr|
tr.all(:css, 'td').collect(&:text)
end
p data
#=> [["A", "223.63", "0"], ["B", "223.63", "180"], ["C", "143.58", "0"], ["D", "143.58", "180"]]
Then with the data (and assuming you know what data should be in the table), you can validate the data array:
# If you want to validate the entire table and row order matters:
expect(data).to eql([["A", "223.63", "0"], ["B", "223.63", "180"], ["C", "143.58", "0"], ["D", "143.58", "180"]])
# If you want to validate the entire table and row order does not matter:
expect(data).to match_array([["B", "223.63", "180"], ["A", "223.63", "0"], ["D", "143.58", "180"], ["C", "143.58", "0"]])
# If you want to validate a specific row exists:
expect(data).to include(["B", "223.63", "180"])
How can I locate an element "1988" (the fourth line) in the following table:
<table border="0" width="820" cellpadding="2" cellspacing="0">
<tbody>
<tr valign="top">
<td class="default" width="100%">Results <b>1</b> to <b>10</b> of <b>1988</b></td>
</tr>
<tr valign="top">
<td class="default" bgcolor="#C0C0C0"> <font class="resultsheader"> ...etc
</tr>
</tbody>
</table>
IMPORTANT: I know one way that works (By.xpath):
driver.findElement(By.xpath("//td[#width='100%']")).getText();
However, this way does not ALWAYS work. The page is dynamic, so I need a way to locate that element no matter what changes happen to the page.
I tried the following but I am not sure:
By.xpath("//html//body//table//tbody//tr[3]//td//table//tbody//tr//td[2]//table[4]//tbody//tr[1]//td//b[3]"
If you can't change the HTML and want to use attributes for selection, you can write something like this:
//table[#border=0][#width=820]//tbody//tr[1]//td//b[3]