diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index f3a0ae56..7bc21edb 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -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
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 0ac2698f..fad8efa5 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -87,6 +87,18 @@ function defaultComparator (a: T, z: T): boolean {
return a === z
}
+function defaultSort (a: any, b: any, direction: 'asc' | 'desc') {
+ if (a === b) {
+ return 0
+ }
+
+ if (direction === 'asc') {
+ return a < b ? -1 : 1
+ } else {
+ return a > b ? -1 : 1
+ }
+}
+
export default defineComponent({
components: {
UButton,
@@ -108,7 +120,7 @@ export default defineComponent({
default: () => []
},
columns: {
- type: Array as PropType<{ key: string, sortable?: boolean, sortFn?: (a: any, b: any, direction: 'asc' | 'desc') => number, direction?: 'asc' | 'desc', class?: string, [key: string]: any }[]>,
+ type: Array as PropType<{ key: string, sortable?: boolean, sort?: (a: any, b: any, direction: 'asc' | 'desc') => number, direction?: 'asc' | 'desc', class?: string, [key: string]: any }[]>,
default: null
},
columnAttribute: {
@@ -156,23 +168,11 @@ export default defineComponent({
setup (props, { emit, attrs: $attrs }) {
const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))
- const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined, sortFn: defaultSortFn })))
+ const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort })))
const sort = ref(defu({}, props.sort, { column: null, direction: 'asc' }))
- const defaultSort = { column: sort.value.column, direction: null }
-
- function defaultSortFn (a: any, b: any, direction: 'asc' | 'desc') {
- if (a === b) {
- return 0
- }
-
- if (direction === 'asc') {
- return a < b ? -1 : 1
- } else {
- return a > b ? -1 : 1
- }
- }
+ const savedSort = { column: sort.value.column, direction: null }
const rows = computed(() => {
if (!sort.value?.column) {
@@ -185,8 +185,9 @@ export default defineComponent({
const aValue = get(a, column)
const bValue = get(b, column)
- const sortFn = columns.value.find((col) => col.key === column)?.sortFn ?? defaultSortFn
- return sortFn(aValue, bValue, direction)
+ const sort = columns.value.find((col) => col.key === column)?.sort ?? defaultSort
+
+ return sort(aValue, bValue, direction)
})
})
@@ -232,7 +233,7 @@ export default defineComponent({
const direction = !column.direction || column.direction === 'asc' ? 'desc' : 'asc'
if (sort.value.direction === direction) {
- sort.value = defu({}, defaultSort, { column: null, direction: 'asc' })
+ sort.value = defu({}, savedSort, { column: null, direction: 'asc' })
} else {
sort.value.direction = sort.value.direction === 'asc' ? 'desc' : 'asc'
}