Metronic 8 Vue - api service
HI all,
I`d like to hear from Vue, TS masters how to send post request with api service.
Below example work fine but I've changed post method in apiservice
from
params: AxiosRequestConfigto
params: anyhow to do it without changing apiService? Can you also pass example code how to fill kt_datatable with my example? and additional question ... how to hide some columns on mobile device? thanks in advance
setup() {
const params = { // just for testing - this goes from form
SalesRepresentativeId: [189],
Start: "2022-04-21",
End: "2022-04-21",
};
var transactions = reactive({});
onMounted(() => {
ApiService.post("api/dev/transactions", params)
.then(({ data }) => {
transactions = data;
console.log(transactions);
})
.catch(({ response }) => {
console.log(response.data);
});
});
return {
transactions,
};
},Replies (7)
Thank you Lauris.
This helped me.
table data counter: {{ tableData.length }} <!-- this shows 13 -->
<Datatable
:table-header="tableHeader"
:table-data="tableData"
:rows-per-page="tableData.length"
:enable-items-per-page-dropdown="false"
>
(...)
let tableData = ref([{}]);this shows only 1 row and 13 pages ( tableData had length = 13 )
p.s. I also extend this component of ability to mark row with a color
If you did everything correctly then the table should render all your data.
Do you have any errors in your browser console?
Great Lauris, it would be nice to have this hiding functionality.
Regarding api I've changed apiservice post method - the original way lead me to change my backend.
Can you please check my code? Backend is sending me [{acronym, documentNo, dueDate, others},{...}]
So below example dirty code show only fixed data. Is it that the backed gives me more fields than in fixed data?
setup() {
const tableHeader = ref([
{
key: "checkbox",
sortable: false,
},
{
name: "Acronym",
key: "acronym",
sortable: true,
},
{
name: "Document",
key: "documentNo",
sortable: true,
},
{
name: "Date",
key: "dueDate",
sortable: true,
},
{
name: "Actions",
key: "actions",
},
]);
let tableData = ref([
{
acronym: "John Doe",
documentNo: "wz-400",
dueDate: "2022-02-02",
},
{
acronym: "Miami Vice",
documentNo: "wz-44/sp/00",
dueDate: "2022-02-01",
},
]);
onMounted(() => {
setCurrentPageBreadcrumbs("Transaction list", ["sub", "subSub"]);
getTransactions();
});
const params = {
SalesRepresentativeId: [189, 315],
Start: "2022-04-21",
End: "2022-04-21",
};
function getTransactions(): void {
ApiService.mypost("api/dev/transactions", params)
.then(({ data }) => {
tableData = data;
})
.catch(({ response }) => {
console.log("API Request went wrong.");
});
}
return {
tableHeader,
tableData,
};
},Again: thanks for your time, KTDataTable with hiding cols -> KTOscar for this
ooow I forget point 3
something like select2 would be also KTOscar
Dropdown with search
Hi,
If your API returns more fields than you defined in your header configuration then these fields will be ignored.
Also instead of reassign a variable
tableData = data;please make it in this way
tableData.value.splice(0, tableData.value.length, ... data);Hi Lauris.
Thanks for your reply.
Two things to make vue devs happy:
1. Ability to hiding cols on mobile
2. Can I disable pagination?
Also I’ll try to find some other table components in the net. Do you know some?
- We will consider implementing such functionality in upcoming releases.
- You can disable a pagination by setting rows-per-page with a total items count.
:rows-per-page="tableData.length"As a alternative you can try Element Plus tables:
https://element-plus.org/en-US/component/table.html
Hi,
1) Yes you can send a request by updating a post method params type, an alternative solution is to wrap your data with params property.
const params = {
params: {
// your data here
}
}2) You can check examples of KTDatatable usage in file src/views/apps/customers/CustomersListing.vue.
Just replace the static tableData with data from your server.
Also, check our KTDatatables doc for more info.
https://preview.keenthemes.com/metronic8/vue/docs/#/kt-datatables
We are planning to include an example with a real API in upcoming releases.
3) For now our component doesn't support functionality to hide some columns on the mobile version, on the mobile version all columns will be rendered, but there should appear a scroll area.
