Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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);
});

...
}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


Currently, we have examples only with static data.


  1. Could you please attach the code of your component too?

  2. 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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(