feat(Table): add v-model:sort prop

[DarkGhostHunter]

🔗 Linked issue

Resolves #399, resolves #390 and resolves #296

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This allows the developer to have the sort information as a reactive element on the parent component (like the page) through the v-model:sort prop.

This way there is no need to add event listeners to buttons on each header, or hear other elements. It's also non-colliding with the documented :sort={ ... }.

The only let down of this approach if that the reactive element must be wrapped into a ref() instead of a reactive, since the event replaces the whole value instead of assigning each property member its respective value.

For example, consider retrieving a list of users in a given order from the an API. Using a Computed URL, we can refresh the data each time the order data changes.

<script setup>
const sort = ref({
  column: null,
  direction: null,
})

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

<template>
  <UTable :rows="data" :loading="pending" v-model:sort="sort" />
</template>

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Oct 14, 2023 5:22pm

[benjamincanac]

Does this solve the same thing as #521 and #414 and related to #399, #390 and #296?

[DarkGhostHunter]

@benjamincanac It's ready.

[DarkGhostHunter]

Does this solve the same thing as #521 and #414 and related to #399, #390 and #296?

These seems like the same very problem of hearing when the sorting changes on the table and not being able to receive the changes outside of it.

This commit would allow that.

[benjamincanac]

Just tried this and the sort gets blocked after the second click:

<script setup>
const columns = [{
  key: 'id',
  label: 'ID'
}, {
  key: 'name',
  label: 'Name',
  sortable: true
}, {
  key: 'title',
  label: 'Title',
  sortable: true
}, {
  key: 'email',
  label: 'Email',
  sortable: true,
  direction: 'desc'
}, {
  key: 'role',
  label: 'Role'
}]

const people = [{
  id: 1,
  name: 'Lindsay Walton',
  title: 'Front-end Developer',
  email: '[email protected]',
  role: 'Member'
}, {
  id: 2,
  name: 'Courtney Henry',
  title: 'Designer',
  email: '[email protected]',
  role: 'Admin'
}, {
  id: 3,
  name: 'Tom Cook',
  title: 'Director of Product',
  email: '[email protected]',
  role: 'Member'
}, {
  id: 4,
  name: 'Whitney Francis',
  title: 'Copywriter',
  email: '[email protected]',
  role: 'Admin'
}, {
  id: 5,
  name: 'Leonard Krasner',
  title: 'Senior Designer',
  email: '[email protected]',
  role: 'Owner'
}, {
  id: 6,
  name: 'Floyd Miles',
  title: 'Principal Designer',
  email: '[email protected]',
  role: 'Member'
}]

const sort = ref({
  column: null,
  direction: null
})

watch(sort, () => {
  console.log('sort', sort.value)
})
</script>

<template>
  <UTable v-model:sort="sort" :columns="columns" :rows="people" />
</template>

[DarkGhostHunter]

Found it. When you click second time, the internal sort goes back to the default set in props.sort. Since the prop changes to the current sort, the default is the current column, so it returns the current sorting.

A workaround would be to copy the starting sort as a default, separately. Patch incoming.

[DarkGhostHunter]

Fixed.

The initial value of sort will be respected as the default sort, as well each column default sorting direction.

@benjamincanac Ready for review.

[benjamincanac]

Thanks 😊

[bdebon]

I think I have the same problem. I upgraded to ui-edge@latest to make sure I have the good version.
When I click on sort, the first click is well spotted by my watch, but when I click again, nuxt does not detect any change. It looks like when you go back to the default value, it does not trigger a change...
I don't know if it's the desired behavior but if it is, I don't know how to retrigger my api call to fetch the new data in the opposite order.

[benjamincanac]

@bdebon I think you might have posted this on the wrong issue, do you have the same issue as #1085?