Getting my head around ngtable but what I cant find is a way to export the tabledata to a pdf format? Is there any plugin available that can do this?
We implemented http://www.cloudformatter.com/css2pdf with ng-table. Here's a fiddle to the sample:
http://jsfiddle.net/js64b/1181/
The relevant code is below. The one trick is to be sure to pass the option "namespaces" into the formatter to include (any) reference to the ng: namespace. In the example below, we just point it to "http://www.foo.net".
This is required as the content from the HTML DOM is scraped with these in place, turned to XML and transformed. This technique puts this (disregarded) namespace on the document so that it is not an error.
<script type="text/javascript" ng:autobind
src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script>
<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xeponline.jqplugin.js"></script>
<script src="http://www.cloudformatter.com/Resources/jquery.min.js"></script>
<div id="printme">
<table ng:controller="SortableTableCtrl">
<thead>
<tr>
<th ng:repeat="(i,th) in head" ng:class="selectedCls(i)" ng:click="changeSorting(i)">{{th}}</th>
</tr>
</thead>
<tbody>
<tr ng:repeat="row in body.$orderBy(sort.column, sort.descending)">
<td>{{row.a}}</td>
<td>{{row.b}}</td>
<td>{{row.c}}</td>
</tr>
</tbody>
</table>
</div>
<button onclick="return xepOnline.Formatter.Format('printme',{render:'download',namespaces:['xmlns:ng="http://www.foo.net"']});">PDF</button>
While it's not specifically built for ngtable, a plugin called jsPDF may work for you.
https://parall.ax/products/jspdf
or the git
https://github.com/MrRio/jsPDF
Related
I'm trying to make components that would handle some table data for me. I figured the best approach is to create a component for each part of the table.
So, I have
Vue.component('my-table', { ... });
Vue.component('my-table-header', { ... });
Vue.component('my-table-header-column', { ... });
As I was writing the code, my HTML looked like this first:
<my-table inline-template>
<table>
<thead>
....
</thead>
<tbody>
....
</tbody>
</table>
</my-table>
This worked just fine.
Now I wrote the second component (my-table-header) and changed the HTML like so:
<my-table inline-template>
<table>
<my-table-header inline-template>
<thead>
....
</thead>
</my-table-header>
<tbody>
....
</tbody>
</table>
</my-table>
This however results in vue complaining that "Inline-template components must have exactly one child element."
I can't seem to find a good explanation on what I'm doing wrong here. It seems just by using a nested component, I create this issue.
The problem was indeed with table element being finicky ands stuff getting thrown out.
I finally managed to get this working with is="component-name" construct, like so:
<my-table inline-template>
<table>
<thead is="my-table-header" inline-template>
<thead>....</thead>
</thead>
<tbody>
....
</tbody>
</table>
</my-table>
Ask me not why I had to repeat the thead tag. It wouldn't render without it.
Must the render method of a Vue component be used exclusively or can it be combined with a template? Most of my component can be rendered using a template but just need a small part of it to be rendered using code. If this is possible how can I combine the render method output with the template?
Example in component:
<template>
<table>
<tr>
// use render method here
</tr>
<tr v-for="row in rows">
// use render method here
</tr>
</table>
</template>
Need render method in spots above to loop through the array $scopedSlots.column and render each <th> and <td> based on multiple <templates v-slot:column={row}> provided by parent.
As far as I know you can either use the render function or a template - but not both. They can not be combined.
What you could do to make your example work is to use the v-html-directive, which updates the innerHTML of an element https://012.vuejs.org/api/directives.html#v-html.
new Vue({
el: '#el',
data: {
rows: ['row1', 'row2', 'row3']
},
methods: {
renderRow(row) {
return `<td>${row}</td>`;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="el">
<table>
<tr v-for="row in rows" v-html="renderRow(row)">
</tr>
</table>
</div>
I'm having this same challenge as well. Which is how I came to your question.
As others have said, it seems you can either use a template or render function but not both.
My suggestion would be to have a component handle only the render function, while the parent component can use the template method
So, Per your example
<template>
<table>
<tr>
<component-using-only-render-method />
</tr>
<tr v-for="row in rows">
<component-using-only-render-method />
</tr>
</table>
</template>
I think its the best of both worlds with minimal compromise
I am trying to learn proper use of locators to find nested elements. Using a modified table from w3school (for illustration porpouses), what is a good way of collecting the row elements belonging to the tbody (while exclude those belonging to thead)?
I was thinking:
element(by.tagName('tbody')).element.all(by.tagName('tr'))
This does not work since a sublocator can not be a an elementArrayFinder (if I have understood correctly).
Is it possible to write:
element.all(by.css('tbody tr')) ?
(I will try that last tomorrow after a long day).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>HTML Table</h2>
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
</body>
</html>
For nested selection in Protrator, you have to all diretly to the previous all method call like,
element(by.tagName('tbody')).all(by.tagName('tr'))
Even you can use to select the deep child like this,
element(by.tagName('tbody')).all(by.tagName('td'))
Yes. by.css('tbody tr') is for finding element by css selector. Using them in element.all() will return all the element matching the css selector.
element.all(by.css('tbody tr'));
As it is tr a immediated child, you can try this as well,
element.all(by.css('tbody>tr'));
I'm using bootstrap and Vue.js for a webapp. But I can't use bootstrap table css in a Vue component. When I write
<table>
<tr class='active'>
<td>place</td>
<td>holder</td>
</tr>
</table>
outside Vue component the css works okay and the table is properly formatted. But when I use the same code within <template>...</tenplate> tag of the Vue component, the active style of bottstrap table css is not applied to the table row.
I am keeping the Vue component in a .vue file and compiling with webpack.
What's going wrong?
Adding a tbody element to the table solved the problem. The code now reads
<table>
<tbody>
<tr class='active'>
<td>place</td>
<td>holder</td>
</tr>
</tbody>
</table>
The CSS is working properly now.
I can see table working properly in Vue component. Following is code for table I am using:
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Here is working fiddle.
I'm currently using CrossVideo Galery 6.6 with DotNetNuke (DNN). I'm looking at the IDs of HTML tags within a ViewList and I'm seeing something like
<table id="**dnn_ctr782_ViewTagList_ctl04_dlTag**" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr align="left">
<td align="left" valign="top">
<a id="**dnn_ctr782_ViewTagList_ctl04_dlTag_lnkName_0**" class="Normal" target="_self" ... >.mp4(2)</a>
<a id="**dnn_ctr782_ViewTagList_ctl04_dlTag_lnkRss_0**" ... >
...
This code snippet comes from the source code of the page at: http://dnnmodule.com/Modules/CrossVideoGallery/DNNVideoGalleryModule.aspx
I know the "782" portion of the id attribute pertains to the module id number. Can someone tell me what the “ctl05” pertains to? And is it stored within a table that I can access?
Turns out I can get the entire name by using the code in the ascx file and assign it right to a variable in javascript:
<script type="text/javascript">
m_ClientIdPrefix = '<%=this.Control.ClientID %>'; // retruns dnn_ctr2586_ViewList_ctl02
</script>
All ids will be prefixed with this when HTML is responded from the server. Useful if you want to manipulate anything on the client side of DNN.