New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
KTDatatables with server-side data
Are there any examples on how to populate the KTDatatable with data from an API? I can see in array of the data I want when I log to console, but can't seem to get the table to update. I've included an example below.
Thanks!
setup() {
const checkedCustomers = ref([]);
const store = useStore();
const tableHeader = ref([
{
key: "checkbox",
},
{
name: "Customer",
key: "customer_name",
sortable: true,
},
...
]}
const tableData = ref<Array<ICustomer>>([]);
const initCustomers = ref<Array<ICustomer>>([]);
store
.dispatch(Actions.GET_CUSTOMERS)
.then((res) => {
tableData.value = res;
console.log("tableData", res); // I can see the data here, but table doesn"t update
})
.then(() => {
initCustomers.value = [...tableData.value];
});
onMounted(async () => {
setCurrentPageBreadcrumbs(Customers", ["Apps", "Customers"]);
initCustomers.value.splice(0, tableData.value.length, ...tableData.value);
});
...
}Replies (2)
Currently, we have examples only with static data.
- Could you please attach the code of your component too?
- Make sure that header configuration key properties match with properties in the array from your API.
You can see the code from metronic themes. You can even see the problem if you check it from your mobile device for Demo 21.
