-
Notifications
You must be signed in to change notification settings - Fork 462
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(Table): add v-model:sort
prop
#803
Conversation
The latest updates on your projects. Learn more about Vercel for Git βοΈ
|
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
@benjamincanac It's ready. |
Just tried this and the <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: 'lindsay.walton@example.com',
role: 'Member'
}, {
id: 2,
name: 'Courtney Henry',
title: 'Designer',
email: 'courtney.henry@example.com',
role: 'Admin'
}, {
id: 3,
name: 'Tom Cook',
title: 'Director of Product',
email: 'tom.cook@example.com',
role: 'Member'
}, {
id: 4,
name: 'Whitney Francis',
title: 'Copywriter',
email: 'whitney.francis@example.com',
role: 'Admin'
}, {
id: 5,
name: 'Leonard Krasner',
title: 'Senior Designer',
email: 'leonard.krasner@example.com',
role: 'Owner'
}, {
id: 6,
name: 'Floyd Miles',
title: 'Principal Designer',
email: 'floyd.miles@example.com',
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> |
Found it. When you click second time, the internal sort goes back to the default set in A workaround would be to copy the starting sort as a default, separately. Patch incoming. |
Fixed.
@benjamincanac Ready for review. |
sort
eventv-model:sort
prop
v-model:sort
propv-model:sort
prop
Thanks π |
I think I have the same problem. I upgraded to ui-edge@latest to make sure I have the good version. |
π Linked issue
Resolves #399, resolves #390 and resolves #296
β Type of 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 areactive
, 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.π Checklist