version: Metronic v8.0.36
project: vue demo1
views: CustomerListing.vue
const tableData = ref<Array<ICustomer>>([]);
const initCustomers = ref<Array<ICustomer>>([]);
const total = ref(0)
onMounted(() => {
axios.get("http://127.0.0.1:19093/api/customers", {params:{pageNo: 1, pageSize: 10}}).then((res) => {
total.value = res.data.total
tableData.value = res.data.data
})
setCurrentPageBreadcrumbs("Customers Listing", ["Apps", "Customers"]);
initCustomers.value.splice(0, tableData.value.length, ...tableData.value);
});
To use a custom object you have to provide table header configuration, also you need to make sure that the keys of your API object match the column key property in the header configuration. You can provide a header configuration through prop table-header.
Please check our KTDatatable documentation for more info:
https://preview.keenthemes.com/metronic8/vue/docs/#/kt-datatables