Could you please provide us with more info? What is your Metronic version and framework(React, Angular, Vue, or HTML)?

We have the latest version of theme and using the Vue js framework

Hi,

If you were using an older version of our KTDatatable components, then client pagination was handled by our component, it was changed in new versions of KTDatatable.

Now you need to pass a function using on-sort component event then you should handle a sorting inside this function.

Please refer to file src/views/apps/customers/CustomersListing.vue in latest Metronic version for a demos, also check our KTDatatable doc.

I have used on-sort component same as the latest theme

My question is if I use column data with data.user.name then the sorting for this column is not working. if I use data.name then it works fine.

Please let me know if you have any confusion.

Hope you understand my question.

Thank you!

const tableHeader = ref([
{
columnName: "sr",
columnLabel: "index",
sortEnabled: false,
columnWidth: 20,
},
{
columnName: "Name",
columnLabel: "name",
sortEnabled: true,
columnWidth: 175,
},
{
columnName: "Email",
columnLabel: "email",
sortEnabled: true,
columnWidth: 250,
},
{
columnName: "Website",
columnLabel: "website",
sortEnabled: true,
columnWidth: 100,
isAllowEdit: true,
},
{
columnName: "Status",
columnLabel: "status",
sortEnabled: false,
columnWidth: 70,
},
{
columnName: "Action",
columnLabel: "action",
sortEnabled: false,
columnWidth: 135,
},
]);

<Datatable
@on-sort="useSort($event, tableData)"
:data="storesData['data']"
:header="tableHeader"
:enable-items-per-page-dropdown="true"
:total="storesData['total']"
:loading="loading"
:current-page="searchParams.pageNub"
:items-per-page="searchParams.recordsPerPage"
@page-change="handleCurrentChange"
@on-items-per-page-change="handleSizeChange"
>
<template v-slot:name="{ row: data }">
{{ data.user.name }}
</template>
<template v-slot:email="{ row: data }">
{{ data.user.email }}
</template>
<template v-slot:website="{ row: data }">
{{ data.website }}
</template>
<template v-slot:status="{ row: data }">
<label class="form-check form-switch">
<input
class="form-check-input cursor-pointer"
type="checkbox"
:value="data.status"
:checked="data.status"
@change="changeStatus($event, data.store_id)"
/>
<span class="form-check-label"></span>
</label>
</template>
<template v-slot:action="{ row: data }">
<div v-if="permission.isEditAllowed || permission.isDeleteAllowed">
<button
v-if="permission.isEditAllowed"
title="Edit"
@click.prevent="$router.push({ name: 'edit-store', params: { id: data.user.id } })"
class="btn btn-icon btn-sm btn-light btn-color-muted btn-active-light-success me-2"
><i class="bi bi-pencil-fill fs-5"></i>
</button>
<button
v-if="permission.isDeleteAllowed"
title="Delete"
@click.prevent="deleteStore(data.store_id)"
class="btn btn-icon btn-sm btn-light btn-color-muted btn-active-light-danger me-"
><i class="bi bi-trash-fill fs-5"></i>
</button>
</div>
<span v-else>--</span>
</template>
</Datatable>


Please check this code in this page Name and Email sorting is not working