Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Why is the Datatable of calling own interfaces not displayed?


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(" {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);
});


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(