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

chore(Table): rename columns sortFn to sort

Browse Source
This commit is contained in:
Benjamin Canac
2024-01-09 12:05:32 +01:00
parent 6154ae94a9
commit 8508e84958
2 changed files with 22 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/content/4.data/1.table.md
View File

@@ -28,7 +28,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o
- `sortable` - Whether the column is sortable. Defaults to `false`.
- `direction` - The sort direction to use on first click. Defaults to `asc`.
- `class` - The class to apply to the column cells.
- `sortFn` - A function that is used to sort the column, comparable to what would be passed to the Javascript `sort` function. Defaults to a simple _greater than_ / _less than_ comparison.
- `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison.
::component-example{class="grid"}
---
@@ -156,7 +156,7 @@ You can also customize the entire header cell, read more in the [Slots](#slots)
Sometimes you will want to fetch new data depending on the sorted column and direction. You can use the `v-model:sort` to automatically update the `ref` reactive element every time the sorting changes on the Table. You may also use `@update:sort` to call your own function with the sorting data.
For example, we can take advantage of `useLazyRefresh` computed URL to automatically fetch the data depending on the sorting column and direction every time the `sort` reactive element changes.
For example, we can take advantage of the `useLazyFetch` computed to automatically fetch the data depending on the sorting column and direction every time the `sort` reactive element changes.
```vue
<script setup>
@@ -168,9 +168,7 @@ const sort = ref({
const columns = [...]
const { data, pending } = useLazyFetch(() => {
return `/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`
})
const { data, pending } = await useLazyFetch(`/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`)
</script>
<template>