I have copied your code over and am trying to simply get the example working. As far as searching, sorting, paging etc everything works fine. The one thing that doesn't is the rendering of the datasetitems. I'm certain there is some config I am missing.
As you can see the rows appear above the table even though the html is as the example in the docs.
Vue.component('v-select', VueSelect.VueSelect);
Vue.component('Dataset', VueDataset.Dataset);
Vue.component('DatasetItem', VueDataset.DatasetItem);
Vue.component('DatasetInfo', VueDataset.DatasetInfo);
Vue.component('DatasetPager', VueDataset.DatasetPager);
Vue.component('DatasetSearch', VueDataset.DatasetSearch);
Vue.component('DatasetShow', VueDataset.DatasetShow);
var vm = new Vue({
el: '#normsApp',
data: {
users: [{
"_id": "EA265B20-45F2-953C-C534-3E2A7862059C",
"isActive": false,
"onlineStatus": "Do not disturb",
"balance": 93683,
"birthdate": "1946-07-22",
"favoriteColor": "orange",
"firstName": "Harper",
"lastName": "Nolan",
"name": "Harper Nolan",
"company": "Tortor At Risus LLC",
"email": "[email protected]",
"phone": "(0111) 194 7651",
"address": "P.O. Box 298, 5571 Mauris Rd.",
"favoriteAnimal": "owl"
}] // left the rest out for the sake of the example.
cols: [
{
name: 'Name',
field: 'name',
sort: ''
},
{
name: 'Email',
field: 'email',
sort: ''
}
]
},
computed: {
sortBy() {
return this.cols.reduce((acc, o) => {
if (o.sort) {
o.sort === 'asc' ? acc.push(o.field) : acc.push('-' + o.field)
}
return acc
}, [])
}
},
methods: {
click(event, i) {
let toset;
const sortEl = this.cols[i];
if (!event.shiftKey) {
this.cols.forEach((o) => {
if (o.field !== sortEl.field) {
o.sort = '';
}
})
}
if (!sortEl.sort) {
toset = 'asc';
}
if (sortEl.sort === 'desc') {
toset = event.shiftKey ? '' : 'asc';
}
if (sortEl.sort === 'asc') {
toset = 'desc';
}
sortEl.sort = toset;
}
},
mounted() {
}
});
<dataset v-slot="{ ds }"
:ds-data="users"
:ds-sortby="sortBy"
:ds-search-in="['balance', 'name', 'company', 'email', 'phone', 'address', 'favoriteAnimal']">
<div class="row" :data-page-count="ds.dsPagecount">
<div class="col-md-6 mb-2 mb-md-0">
<dataset-show />
</div>
<div class="col-md-6">
<dataset-search ds-search-placeholder="Search..." />
</div>
</div>
<div class="row mt-3">
<div class="col-md-12 table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th v-for="(th, index) in cols" :key="th.field" :class="['sort', th.sort]" v-on:click="click($event, index)">
{{ th.name }} <i class="gg-select float-right"></i>
</th>
</tr>
</thead>
<dataset-item tag="tbody">
<template #default="{ row, rowIndex }">
<tr>
<td>{{ row.name }}</td>
<td>{{ row.email }}</td>
</tr>
</template>
</dataset-item>
</table>
</div>
</div>
<div class="row">
<div class="col-6">
<dataset-info class="mb-2 mb-md-0" />
</div>
<div class="col-6">
<dataset-pager />
</div>
</div>
</dataset>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent