I need to display a table with a vertical header instead of the traditional horizontal header. Since the table has to be under another table that is using Vuetify, I want to make the vertical table using the same layout using Vuetify as well.
In plain html/css I know that you can optain this using TH as rows:
<table>
<tbody>
<tr>
<th scope="row">A</th>
<td>b</td>
</tr>
<tr>
<th scope="row">C</th>
<td>d</td>
</tr>
</tbody>
</table>
However, Vuetify doesn't allow that much of modification of its framework and I can't find any other way using their documentation: https://vuetifyjs.com/en/components/data-tables/
Is there any other way to make a vertical table with Vuetify?
You can specify body inside v-data-table with slots.
<v-data-table
:items="desserts">
<template v-slot:body="{ items }">
<tbody>
<tr v-for="header in headers">
<td>
{{ header.text }}
</td>
<td v-for="item in items">
{{ item[header.value] }}
</td>
</tr>
</tbody>
</template>
</v-data-table>
Related
I have an HTML table like this:
*----------*----------*
| Cell 1 | Cell 4 |
*----------*----------*
| Cell 2 | Cell 5 |
*----------*----------*
| Cell 3 | Cell 6 |
*----------*----------*
How do I change the tab order to properly run from Cell 1 to Cell 6 without using tabindex? I ask this knowing that the WAI-ARIA guidelines discourage the use of tabindex to change the tab order of cells.
I've considered breaking the table into two elements -- left and right -- so that they will have the correct order in the DOM. However, this solution does not seem to maintain the aspects of a natural HTML table (such as equal height across rows of cells).
The following works from a tab perspective but does not work for a screen reader. I'm using a <button> in the table just to demonstrate the tabbing order.
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>
<table>
<tr>
<td><button>cell 1</button></td>
</tr>
<tr>
<td><button>cell 2</button></td>
</tr>
<tr>
<td><button>cell 3</button></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><button>cell 4</button></td>
</tr>
<tr>
<td><button>cell 5</button></td>
</tr>
<tr>
<td><button>cell 6</button></td>
</tr>
</table>
</td>
</tr>
</table>
To tab vertically, you have to group cell1-cell3 in a container and cell4-cell6 in another container, then display the two containers side by side. Since you can't have a container span across rows in a table, you have to use a (nested) table as the container. The first cell of the main table is a nested table, so tabbing goes through the nested table (cell1-cell3) first. Then tabbing goes to the second cell of the main table, which again is a nested table (cell4-cell6).
You could try to simplify it and put cell1-cell3 in a <div> and have that <div> be the first cell of the main table, but then cell1-cell3 would not, individually, be in separate data cells, but that's up to you if that's important.
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>
<div>
<button>cell 1</button><br>
<button>cell 2</button><br>
<button>cell 3</button>
</div>
</td>
<td>
<div>
<button>cell 4</button><br>
<button>cell 5</button><br>
<button>cell 6</button>
</div>
</td>
</tr>
</table>
Getting back to the screen reader, there are keyboard shortcuts to traverse through all the cells of a table. On a PC, using JAWS or NVDA, it's ctrl+alt+arrow.
So ctrl+alt+RightArrow will let me traverse across a row. Even if you used ill-advised positive values for tabindex to control the vertical tabbing order, it will not affect the way a screen reader can navigate through a table. So if there's significant meaning in reading the table vertically, the screen reader user will lose that meaning and may not understand your table.
A few questions to consider:
Are the two columns related?
Is the table a "real" table in that it's displaying data, or is the table being used for layout purposes?
Are there column headers?
Tabbing vertically might not be necessary if the purpose of tabbing vertically can be conveyed by having sufficient row headers. Most tables have column headers but ofttimes, row headers are left off. They are very useful.
<table>
<tr>
<th scope="col">name</th>
<th scope="col">age</th>
<th scope="col">height</th>
</tr>
<tr>
<th scope="row">dave</th>
<td>12</td>
<td>4'8"</td>
</tr>
<tr>
<th scope="row">fred</th>
<td>13</td>
<td>4'9"</td>
</tr>
<tr>
<th scope="row">henry</th>
<td>14</td>
<td>4'10"</td>
</tr>
</table>
I have a table and I'm iterating in a over an array. In some scenarios, I'll want to add an extra <tr>. I'm looking for something like this:
<table>
<tr *ngFor="let element in array">
<td>
some content
</td>
//Starting block that will only be activated if some variable is true
</tr>
<tr>
<td>
some extra content
</td>
//End of the block that will only be activated if some variable is true
</tr>
</table>
Is there a way to create a boulder html that can wrap it like this?
The options I've tried so far are changing the data structure (array) so it include the element I'm looking for but I'm not pleased with having extra data there just for displaying purpose.
This should do what you want
<table>
<ng-container *ngFor="let element in array"
<tr>
<td>
some content
</td>
</tr>
<tr *ngIf="someVar">
<td>
some extra content
</td>
</tr>
</ng-container>
</table>
Perhaps the best option is to work with ng-repeat.
Example with ng-repeat:
<table ng-controller="myCtrl">
<tr ng-repeat="x in records">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
Ng-repeat makes a for in your object or array.
See if this can help you.
I want to make a HTML file that has the headers in one vertical column, and the data in the column to the right. There will only be 2 columns in total. I've looked at the html docs and seen stuff about scope, but I'm not entirely sure how to use it in this context. Example:
The HTML is pretty straightforward, just be sure to use the [scope] attribute to specify the correct orientation of the table.
<table>
<tbody>
<tr>
<th scope="row">City</th>
<td>$city</td>
</tr>
<tr>
<th scope="row">Latitude</th>
<td>$latitude</td>
</tr>
<tr>
<th scope="row">Longitude</th>
<td>$longitude</td>
</tr>
<tr>
<th scope="row">Country</th>
<td>$country</td>
</tr>
</tbody>
</table>
From the docs for the [scope] attribute:
The row state means the header cell applies to some of the subsequent cells in the same row(s).
You can create the tables with elements proceeded by elements like so:
<table>
<tr>
<th scope="row">Category 1</th><td>data1</td>
</tr>
<tr>
<th scope="row">Category 2</th><td>data2</td>
</tr>
<tr>
<th scope="row">Category 3</th><td>data3</td>
</tr>
Here is an example of it in action:
vertical headers
I want to expand a column and display a set of rows inside it.
What I am trying to achieve :
What I have achieved so far
My code:
<table style="background-color:lightgreen" border="1">
<tr >
<td>Id</td>
<td>Name</td>
<td>Col1</td>
<td>Col2</td>
<td>Group Related Column (value for each expanded cell)</td>
<td>Col4</td>
</tr>
<tr >
<td rowspan="5" >#1</td>
<td rowspan="5">AFSBEESS1</td>
<td rowspan="5">
<tr><td>[-] Group Name</td></tr>
<tr><td>#1 in Group</td></tr>
<tr><td>#2 in Group</td></tr>
<tr><td>#3 in Group</td></tr>
</td>
<td rowspan="5">
<tr><td>[-] Group Name</td></tr>
<tr><td>#1 in Group</td></tr>
<tr><td>#2 in Group</td></tr>
<tr><td>#3 in Group</td></tr>
</td>
<td>x</td>
<td>x</td>
</tr>
My fiddle input : http://jsfiddle.net/yDUZg/78/
What is the best table format to do the same?
Is there some plugins to achieve the same effect of easily grouping the column?
Or a better approach to the problem?
Doing in ASP.NET, but as this is a basic thing , I am tagging it as HTML
Have you looked at something like - http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx ?
This plugin allows you to collapse/expand table rows as required.
You html above is wrong, as you nesting tr within td elements. When you add rowspan="x" to a column, you should omit it for the next x rows. eg,
<table>
<tr>
<td rowspan="2">Funky</td>
<td>Joy</td>
</tr>
<tr>
<td>Fun</td>
</tr>
</table>
You are getting confused over the concept of rowspan - http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
For now, I have created a JSFiddle that does what you have requested. The example is highly specialised, and may not work in a generalised way. In the fiddle, I have removed the rowspan and colspan properties. Feel free to add them in when you are comfortable with what they do.
If you're set on using tables then why not just nest them? Where you want the rows to appear within a cell, just add another table.
You can probably do this with JavaScript. I think it would look something like this:
<script type="text/javascript">
...
// You could use these in an event (inside some callback function)
$('tr.expand').style.visibility = 'hidden'
$('tr.expand').style.visibility = 'visible'
// OR you could use these...
$('tr.expand').show();
$('tr.expand').hide();
...
</script>
<!-- And then of course the group of <tr>'s you want to expand
on an event would all have the same class -->
<table>
...
<tr class="expand">
<td>...</td>
</tr>
<tr class="expand">
<td>...</td>
</tr>
...
</table>
I want to make a table of orders, for each row there's an arrow that show a bill details related to each order and hide when I click again on the button.
How can I make the structure of the table?
I make like this
<table id="customerTable">
<thead>
<tr>
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
</tr>
</thead>
<tr>
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
<td>show details</td>
</tr>
//also loop here as the number of bills
<tr>
<td>bill order/td>
<td>product</td>
<td>price</td>
</tr>
I don't think like this structure is correct, and making div inside a table doesn't work, any suggestion please?
Possible structure:
<table id="customerTable">
<thead>
<tr>
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
<td></td>
</tr>
</thead>
<tbody>
<tr class="master">
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
<td>
show details
</td>
</tr>
<tr class="detail">
<td colspan=5>
<!-- new <table> with your details of this row -->
</td>
</tr>
<!-- ... more rows ... --->
</tbody>
</table>
Example: http://jsfiddle.net/J7szf/
Example 2: http://jsfiddle.net/J7szf/1/
You can probably use a popup near the "Show Details" Link
Example : http://jsfiddle.net/vdcUA/93/
If you want the content to be displayed in the table itself , provide here some idea on how u want the content displayed
In your example, you have an extra unneeded <tr> before your loop. You should have a standard table structure but hide / show the details depending on a click.
You'd better use:
styling with css and classes the standard row and the details
using js to hide / show rows
Actually, you could use jquery plugins to do this kind of stuff. See this example of datatables grouping rows
Jqgrid can also make some row grouping
[EDIT] The easiest way to define your HTML structure is to get inspired from the HTML in these jquery plugin examples