How do you access these header's index in a grouped table?
table_screenshot
You can get column name using props.column. props.column will give you full column object so you can get index from it. props.column.field will give you column name title.
You can check index with props.column.originalIndex
The original row object can be accessed via props.row
The currently displayed table row index can be accessed via props.index .
The original row index can be accessed via props.row.originalIndex.
You can then access the original row object by using rows[props.row.originalIndex].
The column object can be accessed via props.column
You can access the formatted row data (for example - formatted date) via props.formattedRow
For example :
<vue-good-table
:columns="columns"
:rows="rows">
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'age'">
<span style="font-weight: bold; color: blue;">{{props.row.age}}</span>
</span>
<span v-else>
{{props.formattedRow[props.column.field]}}
</span>
</template>
</vue-good-table>
Source
i just found it out, the answer was just in the picture
{{props.row.vgt_id}}
try this:
{{props.row.originalIndex}}
Related
I have created a table component using React. We have an ios app in which that table is loaded. The table looks like below
Task
AssignedTo
DueDate
task name
Dev
6th April
Now when I open the app in iphone and enable voiceover then it is read like this
Heading, Text Field, 0, Column Header, Column 1
Notice, in the pronunciation instead of pronouncing column header name, it is announced as zero. Expected behavior is it is pronounced like this:
Heading, Text Field, Task, Column Header, Column 1
I want to understand, how voiceover extract text from table and why it is reading 0 instead of column header name.
I am new to stackoverflow, so sorry for the structural errors.
Update:
Here is a snippet of code.
<th role="columnheader" data-columnid="initialColumn-1" aria-sort="none">
<div>
<div>
<div hosting-element="hosting-element">
<div>
<div contenteditable="false">
<div contenteditable="false" aria-readonly="true" spellcheck="false" autocapitalize="sentences" autocorrect="off" autocomplete="off" tabindex="0" data-gramm_editor="false" role="textbox">
<div data-dbg-pageindex="0">
<div>
<div>
<span>Task
</span>
</div>
</div>
<div contenteditable="false" aria-hidden="true">
</div>
</div>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
<div tabindex="-1" aria-hidden="true">
</div>
</div>
</th>
You mention React and also tagged your question with html-table so I'm guessing this is an HTML application, not a native iOS app?
What does your table code look like? I'm a little puzzled why "heading" and "text field" are announced.
If you have an <h2> or any other level of heading in your table, you should hear the heading level. Voiceover will say "heading level X" after the heading text but in your example, you said you only heard "heading" without a level number.
And your table doesn't appear to have any <input> fields in it so why is "text field" announced?
I suppose if you have an <input> field whose label is "heading", then you'd hear "heading, text field".
<label for="foo">heading</label>
<input id="foo">
But, again, you didn't post any code so it's hard to say.
If your table is using proper structure, then if I tap on "Dev", I should hear "AssignedTo, Dev, row 2, column 2".
That is, I'll hear the column header text first, then the cell value, then the coordinates in the table (the row and the column number).
<table>
<tr>
<th scope="col">Task</th>
<th scope="col">AssignedTo</th>
<th scope="col">DueDate</th>
</tr>
<tr>
<td>task name</td>
<td>Dev</td>
<td>6th April</td>
</tr>
</table>
If I tap directly on a column header, for example "AssignedTo", I'll hear the column header text, the fact that it's a column header, and then the coordinates in the table. "AssignedTo, Column header, Row 1, Column 2".
If you tap on the first column header, in addition to what's announced above, you'll also hear "table start" and how many total rows and columns are in the table because you tapped in the first cell of the table.
Update based on new code snippet
Here's a short 20 second video of the new code running on iOS.
https://drive.google.com/file/d/1Gk_dm-P8DSUX5X3OCIl-bz-c_1GhGrYV/view?usp=sharing
The speech is a little fast (forgot to slow it down before recording) but you can see the caption panel at the bottom and follow along.
I was using w3chools.com as the testing page because it has an editor where I can paste code (kind of like using codepen). I put a few buttons before and after the table to give me something to focus on before I get to the table.
The full text of what's announced when I swipe right from the button to the first table column header is:
"Task, Row header, Column header, Row 1, Column 1, Text field, Read-only, Table start, 2 rows 3 columns, Double tap to edit, Use the rotor to access Misspelled Words"
There is not a "zero" in what's being announced.
As mentioned before, all you posted is just the text for the one column header and it's reading fine. You must have something else in your code causing the problem. Perhaps post a video showing the problem.
Try setting the header accessibilityLabel
header.accessibilityLabel = "Task"
Hope it helps!
I have a query Object that returns 357 columns (e.g, fullRecord). For a certain portion of my UI, I want to query through a subset of about 125 of those items and display them in a list. I have the column names of those items I want to display in an array (e.g., colsWanted).
I am trying to figure out how to dynamically iterate through the "colsWanted" array and display the appropriate "fullRecord.colsWanted(Item)" in the vuetify interface. I've tried what feels like a million different iterations of this but here is the latest which shows an error:
<v-flex v-for="(value, index) in colsWanted" :key="value">
<v-card flat>
<span v-if="fullRecord[value] in fullRecord">
<strong>{{ index }}. {{ fullRecord[value] }}</strong>
</span>
<span v-else class="error--text">Not Available</span>
</v-card>
</v-flex>
I actually get no errors at all from this; but no results are displayed when they should in fact return results.
Thanks in advance for any assistance.
Your object key selection is wrong:
<span v-if="fullRecord[value] in fullRecord">
fullRecord[value] will retrieve the value of the value key, which will not be in fullRecord.
What you should be using is:
<span v-if="value in fullRecord">
or
<span v-if="fullRecord.hasOwnProperty(value)">
Also I would rename value to key since thats what it actually is.
This seems to remain unanswered so here is another attempt at a solution.
Currently in bootstrap-vue, I am rendering a b-table. I would like to improve this by having the ability to select a row and collapse/expand an extra div/row/etc to show further information.
In the below snippet you will see what I am trying. The problem is that I can't seem to get the expanded data to span the number of columns in the table. I have tried adding <tr><td colspan="6"></td></tr> but it doesn't seem to span like I would expect. Any workarounds for this? Thanks.
<b-table
:items="case.cases"
:fields="tableFields"
head-variant="dark">
<template
slot="meta.status"
slot-scope="data">
<b-badge
v-b-toggle.collapse1
:variant="foobar"
tag="h6">
{{ data.value }}
</b-badge>
</template>
<template
slot="#id"
slot-scope="data">
<span
v-b-toggle.collapse1>
{{ data.value }}
</span>
<b-collapse id="collapse1">
Collapse contents Here
</b-collapse>
</template>
</b-table>`
Sounds like you could use the Row Details slot:
If you would optionally like to display additional record information (such as columns not specified in the fields definition array), you can use the scoped slot row-details
<b-table :items="case.cases" :fields="tableFields" head-variant="dark">
<template slot="meta.status" slot-scope="data">
<b-button #click="data.toggleDetails">
{{ data.value }}
</b-button>
</template>
<template slot="row-details" slot-scope="data">
<b-button #click="data.toggleDetails">
{{ data.detailsShowing ? 'Hide' : 'Show'}} Details }}
</b-button>
<div>
Details for row go here.
data.item contains the row's (item) record data
{{ data.item }}
</div>
</template>
</b-table>
There is a good example in the docs at https://bootstrap-vue.js.org/docs/components/table#row-details-support
I (think) I had the same issue, and I came up with a solution which leverages the filtering functionality of the bootstrap-vue <b-table> to achieve the effect of expanding and collapsing rows.
There's a minimal example in a JSFiddle here:
https://jsfiddle.net/adlaws/mk4128dg/
Basically you provide a tree structure for the table like this:
[
{
columnA: 'John', columnB:'Smith', columnC:'75',
children:
[
{ columnA: 'Mary', columnB:'Symes', columnC:'46' },
{ columnA: 'Stan', columnB:'Jones', columnC:'42' },
{ columnA: 'Pat', columnB:'Black', columnC:'38' },
]
}
]
The tree is then "flattened" out to rows which can be displayed in a table by the _flattenTreeStructure() method. During this process, the rows are also annotated with some extra properties to uniquely identify the row, store the depth of the row (used for indentation), the parent row of the row (if any) and whether or not the row is currently expanded.
Once this is done, the flattened structure can be handed to the <b-table> as it is just an array of rows - this is done via the computed property flattenedTree.
The main work now is done by the _filterFunction() method which provides custom filtering on the table. It works off the state of the expandedRowIndices property of the filterObj data item.
As the expand/collapse buttons are clicked, the row index (as populated during the flattening process) is inserted as a key into expandedRowIndices with a true or false indicating its current expanded state.
The _filterFunction() uses this to "filter out" rows which are not expanded, which results in the effect of expanding/collapsing a tree in the table.
OK, so it works (yay!), but...
it's not as flexible as the base <b-table>; if you want to show different columns of data, you'll need to do some work and to re-do the <template slot="???"> sections for the columns as required.
if you want to actually use filtering to filter the content (with a text search, for example) you'll need to extend the custom filter function to take this into account as well
sorting the data is not something I had to do for my use case, and I'm not sure how it would work in the context of a tree structure anyway - maintaining the tree's parent/child relationships while changing the order of the rows around would be... fun, and I suspect this would be a nice challenge to implement for someone who is not as time poor as me. ;)
Anyway, I hope this is of use to someone. I'm reasonably new to Vue.js, so there may be a better way to approach this, but it's done the job I needed to get done.
Im making responsive table and I want it be fully accessible for every people. But in this case i'm not sure where i should use rowheader and where to use columheader.
Here is my code (ofcourse it is just example, there is not actual data):
<div role="grid">
<div class="row" role="row">
<div class="hidden-xs col-sm-offset-4 col-sm-3 " role="columnheader">
<img class="img-responsive" style="width:200px;" src="http://blogmedia.whoishostingthis.com/wp-content/uploads/2013/04/free-hosting.jpg" alt="Vendor 1">
</div>
<div class="hidden-xs col-sm-offset-1 col-sm-3 " role="columnheader">
<img class="img-responsive" style="width:200px;" src="http://jennmoney.biz/assets/free.gif" alt="Vendor 2">
</div>
</div>
<hr class="line">
<div class="raty-table" role="row">
<span class="col-xs-12 col-sm-4" role="rowheader">
Title 1
</span>
<span class="visible-xs-block col-xs-4" role="rowheader">
Vendor 1
</span>
<span class="col-xs-8 col-sm-4" role="gridcell">
Content
</span>
<span class="visible-xs-block col-xs-4" role="rowheader">
Vendor 2
</span>
<span class="col-xs-8 col-sm-4" role="gridcell">
Content
</span>
</div>
</div>
Here is a fiddle:
For vendors should I use rowheader or columnheader? And how I should tag "How long can I sing?" Once it is rowheader and on different screen size it can be columnheader.
I see, it is hard to undestand what I mean, so I made two mocks, but thanks to StackOverflow I can't post it, becouse I have to low reputation...
I must post it as a link: http://postimg.org/gallery/j2elhzmc/ - first picture shows how it looks on desktop, second how it looks at smartphone (if you have the same order as me).
Your grid must be defined as non editable
A grid is considered editable unless otherwise specified. To make a grid read-only, set the aria-readonly attribute of the grid to true.
You should explicitly indicate relationships
If relevant headers cannot be determined from the DOM structure, authors SHOULD explicitly indicate which header cells are relevant to the cell by referencing elements with role rowheader or columnheader using the aria-describedby attribute.
Note that you might reference a "display:none" element in the aria-describedby attribute. I will say that the more semantic choice will then be to set aria-hidden attribute on your rowheader elements.
TL;DR:
Set aria-readonly=true on the grid
Set aria-describedby attribute on your "gridcell" cells referencing each one of your "not always visible" columnheader
Remove role="rowheader" and set aria-hidden="true"
Sorry if I'm missing something obvious but columnheader should be used at the top of each column. (You could have a columnheader in the middle of the table, but that's not typical, although I could see it used as a repeating header if it split across pages.)
A rowheader is usually the first cell in the table for that row. You can have multiple rowheaders but it's not common unless you're showing a multi-dimensional table (eg, a sales report that has a year header for all rows, then quarter headers for every three months, then month headers).
You start getting unreliable results (from screen readers) if you have row headers spread across several non-contiguous cells.
I'm assuming you don't want to use <table> and <th scope='row|col'>
Say I have multiple price quotes from multiple retailers, how will I retrieve the 5th value from a particular retailer - say Target or Walmart ? I can get to the 5th entry using the matching image logo bit how do I retrieve the value ?
Adding Html Code to make things more clear .I need to retrieve the ratePrice value (198)
<div id="rate-297" class="rateResult standardResult" vendor="15">
<div class="rateDetails">
<h4>Standard Goods
<br>
<img src="http://walmart.com/walmart/ZEUSSTAR999.jpg">
</h4>
<p>
<span class="vendorPart-380">
<img alt="Walmart" src="/cb2048547924/icons/15.gif">
<br>
<strong>
<br>
MNC
</span>
</p>
</div>
<div class="ratePrice">
<h3>
$198
<sup>49</sup>
</h3>
<p>
<strong>$754.49</strong>
<br>
</p>
<a class="button-select" href="https://www.walmart.com/us/order/95134/2013-05-14-10-00/95134/2013-05-17-10-00/297"> </a>
</div>
</div>
If you could provide some HTML it would help. Speaking generally from what you're asking you'd get a locator to the price div or whatever HTML element and then get its text using something like:
_driver.FindElement(locator_of_element).Text
The trick is understanding the HTML in order to target the 5th element. So if you can find the row that has the 5th entry then it's simply a matter or then finding the price div in that row and getting the text of it.
EDIT based on more info provided by OP in comments
Using the HTML you provided (which isn't well formed by the way, missing closing strong tag, a tag, etc.). I'd say do the following:
_driver.FindElement(By.XPath("//div[#class='ratePrice'][5]/h3")).Text