kt-datatable component first time not ordering properly
We found that kt-datatable component is not sorting the first time, although the header shows that column is sorted (but this isn't). The datatable configuration is the following..
<pre lang="html"><Datatable
@on-sort="sort"
@on-items-select="onItemSelect"
:data="activeItems"
:header="tableHeader"
:enable-items-per-page-dropdown="true"
:checkbox-enabled="false"
checkbox-label="billHistoryId"
sort-label="endDate"
sort-order="asc"
>
</pre>
As you can see we want to sort by endDate asc, the first time table is rendered.
Framework version: VUE 8.1.8 (demo 1)
Thanks in advance,
Regards.
Replies (4)
<Datatable
@on-sort="sort"
@on-items-select="onItemSelect"
:data="activeItems"
:header="tableHeader"
:enable-items-per-page-dropdown="true"
:checkbox-enabled="false"
checkbox-label="billHistoryId"
sort-label="endDate"
sort-order="asc"
>
Hi Xavier,
Thank you for your feedback.
It is an issue with our component I already fixed this issue and will include the fix in the next Metronic release.
For now, as a temporary solution, you can add the following code into setup function in src/components/kt-datatable/table-partials/table-content/table-head/TableHeadRow.vue
onMounted(() => {
emit("on-sort", columnLabelAndOrder.value);
});The code above will sort table rows on component initialization to apply the default filters.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
Thank you for your quick reply.
But unfortunately it's not working yet. It seems that it must be because even if the component is already rendered the data is not yet. In the header column it continues to show that it is sorted, but it is not until you "click" that it is sorted.
Thanks in advance,
Regards.
Hi Xavier,
If you render data asynchronously, then this solution might not work for you, and you should handle data sorting outside of the kt-datatable component.
However, if you are handling your sorting on the backend and you sort data using backend URL queries, then you can add a default sorting query to your URL.
Alternatively, you can handle sorting on the client side using the array-sort dependency.
arraySort(tableData.value, sort.label, { reverse });Regards,
Lauris Stepanovs,
Keenthemes Support Team
