N
Nuxt•2w ago
Portaler

[UTable] How to disable clientside sorting when using serverside driven data

Hello All! I've got a UTable that uses reactive Ref<RowType> for it's rows.. so it ends up requerying when there are changes to sort. It's working in that it triggers the query to serverside with the proper sort updates, but it sorts twice.. first it sorts on the client with the data from the current page.. and then it comes back with results from the server which are properly sorted (across pages not just clientside current page).
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @Portaler. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To disable client-side sorting when using server-side driven data with UTable, you can use the sort-mode="manual" prop. This will prevent the automatic client-side sorting and allow you to handle the sorting entirely on the server side. Here's how you can implement this: 
<script setup lang="ts">
const sort = ref({
  column: 'name',
  direction: 'desc'
})

const columns = [{
  label: 'Name',
  key: 'name',
  sortable: true
}]

const { data, status } = await useLazyFetch(() => `/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`)
</script>

<template>
  <UTable 
    v-model:sort="sort" 
    :loading="status === 'pending'" 
    :columns="columns" 
    :rows="data" 
    sort-mode="manual" 
  />
</template>
<script setup lang="ts">
const sort = ref({
  column: 'name',
  direction: 'desc'
})

const columns = [{
  label: 'Name',
  key: 'name',
  sortable: true
}]

const { data, status } = await useLazyFetch(() => `/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`)
</script>

<template>
  <UTable 
    v-model:sort="sort" 
    :loading="status === 'pending'" 
    :columns="columns" 
    :rows="data" 
    sort-mode="manual" 
  />
</template>
In this example: 1. We use sort-mode="manual" to disable automatic client-side sorting. 2. We create a reactive sort ref to track the current sort state. 3. We use v-model:sort="sort" to bind the sort state to the table. 4. We use useLazyFetch to fetch data from the server based on the current sort state. This approach ensures that sorting is only performed on the server side, preventing the double-sorting issue you're experiencing. Source: Nuxt UI Table (https://ui.nuxt.com/components/table#reactive-sorting) Remember to adjust the API endpoint and query parameters according to your specific server-side implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@170603517893935104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?