test.html
<gid>
<grid-col prop1=""></grid-col>
<grid-col-checkbox prop1=""></grid-col-checkbox>
<grid-col-radio prop1=""></grid-col-radio>
<grid-col-custom prop1=""></grid-col-custom>
</grid>
test.js
export class Test {}
==============
grid.html
<table>
<tbody>
<td>test</td>
=======
<template classs="foo-class" repeat="">
</template>
======
</tbody>
</table>
grid.js
export class Grid {}
I want to insert the below things in table body. so that they will repeat for entire data
<grid-col prop1=""></grid-col>
<grid-col-checkbox prop1=""></grid-col-checkbox>
<grid-col-radio prop1=""></grid-col-radio>
<grid-col-custom prop1=""></grid-col-custom>
Can any one help how we can do this?
You can create a template for your table row:
my-table-row-template.html
<template>
<td>
<grid-col prop1=""></grid-col>
</td>
<td>
<grid-col-checkbox prop1=""></grid-col-checkbox>
</td>
<td>
<grid-col-radio prop1=""></grid-col-radio>
</td>
<td>
<grid-col-custom prop1=""></grid-col-custom>
</td>
</template>
NOTE: you can omit the <td></td> elements if they are already in your grid-col-x components
then to use just
<require from="my-table-row-template.html"></require>
<tr repeat.for="item of items">
<my-table-row-template item.bind="item"></my-table-row-template>
</tr>
REFERENCE: http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.1.3/doc/article/cheat-sheet/4
Related
I have a vuejs-datatable, and now I want to have an option-column with edit- / delete-links.
This is the table-body which gets iterated from the function getRows():
<tbody>
<tr v-for="(row, idr) in get_rows()" v-bind:key="idr">
<td>{{row.id}}</td>
<td>{{row.email}}</td>
<td>
<b-icon-pencil-square></b-icon-pencil-square>
<b-icon-trash></b-icon-trash>
</td>
</tr>
</tbody>
Now the td with the {{row.id}} and {{row.email}} are fine. However the :data-id="row.id" displays only the id of the first entry. Links in every row in my table have the same data-id. I do not understand why this is happening and what am I doing wrong.
Use code below (notice, it's not using data-id):
<tbody>
<tr v-for="(row, idr) in get_rows()" v-bind:key="idr">
<td>{{row.id}}</td>
<td>{{row.email}}</td>
<td>
<b-icon-pencil-square></b-icon-pencil-square>
<b-icon-trash></b-icon-trash>
</td>
</tr>
</tbody>
I want to find all elements in the table that match the following conditions:
-div text contains '2019';
-div class='excellent';
here is the HTML code excerpt:
<tr>
<td>Name of Person1</td>
<td>
<div class="testDate">21/12/2019</div>
<div class="excellent"></div>
</td>
</tr>
<tr>
<td>Name of Person2</td>
<td>
<div class="testDate">01/12/2017</div>
</td>
</tr>
I tried this solution:
//tr/td[2][div/text()='21/12/2019'][div[#class='starred']]
but I need the year only and not entirely date.
Use the below xpath.
//tr/td[div[contains(.,'2019')]and div[#class='excellent']]
Screenshot:
I have a Component in Vue
I need to add list of 6 items to the table 2x3.
Is there any way to conditionally add "" after every second insert?
<template>
<tr>
<td>asdasd</td><td>qweqwe</td>
<!-- here i would like to insert </tr><tr> after every second add
v-if="post.tag%2"? -->
</tr>
You could do something like this:
<table>
<tr v-for="i in fruits.length/2"> <!--- create a row for every second item -->
<td>
Fruit: {{fruits[i*2]}}
</td>
<td v-if="i*2+1 < fruits.length"> <!--- check if there is another item left to display -->
Fruit: {{fruits[i*2+1]}}
</td>
</tr>
</table>
It's not very elegant, but it does the job! I made a Codepen here.
I'm having a problem with my table when I scroll to the right
this is my code
TableComponent.vue
<div id="main-container">
<table class="maint-table">
<thead id="table-header">
<tr>
<th class="dates"> </th>
<th v-for="data in dateHeader">{{data}}</th>
</tr>
<tr>
<th class="title"> </th>
<th v-for="data in dayOfWeek">{{data}}</th>
</tr>
</thead>
<tbody id="table-body" #scroll="fixedScroll">
<table_block :table_data="dataHeader"></table_block>
<table_block :table_data="allData"></table_block>
</tbody>
</table>
</div>
...
...
...
<script>
components: {
table_block
},
methods: {
fixedScroll() {
fixedScroll(event) {
var thead = document.getElementById("table-header");
var tbodyScroll = document.getElementById("table-body").scrollLeft;
thead.scrollLeft = tbodyScroll;
}
</script>
I made a props to pass the data to my TableBlock to loop through the data and display it on the table. This is my TableBlock Code.
TableBlock.vue
<template>
<div>
<tr v-for="row in table_data">
<td>
<div class="drop-down-container"><span class="drop-down-controller"">{{ row.title }}</span></div>
</td>
<td v-for="cel in row.data" class="group-header">{{ cel }}</td>
</tr>
</div>
</template>
When I scroll it to the right, the first column must freeze but it's not.
I tried to create a dummy data inside TableComponent.vue with a normal HTML Table without passing the data to another component using props, it works perfectly. But when I use these codes, it doesn't work correctly.
Scenario
Let say I have 10 columns in the table, when I scroll it to the right, the 1st column will stick which is normal but when the 10th column reach to 1st column, the 1st column will scroll away together with the 10th column.
I'm trying my best to illustrate the scenario but this is the best that I can do. If someone can help, please help me.
After reading docs & forums for hours... still have no answer.
Have the following JS/HTML:
Vue.component("my-component", {
props: ["id"],
render: function(h) {
return h("tr", this.$slots.default);
}
});
var vapp = new Vue();
<script src="https://unpkg.com/vue#2.4.2/dist/vue.js"></script>
<table>
<tr is="my-component" :name="yo">
<td>
<span v-text="name"></span>
</td>
</tr>
</table>
Use tr + "is" attribute to specify component within the table otherwise browser will hoist it out as invalid content. Done
Use render + h("tr"...) because vuejs doesn't render tr element, but instead table > td and again browser hoist it out.Done
Now I have table > tr > td rendered well but how can I add children bound to the props/data, so I will see "yo" on the screen.
Thanks a lot!
If the elements in the slot need access to data inside the component, then you need to use a scoped slot.
Since you are using a render function, the scoped slot is available as a function through this.$scopedSlots.default() and you pass it an object with the data you want to be made available to the scoped slot.
You also need to define the scoped slot in the template. Here is an example.
Vue.component("my-component", {
props: ["id", "name"],
render: function(h) {
return h("tr", this.$scopedSlots.default({name: this.name}));
}
});
var vapp = new Vue({ el:"#app"});
<script src="https://unpkg.com/vue#2.4.2/dist/vue.js"></script>
<div id="app">
<table>
<tr is="my-component" :name="'yo'">
<template scope="{name}">
<td>
<span v-text="name"></span>
</td>
</template>
</tr>
</table>
</div>
If you are using .vue files you can have the table row component defined like this:
<template>
<tr>{{ name }}</tr>
</template>
<script>
export default {
name: 'table-row',
props: ['name'],
};
</script>
Then use it like this:
<table>
<tr is="TableRow" name="Some name here"></tr>
</table>
<table>
<thead>
<!-- ...some th -->
</thead>
<tbody>
<tr>
<td>..</rd>
</tr>
<template> <row-component my-param="blabla"></row-component> <!-- component return full row <tr>...</tr> -->
<some-other-recomponent my-par="blabla"></some-other-recomponent> <!-- component return full row <tr>...</tr> -->
</template>
</tbody>
</table>
If your're interested in returning multiple rows from your component, you can do like this.
In your main component.
<table width="90%">
<thead>
<tr>
<th width="1%">#</th>
<th>header description</th>
</tr>
</thead>
<template>
<your-child-component
:prop="prop-data"
v-for="(lancamento, index) in lancamentos"
:key="lancamento.id">
</your-child-component
</template>
</table>
And inside your child component
<template>
<tbody> <!-- dont forget this tag -->
<tr>
<td rowspan="2" v-html="prop.id"></td>
<td><td>
</tr>
<tr>
<td colspan="2" class="text-center"></td>
</tr>
</tbody>
</template>