I want to make one of my table's column headers a clickable button. receives columns from parent like via an array like this. As you can see I want to pass a button as the last title.
<BaseTable
:columns="table.columns"
</BaseTable>
.
.
.
table: {
columns: [
{
title: "Role",
},
{
title: "No."
},
{
title: "Milestone"
},
{
title: "Status"
},
{
title: "Condition"
},
{
title:
'<button >+ View all</button>',
}
]
}
And then table component receives it as a prop an displays it like this:
<tr>
<th>
{{ column.title }}
</th>
</tr>
So the end product should look something like this:
How can I do this?
what about doing something like this?
<th>
<button v-if="column.isBtn">{{column.title}}</button>
<template v-else>{{column.title}}</template>
</th>
now in your columns array make the last object look like this:
{
title: "View all",
isBtn: true
}
so what I did is only add button to the table header column and only show it when I pass isBtn with value true in the column object
Hope this code can help you.
I recommend to use scoped slots in order to customize the rendering of that cell :
Vue.component('BaseTable', {
props: ['columns', 'data'],
template: `<table>
<thead>
<tr >
<th v-for="(col,i) in columns" :key="i">
<template v-if="col.key && $scopedSlots[col.key]" >
<slot :name="col.key" :column="col"></slot>
</template>
<template v-else>
{{col.title}}
</template>
</th>
</tr>
</thead>
</table>`
})
var app = new Vue({
el: '#app',
data: {
employees: [{
"id": "1",
"employee_name": "Tiger Nixon",
"employee_salary": "320800",
"employee_age": "61",
"profile_image": ""
},
{
"id": "2",
"employee_name": "Garrett Winters",
"employee_salary": "170750",
"employee_age": "63",
"profile_image": ""
},
{
"id": "3",
"employee_name": "Ashton Cox",
"employee_salary": "86000",
"employee_age": "66",
"profile_image": ""
},
{
"id": "4",
"employee_name": "Cedric Kelly",
"employee_salary": "433060",
"employee_age": "22",
"profile_image": ""
},
{
"id": "5",
"employee_name": "Airi Satou",
"employee_salary": "162700",
"employee_age": "33",
"profile_image": ""
},
{
"id": "6",
"employee_name": "Brielle Williamson",
"employee_salary": "372000",
"employee_age": "61",
"profile_image": ""
}
],
columns: [{
title: 'ID',
},
{
title: 'employee name',
},
{
title: 'employee salary',
},
{
title: 'employee age',
},
{
title: 'View All',
key: 'viewall'
},
]
},
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<div id="app">
<base-table :columns="columns">
<template v-slot:viewall="{col}">
<button class="btn btn-primary">+View All</button>
</template>
</base-table>
</div>
Related
Is there a way in vue-good-table to show dropdown where-ever the data type is array?
Rows given below:
[
{
name: "test",
fqdn: "test",
SystemCustodianId: "test",
SystemCustodianName: "test",
freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
},
{
name: "test",
fqdn: "test",
SystemCustodianId: "test",
SystemCustodianName: "test",
freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
},
]
Columns given below:
[
{
label: "NAME",
field: "name",
},
{
label: "Platform Name",
field: "fqdn",
},
{
label: "System Custodian",
field: "SystemCustodianName",
},
{
label: "System Custodian ID",
field: "SystemCustodianId",
},
{
label: "Frequency",
field: "frequency",
}
]
you need to use the table-row slot.
Here is the code
<template>
<div id="app">
<vue-good-table :columns="columns" :rows="rows">
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'freqency'">
<span style="font-weight: bold; color: blue">
<select>
<option
v-for="(val, index) in props.formattedRow.freqency"
:value="val"
:key="props.column.field + ' ' + index"
>
{{ val }}
</option>
</select>
{{ props.row.age }}
</span>
</span>
<span v-else>
{{ props.formattedRow[props.column.field] }}
</span>
</template>
</vue-good-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
columns: [
{
label: "NAME",
field: "name",
},
{
label: "Platform Name",
field: "fqdn",
},
{
label: "System Custodian",
field: "SystemCustodianName",
},
{
label: "System Custodian ID",
field: "SystemCustodianId",
},
{
label: "Frequency",
field: "freqency",
},
],
rows: [
{
name: "test",
fqdn: "test",
SystemCustodianId: "test",
SystemCustodianName: "test",
freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
},
{
name: "test",
fqdn: "test",
SystemCustodianId: "test",
SystemCustodianName: "test",
freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
},
],
};
},
};
</script>
Working sandbox
I have a javascript object that needs to be displayed in paged format. For example, from the below object, I need to display this as pages based on the value of perPage variable.
{
"fruits":[
{
"from":"Shanghai",
"to":"Houston",
"createdOn":"2019-02-20 17:02:45",
"threadId":"1234564534"
},
{
"from":"Mumbai",
"to":"Texas",
"createdOn":"2019-02-22 17:02:45",
"threadId":"223455678"
}
],
"vegetables":[{
"from":"Barcelona",
"to":"Milan",
"createdOn":"2019-01-20 10:02:45",
"threadId":"45673456"
}],
"paper":[{
"from":"Kualalumpur",
"to":"Singapore",
"createdOn":"2019-02-01 12:02:45",
"threadId":"234222345"
},
{
"from":"Singapore",
"to":"Vancover",
"createdOn":"2019-01-20 11:02:45",
"threadId":"6756434343"
}],
"books":[{
"from":"Jibooty",
"to":"Ahmedabad",
"createdOn":"2019-02-10 17:02:45",
"threadId":"23456789"
}],
"toys":[{
"from":"Shanghai",
"to":"Houston",
"createdOn":"2019-02-20 14:02:45",
"threadId":"123434343"
}],
"electronics":[{
"from":"Somalia",
"to":"Angora",
"createdOn":"2019-02-20 17:02:45",
"threadId":"667676767"
}]
}
If the value of perPage is 5, this should shown as below
<div class="page">
fruits
vegetables
paper
books
toys
</div>
<div class="page">
electronics
</div>
and if the value of perPage is 2, there will be three div's with the class page. fruits and vegetables will be displayed in the first div, paper and books will be displayed in the second div, toys and electronics will be displayed in the third div.
I have prepared a basic code for this in vue js, but it failed in some cases. Can someone have a look at this and let me know where it went wrong ?
<div class="wrapper">
<div v-for="(eachWidget, widgetName, index) in widgetData">
<div v-bind:class="((index != 0) && ((index%perPage) == 0))?'page':''" >
<div class="widget">
<p>{{ widgetName}}</p>
<p class="card" v-for="(eachItem, index) in eachWidget">{{eachItem.from}}</p>
</div>
</div>
At first I calculated pages count based on items length and perpage number.
After that, for each page I list items and check index of item in v-if:
new Vue({
el: "#app",
data: {
perpage: 5,
items: {
"fruits": [{
"from": "Shanghai",
"to": "Houston",
"createdOn": "2019-02-20 17:02:45",
"threadId": "1234564534"
}, {
"from": "Mumbai",
"to": "Texas",
"createdOn": "2019-02-22 17:02:45",
"threadId": "223455678"
}],
"vegetables": [{
"from": "Barcelona",
"to": "Milan",
"createdOn": "2019-01-20 10:02:45",
"threadId": "45673456"
}],
"paper": [{
"from": "Kualalumpur",
"to": "Singapore",
"createdOn": "2019-02-01 12:02:45",
"threadId": "234222345"
}, {
"from": "Singapore",
"to": "Vancover",
"createdOn": "2019-01-20 11:02:45",
"threadId": "6756434343"
}],
"books": [{
"from": "Jibooty",
"to": "Ahmedabad",
"createdOn": "2019-02-10 17:02:45",
"threadId": "23456789"
}],
"toys": [{
"from": "Shanghai",
"to": "Houston",
"createdOn": "2019-02-20 14:02:45",
"threadId": "123434343"
}],
"electronics": [{
"from": "Somalia",
"to": "Angora",
"createdOn": "2019-02-20 17:02:45",
"threadId": "667676767"
}]
}
},
computed: {
length() {
return Object.keys(this.items).length
},
pages() {
return Math.ceil(this.length / this.perpage)
}
}
})
// just to silent vue
Vue.config.productionTip = false;
Vue.config.devtools=false;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>per page:</label>
<input type="number" v-model="perpage" min="1" :max="length">
<ul v-for="n in pages">
<li v-for="(item, title, index) in items"
v-if="index >= perpage * (n-1) && index < perpage * n">
{{ title }}
</li>
</ul>
</div>
hope to help
I'm trying to load some simple JSON data into a jQuery.DataTables (datatables.net), The grid is showing up as it is defined in the HTML, but does not change based on the new data.
What am I missing? any suggestion?
HTML:
<table id="example" class="display" style="width:100%;">
<thead>
<tr>
<th>Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
</tr>
</tbody>
JavaScript: (jQuery and jQuery.DataTables are loaded)
$(document).ready(function () {
$("#example").DataTable({
data: [{ Id: "1" }, { Id: "2" }],
columns: { data: "Id", title: "ID" }
});
});
Your column data should be set of Array. Something like this
$(document).ready(function () {
$("#example").DataTable({
data: [{ Id: "1" }, { Id: "2" }],
columns: [{ data: "Id", title: "ID" }]
});
});
For Dynamic Data using ajax
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data/objects.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
JSON txt file
{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}
]
}
More detail Here
Try this
var options = {
data: [{ Id: "1" }, { Id: "2" }],
columns: { data: "Id", title: "ID" }
}
var dataTable = $("#example").DataTable(options );
// Reload and refresh
dataTable.draw();
So, the my code for injecting the JSON data (or as a variable) is fine, the problem was another click event for the grid that I forgot I added before the initialization of that grid (bad bad me)
$("#example " + "tbody").on("click", "tr", function () {
var data = table.row(this).data();
isDebug && console.log('You clicked on ' + data[0] + '\'s row');
isDebug && console.log(data);
});
I have a table with two columns(Location and Users). The location is static information but the users is a multi-select using Vue-Select.
I need to shows users currently selected for a location on page load. I grab that information from a database.
I also need to be able to change the selected users of a location by using a multi-select that shows all users. Example Mock
Vue Outline
<table>
<thead>
<tr>
<th class="col-xs-2">Locations</th>
<th class="col-xs-8">Users</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows" v-bind:key="index">
<td>
<span>{{ row.location }}</span>
</td>
<td>
<v-select multiple v-model="row.users">
<option v-for="user in allUsers" :key="user.id" :value="user.id">{{ user.name }}</option>
</v-select>
</td>
</tr>
</tbody>
</table>
Vue
var app = new Vue({
el: '#el',
data() {
return {
errors: [],
loading: false,
rows: this.assignments,
allUsers: this.users
}
},
props: {
assignments: Array,
users: Array
},
})
Example of how rows are returned from database
[{
"locations":[
{ "id":1,
"name":"SomePlace, CA",
"users": [
{"id":1, "name":"Person One"},
{"id":2, "name":"Person Two"}
]
},
{ "id":2,
"name":"AnotherPlace, CA",
"users": [
{"id":3, "name":"Person Three"}
]
}
]
},
{
"locations":[
{ "id":1,
"name":"SomePlace, CA",
"users": [
{"id":1, "name":"Person One"},
{"id":2, "name":"Person Two"}
]
},
{ "id":2,
"name":"AnotherPlace, CA",
"users": [
{"id":3, "name":"Person Three"}
]
}
]
}]
Example of how all users are returned from database
[
["id":1, "name":"Person One"],
["id":2, "name":"Person Two"],
["id":3,"name":"Person Three"],
]
I had moved the data coming via props directly to data object, since your rows property has one item which contains locations array, i looped through the first item rows[0] and i put row as the select options :options="row" and for the second column i looped through the user of the selectedLocation :
Vue.component('v-select', VueSelect.VueSelect)
var app = new Vue({
el: '#app',
data() {
return {
errors: [],
loading: false,
rows: [{
"locations": [{
"id": 1,
"name": "SomePlace, CA",
"users": [{
"id": 1,
"name": "Person One"
},
{
"id": 2,
"name": "Person Two"
}
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{
"id": 3,
"name": "Person Three"
}]
}
]
},
{
"locations": [{
"id": 1,
"name": "SomePlace, CA",
"users": [{
"id": 1,
"name": "Person One"
},
{
"id": 2,
"name": "Person Two"
}
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{
"id": 3,
"name": "Person Three"
}]
}
]
}
],
allUsers: this.users
}
},
props: {
assignments: Array,
users: Array
},
})
<table>
<thead>
<tr>
<th class="col-xs-2">Locations</th>
<th class="col-xs-8">Users</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows[0].locations" v-bind:key="index">
<td class="lead-locations">
{{row.name}}
</td>
<td class="lead-users">
<v-select multiple v-model="row.users" label="name">
</v-select>
</td>
</tr>
</tbody>
</table>
for demo check this code
I believe that the sample data supplied to the "rows" variable are missing.
So, I will make an imaginary assumption here that you have some web servers distributed in multiple locations and you want to manage access of users.
The following is my imaginary data for "rows" variable which is close enough to your data:
[
{
"serverID": 1,
"serverName": "My Backend API Server",
"locations": [
{
"id": 1,
"name": "SomePlace, CA",
"users": [
{ "id": 1, "name": "Person One" },
{ "id": 2, "name": "Person Two" }
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{ "id": 3, "name": "Person Three" }]
}
]
},
{
"serverID": 1,
"serverName": "My Frontend App Server",
"locations": [
{
"id": 1,
"name": "SomePlace, CA",
"users": [
{ "id": 1, "name": "Person One" },
{ "id": 2, "name": "Person Two" }
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{ "id": 3, "name": "Person Three" }]
}
]
}
]
Now, we have to loop over the servers array first, then loop over the locations array to get some thing close to your mock as follows:
Check this pen for the implementation.
JS Code:
Vue.component('v-select', VueSelect.VueSelect)
let servers = [
{
"serverID": 1,
"serverName": "My Backend API Server",
"locations": [
{
"id": 1,
"name": "SomePlace, CA",
"users": [
{ "id": 1, "name": "Person One" },
{ "id": 2, "name": "Person Two" }
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{ "id": 3, "name": "Person Three" }]
}
]
},
{
"serverID": 1,
"serverName": "My Frontend App Server",
"locations": [
{
"id": 1,
"name": "SomePlace, CA",
"users": [
{ "id": 1, "name": "Person One" },
{ "id": 2, "name": "Person Two" }
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{ "id": 3, "name": "Person Three" }]
}
]
}
];
let users = [
{"id":1, "name":"Person One"},
{"id":2, "name":"Person Two"},
{"id":3,"name":"Person Three"},
];
var app = new Vue({
el: '#app',
data() {
return {
errors: [],
loading: false,
selectedLocation: {},
rows: servers,
allUsers: users
}
}
})
HTML Code:
<div id="app">
<table>
<thead>
<tr>
<th class="col-xs-2">Locations</th>
<th class="col-xs-8">Users</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows" v-bind:key="index">
<td colspan="2">
<b>{{ row.serverName }}</b>
<table>
<tr v-for="(location, l_index) in row.locations" v-bind:key="l_index">
<td class="col-xs-2">{{ location.name }}</td>
<td class="col-xs-8">
<v-select multiple v-model="location.users" label="name" :options="allUsers">
</v-select>
</td>
</tr>
</table>
</td>
<td class="lead-locations">
{{ row.locations.name }}
</td>
<td class="lead-users">
</td>
</tr>
</tbody>
</table>
</div>
I am trying to render DataTable-rows from a json file, placed on the same directory. But unfortunately, the DataTable-Body stays empty, and no error is displayed in the console.
Here is the (reduced) HTML-Code:
<table id="opTable">
<thead>
<tr><th class="partner_id">ID</th><th>ShortName</th><th>DisplayName</th><th>LogoUrl</th><th>Incent</th><th>JTS-URL</th></tr>
</thead>
<tbody>
</tbody>
</table>
Here is the JavaScript I am using to load the data from the json file:
<script>
$(document).ready(function() {
$('#onlinePartnerTable').DataTable({
"ajax" : "../test2.json",
"columns": [{
"data": "pId"
}, {
"data": "shrName"
}, {
"data": "DplayName"
}, {
"data": "lgo"
}, {
"data": "inc"
}, {
"data": "featured"
}]
});
});
</script>
and here is a sample of my json file:
{
"partnerList": [
{
"shrname": "bchan",
"Dplayname": "bchang-Shop",
"pId": "id12345",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "1 to 1",
"dets": {
"tmage": "someUrl/here",
"desp": "desciption",
"jturl": "jtUrl/here",
"jtbut": "Shop",
"termy": [
{
"heady": "",
"body": ""
}
]
}
},
{
"shrname": "hereIsIt",
"Dplayname": "HereIs-Shop",
"pId": "id65432",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "2 to 1",
"dets": {
"tmage": "someUrl/here",
"desp": "desciption",
"jturl": "jtUrl/here",
"jtbut": "Shop",
"termy": [
{
"heady": "",
"body": ""
}
]
}
}
]
}
I am becomming this error now.. See the image below.
try this
var t = [{
"shrname": "bchan",
"Dplayname": "bchang-Shop",
"pId": "id12345",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "1 to 1",
"dets": {
"tmage": "someUrl/here",
"desp": "desciption",
"jturl": "jtUrl/here",
"jtbut": "Shop",
"termy": [{
"heady": "",
"body": ""
}]
}
}, {
"shrname": "hereIsIt",
"Dplayname": "HereIs-Shop",
"pId": "id65432",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "2 to 1",
"dets": {
"tmage": "someUrl/here",
"desp": "desciption",
"jturl": "jtUrl/here",
"jtbut": "Shop",
"termy": [{
"heady": "",
"body": ""
}]
}
}];
$(document).ready(function() {
$('#opTable').DataTable({
"aaData": t,
"columns": [{
"data": "pId"
}, {
"data": "shrname"
}, {
"data": "Dplayname"
}, {
"data": "lgo"
}, {
"data": "inc"
}, {
"data": "featured"
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<table id="opTable">
<thead>
<tr>
<th class="partner_id">ID</th>
<th>ShortName</th>
<th>DisplayName</th>
<th>LogoUrl</th>
<th>Incent</th>
<th>JTS-URL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Based on one of the links Turnip provided in the comments, Datatables Ajax Data Source (objects), your data should look like this:
{
"data": [
{
"shrname": "bchan",
"Dplayname": "bchang-Shop",
"pId": "id12345",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "1 to 1",
},
{
"shrname": "hereIsIt",
"Dplayname": "HereIs-Shop",
"pId": "id65432",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "2 to 1",
}
]
}
I'm not sure what you're trying to do with the "dets" part of your data though