I am using Vuetify's datatable and all new entries a customer makes are put at the bottom. Is there a way I can reverse that order so that the newest entries are at the top without having to click the sort button?
template
<v-data-table
:headers="headers"
:items="orders"
:items-per-page="15"
class="elevation-1"
></v-data-table>
script
export default {
name: 'DataTableComponent',
data() {
return {
headers: [
{ text: 'Order Id', align: 'left', value: 'order_id'},
{ text: 'Customer', value: 'customer' },
{ text: 'Order Total', value: 'total', sortable: false},
{ text: 'Date', value: 'date' },
],
orders: this.$store.getters.getOrders
}
}
}
Related
I have a Vuetify data table which takes the headers as an array of objects returned in the component and the data (:items) is bound to an array also returned in the component. This array is populated with Firestore data which is there, because I can console.log it.
The issue is that the data table is empty, and contains no data in the body at all.
Could this be caused because my items array contains more data points then I have headers in my table?
Vuetify Component
<template>
<v-card>
<v-card-title>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="items"
:search="search"
></v-data-table>
</v-card>
</template>
Component Script
<script>
/* eslint-disable */
import firestore from '/firebase.js';
export default {
data() {
return {
search: '',
items: [],
headers: [
{
text: 'ID',
align: 'start',
sortable: true,
value: 'name',
},
{ text: 'Date Created', value: 'Date Created' },
{ text: 'Date Finished', value: 'Date Finished' }
],
show: false,
};
},
name: "Home",
methods: {
getData() {
firestore.collection("itemStore")
.get()
.then(querySnapshot => {
querySnapshot.forEach(doc => {
var itemData = doc.data();
this.items.push({
id: itemData.incId,
dateCreated: itemData.dateCreated,
dateFinished: itemData.dateFinished,
email: itemData.email
});
console.log(this.items);
});
});
}
},
mounted() {
this.getData();
}
};
</script>
The value attribute of your headers collection has to correspond with the keys of your items. So in your case it should look like this:
headers: [
{
text: 'ID',
align: 'start',
sortable: true,
value: 'id',
},
{
text: 'Date Created',
value: 'dateCreated'
},
{
text: 'Date Finished',
value: 'dateFinished'
}
]
I am new in vue js. Using vue2, I have a v-select implemented on my site now, I want to select multiple values and save and show them while editing. But I can't show multiple values properly using :reduce
Here is my code:
<v-select name="allowed_extensions"
:reduce="allowed_extensions => allowed_extensions.value"
multiple
:closeOnSelect="false"
v-model="form.allowed_extensions"
:options="file_options"
v-validate="'required'" > </v-select>
In js:
data () {
return {
isDisabled: false, //Submit Button
form: {
maximum_file_size: '',
allowed_extensions: ''
},
be_errors: {},
// Options
file_options: [
{ label: 'doc', value: 'doc' },
{ label: 'docx', value: 'docx' },
{ label: 'pdf', value: 'pdf' },
{ label: 'txt', value: 'txt' },
{ label: 'gif', value: 'gif' },
{ label: 'png', value: 'png' },
{ label: 'jpg', value: 'jpg' },
{ label: 'jpeg', value: 'jpeg' }
]
}
}
IN Mysql DB, sample data saved as : ["doc","txt"]
But when I want to display them in edit, it showing wrongly in a single tag.
How can I solve this
I wanted to create a drop-down menu options in v-data-table
<v-data-table
:headers="headers"
:items="res"
:options.sync="options"
:server-items-length="totalRes"
:loading="loading"
loading-text="Loading ..... Please wait"
:footer-props="{
itemsPerPageOptions: [5, 10, 20, 40],
itemsPerPageText: 'Res per page',
}"
class="elevation-23"
>
</v-data-table>
data () {
return {
res: [],
totalRes: 0,
search: '',
loading: false,
options: {
page: 1,
itemsPerPage: 40,
},
headers: [
{ text: 'Name', value: 'fullName' },
{ text: 'Med', value: 'med' },
{ text: 'Start Date', value: 'startDate' },
{ text: 'Create ', value: '' },
],
}
},
Here I have a field in header Create in that field I want to show a list of drop-down say for now ['A', 'B', 'C'] and on clicking on any options among the list I wanted to route to certain routes. How do I do it ?
Vuetify v-data-table provides a slot for each of the values. I updated your example by giving the last column the name path so that it may be used in the item slot.
I added the v-select so that you get the drop down effect.
Codepen
<v-data-table
:headers="headers"
:items="res"
item-key="Name"
class="elevation-23"
>
<template v-slot:item.path="{ item }">
<v-select
v-model="cSel"
:items="item.path"
></v-select>
</template>
</v-data-table>
data () {
return {
expanded: [],
singleExpand: false,
cSel: 'A',
res: [
{
fullName: 'name 1',
med: 'med 1',
startDate: 'start date 1',
path: ['A', 'B', 'C', 'D'],
},
],
totalRes: 0,
search: '',
loading: false,
options: {
page: 1,
itemsPerPage: 40,
},
headers: [
{ text: 'Name', value: 'fullName' },
{ text: 'Med', value: 'med' },
{ text: 'Start Date', value: 'startDate' },
{ text: 'Create ', value: 'path', width: '200' },
],
}
For what you are trying to do the expanded row would work to place the links, but if you wanted to have custom data display (the data is in rows, or are other conversions needed) then you may want to consider the named slot.
Regards!
;-J
Have you tried Expandable row: https://vuetifyjs.com/en/components/data-tables#expandable-rows ?
I have a table displaying search results with server side Pagination but when I click the columns, there is no sorting taking place and the server displays the results again for any of the column arrow clicks. Is there any way I can limit the pagination to take place only for the page arrows in the footer and then sorting to take place for the displayed results when i click the columns?
<q-table
dense
:title="Patient result"
:data="searchResultList"
:columns="columns"
:pagination="serverPagination"
row-key="name"
:no-data-label="noDataMessage"
:loading="loading"
#request="request"
>
data() {
return {
filter: '',
columns: [
{
name: 'patientId',
required: true,
label: 'patientId',
align: 'left',
field: row => row.patientId,
format: val => `${val}`,
sortable: true,
}
{
name: 'lastname', align: 'center', label: 'lastname', field: 'lastname', sortable: true,
},
{
name: 'firstname', align: 'center', label: 'firstname', field: 'firstname', sortable: true,
},
{
name: 'dob', align: 'center', label: 'dob', field: 'dob', sortable: true,
},
],
page: 1,
rowsInPage: 25,
};
computed: {
serverPagination() {
return {
sortBy: this.paginationObject.sortBy,
descending: this.paginationObject.descending,
page: this.paginationObject.page,
rowsNumber: this.patientSearchResults.count,
rowsPerPage: this.paginationObject.rowsPerPage,
};
paginationObject: {
sortBy: 'name',
descending: false,
page: 1,
rowsPerPage: 25,
methods: {
request(props) {
this.$store.dispatch('patientSearch/setPaginationObject', props);
},
Use sort-method. You can write a custom function where you can pass the rows(Not all but according to pagination i.e. if the selected page is 1 the rows will be 0-5 from your array. Here I'm guessing the default visible rows will be 5.)
Check out this API reference - https://quasar.dev/vue-components/table
In QTable API, you will find the details about this method.
I'm new in DataTables and I have a simple datatable for which I'm trying to add a Font Awesome fa-info-circle image instead of one column header by using render like:
table = $("#datatable-buttons").DataTable({
data: document.pvm.tableContent(),
columns: [
{ data: "Info", render: function (data, type, full, meta) { if (type === 'display') return '<span style="font-size:75%" class="fa fa-info-circle"></span>' } },
{ data: "WiFi", title: "WiFi" },
{ data: "GPS", title: "GPS" },
],
fixedHeader: true,
dom: "lfBrtip",
buttons: [
{
extend: "copy",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "excel",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "pdfHtml5",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "print",
className: "btn-sm"
},
],
});
But it seems that my icon instead of being just in the header for Info column, there is no icon in the header but in the data columns instead of the correct data. Is is possible to add a icon just for one field in the header?
I believe when you are saying "column header" you mean the title? render() is for rendering column data, you set the column header through the title property :
var table = $('#example').DataTable({
columnDefs: [{
targets: 0,
data: '0', //just use DOM
title: '<i class="fa fa-info-circle fa-lg"></i>'
}]
})
demo -> http://jsfiddle.net/6kp3tvpb/
title can be a function as well :
title: function() {
return '<i class="fa fa-info-circle fa-lg"></i>'
}
But notice that this callback only is called once.