KTDatatable Documentation for Vue

I’m working on a Vue.js 3 project with Metronic 8 and was wondering if there is further documentation available for KTDatatable?

I’ve got the table working but would like to add server side paging and sorting.

The documentation lists the event names but I was hoping there was a bit more detail about using these with Vue or some samples.

This is all I can find: https://preview.keenthemes.com/metronic8/vue/docs/#/kt-datatables

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 (4)

Unfortunately, we do not have a demo example on how to use our component with the server-site processing, we have plans to include it in upcoming releases.

As you can see in our doc KTDatatable component supports three events, you can use these to make HTTP requests to your server.
https://preview.keenthemes.com/metronic8/vue/docs/#/kt-datatables#events

Other actions like edit, search and update can be done outside of the component.

How do I add an event handler for each of these events to the KTDatatable?

Is there a property used to indicate we want server side paging?

Firstly add event handling functions:

const onPageChange = (pageNumber) => {
console.log(pageNumber);
};

const onSort = (sort) => {
console.log(sort.columnName, sort.order);
};

const onItemsPerPageChange = (itemsPerPage) => {
console.log(itemsPerPage);
};

Pass these handlers to the component:

<KTDatatable
@current-change="onPageChange"
@sort="onSort"
@items-per-page-change="onItemsPerPageChange"
...
>
...
</KTDatatable>

Hi,

I tried doing this, But when ever i add the my datatable lists all the items from the array instead of 10 or the selected rowsPerPage, i tried passing the rowsPerPage prop, but when ever i add the events the props aren't working.

<Datatable
:table-data="tableData"
:table-header="tableHeader"
:enable-items-per-page-dropdown="true"
@current-change="onPageChange"
@items-per-page-change="onItemsPerPageChange"
:rowsPerPage="items"
>

const rowsPerPage = ref(5);

const onItemsPerPageChange = (itemsPerPage) => {
console.log(itemsPerPage);
rowsPerPage.value = itemsPerPage
};

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