I'm trying to create a vue component to all my datagrids, I'm using DataTables library (https://datatables.net/), so, i've already create my vue component:
GridDatos.vue
<template>
<div class="container">
<h4>{{titulo}}</h4>
<table id="example" class="table table-striped table-bordered nowrap" style="width:100%">
<thead>
<tr>
<th v-for="col in colNames">{{col}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>sssss</td>
<td>sssss</td>
<td>sssss</td>
<td>sssss</td>
<td>sssss</td>
<td>sssss</td>
</tr>
</tbody>
<tfoot>
<tr>
<th v-for="col in colNames">{{col}}</th>
</tr>
</tfoot>
</table>
</div>
The instance:
Vue.component('grid-datos', require('./components/GridDatos.vue').default);
And the usage:
<div id="app">
<grid-datos
url="/api/listadoContactos"
titulo="Mis Datos"
:col-names="('Name','Position','Office','Age','Start date','Salary')">
</grid-datos>
</div>
But the problem here is the table header, it seems to use the last array element as you can see in the screenshot:
Titles
Definitely i'm not setting the array correctly when call the component.
Could anybody help me?
Thanks a lot. Regards.
Related
The object name has space like 'Apple Juice','Orange Juice', so how can I use it in v-for?
<div id="box" v-if="!loading">
<table>
<thead>
<tr>
<th>Name</th>
<th>Total Sales</th>
</tr>
</thead>
<tbody>
<tr v-for="name in Beverage" v-bind:key="name">
<td>{{name.Txn Group}}</td> //error
<td>{{name.TotalSales}}</td>
</tr>
</tbody>
</table>
</div>
I called API and get JSON data, so I unable to change the object name.
Thanks.
You can write it like {{ name['Txn Group'] }} and it will work properly.
Good evening, everyone,
I have a vue-template which should generate a table. The table header, more precisely the number of individual column headers can be determined dynamically via the "slots".
Unfortunately there is always the error that there can only be one root element.
How can I - as easy as possible - make sure that my components are inserted into the header anyway.
table.vue
<template>
<table>
<thead>
<tr>
<slot></slot>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</template>
And this ist how i would like to use it:
<lbtable>
<th>Column 1</th>
<th>Column 2</th>
</lbtable>
Here the error-message: Cannot use slot as component root element because it may contain multiple nodes.
Edit:
Here you can find the example:
https://codesandbox.io/s/small-waterfall-k6fit
Try this! You just need to wrap <th> with <template> tag.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<lbtable>
<template>
<th>Column 1</th>
<th>Column 2</th>
</template>
</lbtable>
</div>
</body>
</html>
<script>
Vue.component('lbtable', {
'template': `
<div>
<table border="1">
<thead>
<tr>
<slot></slot>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>`});
new Vue({
el: "#app"
});
</script>
I have this simple html table
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
<tbody>
<tr>
<td>MyName</td>
<td onclick="delete()">X</td>
<td onclick="update()">U</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#mytable').DataTable();
});
</script>
If i open this on the browser i get
"Cannot read property 'mData' of undefined".
I don't undestand where is the problem.. I am following the official example: https://datatables.net/examples/basic_init/complex_header.html
Thank you all!
your html have unmatched number of columns, notice the first row of your header has colspan while the second row doesn't.
what you can do is to provide a rowspan.
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
here's a link to the datatables example of complex headers. https://datatables.net/examples/basic_init/complex_header.html
I'm using Angular-datatables and when I define the table using the angular renderer I can see nice arrows for sorting column.
<table class="dataTable row-border hover" datatable="ng" dt options="vm.dtOptions">
<thead>
<tr>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">My header</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ex in ::vm.exes">
<td>{{ex.myValue}}</td>
</tr>
</tbody>
</table>
When I define the columns with DTColumnBuilder.newColumn the arrows are missing (sorting works).
<table datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns"
class="dataTable row-border hover"
dt-disable-deep-watchers="true"
dt-instance="vm.dtInstanceCallback">
</table>
and
vm.dtColumns = [
DTColumnBuilder.newColumn('myValue').withTitle('My header'),
Can I bring the sorting arrows back?
I have put together a Bootply demonstration here: http://www.bootply.com/Ss2aAnzqlZ.
It's a panel with a table as per http://getbootstrap.com/components/#panels-tables. However, I've also made the panel collapsible. The collapsing bit works OK, but the table itself doesn't retain shape. As you'll see in the Bootply, it doesn't fill the width of the panel when you first load the page. When you click "Improvements" in the panel header to collapse the panel, the table takes up the full panel width during the animation, then disappears. When you click again to show the panel content, the table is the full width until the animation stops, at which point, it shrinks back to what looks like an "auto" width.
Oddly enough, inspecting the table element shows that the table itself is full width, but the thead, tbody and tfoot aren't.
I've sort of tracked it down to the presence of the "collapse" class in the table. If you start the Bootply without the "collapse" class, it's full width until you collapse the panel. When you expand it, it goes back to auto width. I don't know why ... do you?
Here's the snippet, but the collapsing doesn't appear to run here. The Bootply is better.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div style="margin:15px">
<div class="panel panel-default">
<div class="panel-heading">
Improvements
</div>
<table id="improvementsPanel" class="table panel-collapse collapse in" aria-expanded="true" style="">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Qty</th>
<th>UOM</th>
<th class="text-right">Rate</th>
<th class="text-right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td class="text-right">133.00</td>
<td>m²</td>
<td class="text-right">425.00</td>
<td class="text-right">56,525</td>
</tr>
<tr>
<td>Item 2</td>
<td class="text-right">85.00</td>
<td>m²</td>
<td class="text-right">70.00</td>
<td class="text-right">5,950</td>
</tr>
<tr>
<td>Item 3</td>
<td class="text-right">25.00</td>
<td>m²</td>
<td class="text-right">100.00</td>
<td class="text-right">2,500</td>
</tr>
<tr>
<td>Item 4</td>
<td class="text-right"></td>
<td></td>
<td class="text-right"></td>
<td class="text-right">1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="4">Total</th>
<th class="text-right">66,475</th>
</tr>
</tfoot>
</table>
</div>
</div>
The collapse class toggles the display style on the table between none and block and this appears to be interfering with the standard table CSS.
You can resolve this by putting your table inside a div and setting that div to collapse rather than the table.
New Bootply: http://www.bootply.com/L8h2OdpMuD
HTML:
<div style="margin: 15px">
<div class="panel panel-default">
<div class="panel-heading">
Improvements
</div>
<div id="improvementsPanel" class="panel-collapse collapse in" aria-expanded="true">
<table class="table">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Qty</th>
<th>UOM</th>
<th class="text-right">Rate</th>
<th class="text-right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td class="text-right">133.00</td>
<td>m²</td>
<td class="text-right">425.00</td>
<td class="text-right">56,525</td>
</tr>
<tr>
<td>Item 2</td>
<td class="text-right">85.00</td>
<td>m²</td>
<td class="text-right">70.00</td>
<td class="text-right">5,950</td>
</tr>
<tr>
<td>Item 3</td>
<td class="text-right">25.00</td>
<td>m²</td>
<td class="text-right">100.00</td>
<td class="text-right">2,500</td>
</tr>
<tr>
<td>Item 4</td>
<td class="text-right"></td>
<td></td>
<td class="text-right"></td>
<td class="text-right">1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="4">Total</th>
<th class="text-right">66,475</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
Alternatively, you can add the css:
table.collapse.in {
display: table;
}
Arguably this could be a patch to component-animations.less.