Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Fixes sortingField in KTDataTable


Sorting did not work in KTDataTable, so I decided to improve it.

Here are the specific lines I added or changed in your component:

Added two new refs to store the current sort field and sort order:


const sortField = ref<string | null>(props.sortLabel);
const sortOrder = ref<"asc" | "desc">(props.sortOrder);


Added a new calculated property sortedData, which sorts data:


const sortedData = computed(() => {
if (!props.data || !sortField.value) {
return props.data;
}

return [...props.data].sort((a, b) => {
const fieldA = a[sortField.value!];
const fieldB = b[sortField.value!];
if (fieldA < fieldB) {
return sortOrder.value === "asc" ? -1 : 1;
}
if (fieldA > fieldB) {
return sortOrder.value === "asc" ? 1 : -1;
}
return 0;
});
});


Changed the dataToDisplay computed property to use sortedData:


const dataToDisplay = computed(() => {
if (sortedData.value) {
if (sortedData.value.length <= itemsInTable.value) {
return sortedData.value;
} else {
let sliceFrom = (currentPage.value - 1) * itemsInTable.value;
return sortedData.value.slice(sliceFrom, sliceFrom + itemsInTable.value);
}
}
return [];
});


Updated the onSort method so that it sets the sortField and sortOrder based on the selected column and sort order:


const onSort = (sort: Sort) => {
const column = props.header.find(
(col) => col.columnLabel === sort.label
);
if (column && column.sortEnabled) {
sortField.value = column.sortingField;
sortOrder.value = sort.order;
}
emit("on-sort", sort);
};


So the main lines of code added or changed include new variable declarations (sortField and sortOrder), computed properties (sortedData and updated dataToDisplay), and modifications to the onSort method.


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


Hi,

Thank you for your feedback.

We were not able to reproduce this problem in the latest Metronic version.

Could you please specify which metronic version you are using?

Do you have the same problem on our preview page?
https://preview.keenthemes.com/metronic8/vue/demo1/apps/subscriptions/subscription-list

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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