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