The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More

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  :(