I have a table header that looks like this:
I'm trying to recreate this table in bootstrap-vue. The raw HTML looks like this (simplified):
<table>
<thead>
<tr>
<th></th>
<th colspan="4">Group 1</th>
<th colspan="4">Group 2</th>
<!--etc-->
</tr>
<tr>
<th>Field</th>
<th>Median</th>
<!-- etc -->
</tr>
</thead>
<tbody><!-- actual data --></tbody>
</table>
The core b-table code will create the 2nd row easily/automatically. I'm trying to figure out how to jam the 1st row in there. As a little kicker, I need to be able to control the contents of the two group names (i.e. if they change a control somewhere, "Group 1" becomes "Group Foo").
I made a playground for anyone that needs a starting point for helping figure this out: https://codesandbox.io/s/p56y3y2lnx The goal in there would be to programmically add a 1st row that includes the group1name and spans the width of the table in one colspan.
As of version v2.0.0-rc.14 (released 2019-03-08) you can now add additional rows above the header using the slot thead-top.
For your example, you would place the following code inside of the b-table tag:
<template slot="thead-top" slot-scope="data">
<tr>
<th></th>
<th colspan="3">Group 1</th>
<th colspan="4">Group 2</th>
<th colspan="4"></th>
</tr>
</template>
Here's a reference to the new feature: https://bootstrap-vue.js.org/docs/components/table/#adding-additional-rows-to-the-header
I was unable to find a clean way to achieve the results I wanted, so I ended up with something more hacky.
On b-table you can add an input event, so I did that to know when the table was finished loading.
HTML:
<b-table #input="tableLoaded" ref="table"></b-table>
then in my methods:
tableLoaded() {
if (!this.$refs.table) {
return;
}
var headers = this.$refs.table.$el.querySelectorAll('thead tr');
if (headers.length > 1) {
return;//nothing to do, header row already created
}
var topHeader = document.createElement('tr');
topHeader.innerHTML =
'<th></th>'+
'<th colspan="3">Group 1</th>'+
'<th colspan="4">Group 2</th>'+
'<th colspan="4"></th>';
headers[0].parentNode.insertBefore(topHeader, headers[0]);
}
I'd be happy to accept a cleaner solution.
Related
I want to create an emmet generator that behaves similar to the loremX but to create a html table.
Right now, what I have is simple table snippet that creates one column:
{
"html": {
"snippets": {
"ftable": "table>(thead>tr>th)+(tbody>tr>td)"
}
}
}
So whenever I type ftable I'll get:
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
But I want more. I'd like to do something like ftable5:
And get 5 th's/td's instead.
So the emmet code for this case should be:
table>(thead>tr>th*5)+(tbody>tr>td*5)
I don't think I can do that with a simple declaration on the snipper. I suppose I should create a generator for that like the one for loremX, but I have 0 clue on how to even begin, and honestly I couldn't find much information around. It actually surprises me that such a thing doesn't exist yet (or if it does, let me know), as to generate a HTML table you'd still need to type that much code.
I guess your millage may very depending on the tools at hand, but as long as vscode is concerned, it has tabstop options https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax
Let's say your snippet definition looks like the one bellow (notice the $1 placeholder)
"table": {
"scope": "html",
"prefix": "table-n",
"description": "Generates table with n columns",
"body": "table>(thead>tr>th*$1)(tbody>tr>td*$1)"
}
You would typically
type the snippet prefix like table-n
click Enter to select the snippet
the snippet is filled in
cursor for the placeholder blinks
type the number of expected columns
click Tab to trigger the emmet generation
the end result should look like this when $1 is say 3
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Is there a way to bring headers in the column and on click of the header, the attributes associated with the header in a different column using Dojo?
Thanks
Kumar
you can use the event onHeaderCellClick
onHeaderCellClick: function()
{
console.log("do what you want");
}
to add the header, you can do it easily in declarative way like this:
<table data-dojo-type="dojox.grid.DataGrid">
<thead>
<tr>
<th field="fieldName" width="200px">Column Header</th>
</tr>
</thead>
</table>
If you are using declarative way you can use the attribute onHeaderCellClick to your table, onHeaderCellClick="func" call function func().
I am using angularJS to display my result set into a table, that is filterable with totals etc. I was wondering if it would be possible to display a value based on another value if it is = to something. here is an example:
<tr ng-repeat="c in data">
<td>{{c.type}}</td> //expects either 'fixed' or 'hourly'
<td>{{c.fixed_rate}}</td>
<td>{{c.hourly_rate}}</td>
</tr>
Therfore are you able to only display the fixed value if type is fixed, and hourly if the type is hourly without using any JQuery to hide elements?
My mind is kind of stumped on this as I am just a few months in with angular.
Data is pulled from a database* so if there is an SQL option I am all for it.
You could do something like this:
<tr ng-repeat="c in data | filter: filterHourlyOrFixed">
<td>{{c.type}}</td>
<td ng-if="c.type == 'fixed'">{{c.fixed_rate}}</td>
<td ng-if="c.type == 'hourly'">{{c.hourly_rate}}</td>
</tr>
If you want to filter by only those two values, add this function to your controller:
$scope.filterHourlyOrFixed = function (item) {
return item.type === 'fixed' || item.type === 'hourly';
};
If you do not want to filter by the value, remove | filter: filterHourlyOrFixed from the ng-repeat.
Also, when you have some time, do a little reading through the docs for ngIf, ngShow, ngHide, and ngFilter. You'll probably be using these repeated. Also, pay attention to the differences in how ng-if, ng-show, and ng-hide manipulate the DOM to achieve similiar results.
The differences are subtle, but important.
Use ng-if to remove or recreate parts of the DOM based on an expression. for example:
<tr ng-repeat="c in data">
<td>{{c.type}}</td> //expects either 'fixed' or 'hourly'
<td ng-if="c.type=='fixed'">{{c.fixed_rate}}</td>
<td ng-if="c.type=='hourly'">{{c.hourly_rate}}</td>
</tr>
You could also use a filter, if you are rendering identical DOM but want to exclude certain elements.
You could try something like this:
<tr ng-repeat="c in data">
<td ng-if="c.type =='fixed'">Fixed</td>
<td ng-if="c.type =='hourly'">Hourly</td>
<td ng-if="c.type =='fixed'">{{c.fixed_rate}}</td>
<td ng-if="c.type =='hourly'">{{c.hourly_rate}}</td>
</tr>
Hope this helps!
http://embed.plnkr.co/Wes1Uf1OCCmKYa5wTP5s/preview
So I need to get all the values from a bunch of rows using Telerik Test Studio.
I basically recorded a test to go to a certain page on a web app, and I have a row called Session ID with a few randomly generated rows below it and I want to get the values from those rows, to use with code or whatever.
How would I go about doing it?
Here is a picture of what I mean:
This can be achieved in a coded step.
Let's say you have a few rows in a html table and you want to get their values. You need to collect all rows in a collection and then just take the value of each member of the collection.
Here is an example:
HTML:
<table id="table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
</table>
The code of the coded step in C#:
HtmlTable myTable = ActiveBrowser.Find.ById<HtmlTable>("table"); //Locate the table
IList<HtmlTableRow> myList = myTable.Find.AllByTagName<HtmlTableRow>("tr");//Collect all rows.
foreach (HtmlTableRow rows in myList)
{
Log.WriteLine(rows.InnerText.ToString());
}
Here is a video demonstration.
Hope I could help.
You can find the ID or any other attribute in the HTML structure of the application (e.g. in Chrome/IE by pressing F12).
Here is a sample code against Telerik ASP gridview page. Here I am retrieving the first row and then only the first column:
HtmlTable myTable = ActiveBrowser.Find.ById<HtmlTable>("ctl00_ContentPlaceHolder1_RadGrid1_ctl00");
IList<HtmlTableRow> myList = myTable.Find.AllByTagName<HtmlTableRow>("tr");
//First row
Log.WriteLine(myList[11].InnerText.ToString());
//First column
for (int i = 11; i < myList.Count; i++)
{
Log.WriteLine(myList[i].Cells[1].InnerText.ToString());
}
I also recorded another video for a demonstration.
I am trying to replace a table with my own table using grease monkey. The page that has the table has 2 tables with the same class and no IDs.
I need to replace only the second table (with my own table) and do nothing to the first table. There is nothing that really makes the second table unique from the first table, so the only thing I can think of is trying to add a DIV around the second table, but cant figure it out.
Any ideas? Heres the page code:
<h3>Table 1</h3>
<table class="details" border="1" cellpadding="0" cellspacing="0">
<tbody><tr>
<th>1</th>
<td>2</td>
</tr>
</tbody></table>
<h3>Table 2</h3>
<table class="details" border="1">
<tbody><tr>
<th>1</th>
<td>2</td>
</tr><tr>
<th>3</th>
<td>4</td>
</tr>
</tbody></table>
You can use xpath to find the second tables, and do something with it. The xpath expression would be (//table[#class="details"])[2]. Below I added an example which uses (//pre)[1] instead, this will find the first code block on this page, I will hide it as an example. So this hides the page code from your question. (//pre)[2] will hide my script.
See Also here for a tutorial how to use xpath.
// ==UserScript==
// #name so-test
// #namespace test
// #include http://stackoverflow.com/questions/4635696/use-greasemonkey-to-remove-table
// ==/UserScript==
// find first <pre> on this page
var xpathResult = document.evaluate('(//pre)[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
var node=xpathResult.singleNodeValue;
// now hide it :)
node.style.display='none';