Ace the https://www.examcollection.us/Sharing-and-Visibility-Architect-vce.html with our comprehensive VCE guide! Designed for professionals aiming to master the intricacies of Salesforce sharing and visibility, our expertly crafted content covers all essential topics. Dive into detailed explanations, practical examples, and up-to-date scenarios that mirror the actual exam. Our VCE guide ensures you grasp complex concepts with ease, enhancing your problem-solving skills. Practice with real-world questions and receive instant feedback to boost your confidence. Whether you're a seasoned expert or new to the field, our guide provides the tools you need to succeed. Unlock your potential and secure your certification with our Salesforce Sharing-and-Visibility-Architect Exam VCE today!

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

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!

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.

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

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