arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(TableExampleAdvanced): improve sorting with v-model:sort and sort-mode props

Browse Source 
Resolves #1177
This commit is contained in:
Benjamin Canac
2024-01-09 15:13:29 +01:00
parent 56e0c9a9a0
commit e48b61b5df
2 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/components/content/examples/TableExampleAdvanced.vue
View File

@@ -77,6 +77,7 @@ const resetFilters = () => {
}
// Pagination
const sort = ref({ column: 'id', direction: 'asc' as const })
const page = ref(1)
const pageCount = ref(10)
const pageTotal = ref(200) // This value should be dynamic coming from the API
@@ -92,11 +93,13 @@ const { data: todos, pending } = await useLazyAsyncData<{
query: {
q: search.value,
'_page': page.value,
'_limit': pageCount.value
'_limit': pageCount.value,
'_sort': sort.value.column,
'_order': sort.value.direction
}
}), {
default: () => [],
watch: [page, search, searchStatus, pageCount]
watch: [page, search, searchStatus, pageCount, sort]
})
</script>
@@ -175,11 +178,13 @@ const { data: todos, pending } = await useLazyAsyncData<{
<!-- Table -->
<UTable
v-model="selectedRows"
v-model:sort="sort"
:rows="todos"
:columns="columnsTable"
:loading="pending"
sort-asc-icon="i-heroicons-arrow-up"
sort-desc-icon="i-heroicons-arrow-down"
sort-mode="manual"
class="w-full"
:ui="{ td: { base: 'max-w-[0] truncate' } }"
@select="select"