Skip to content
On this page

useSorted

Category
Export Size
Last Changed
2 months ago

reactive sort array

Demo

input:
output: [ "0", "2", "2", "3", "7", "12", "17", "20", "33", "50", "76", "77", "79", "92" ]
object property sort:
input:
[ { "name": "John", "age": 40 }, { "name": "Jane", "age": 20 }, { "name": "Joe", "age": 30 }, { "name": "Jenny", "age": 22 } ]
output:
[ { "name": "Jane", "age": 20 }, { "name": "Jenny", "age": 22 }, { "name": "Joe", "age": 30 }, { "name": "John", "age": 40 } ]

Usage

ts
import { useSorted } from '@vueuse/core'

// general sort
const source = [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]
const sorted = useSorted(source)
console.log(sorted.value) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(source) // [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]

// object sort
const objArr = [{
  name: 'John',
  age: 40,
}, {
  name: 'Jane',
  age: 20,
}, {
  name: 'Joe',
  age: 30,
}, {
  name: 'Jenny',
  age: 22,
}]
const objSorted = useSorted(objArr, (a, b) => a.age - b.age)
import { useSorted } from '@vueuse/core'

// general sort
const source = [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]
const sorted = useSorted(source)
console.log(sorted.value) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(source) // [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]

// object sort
const objArr = [{
  name: 'John',
  age: 40,
}, {
  name: 'Jane',
  age: 20,
}, {
  name: 'Joe',
  age: 30,
}, {
  name: 'Jenny',
  age: 22,
}]
const objSorted = useSorted(objArr, (a, b) => a.age - b.age)

dirty mode

dirty mode will change the source array.

ts
const source = ref([10, 3, 5, 7, 2, 1, 8, 6, 9, 4])
const sorted = useSorted(source, (a, b) => a - b, {
  dirty: true,
})
console.log(source)// output: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
const source = ref([10, 3, 5, 7, 2, 1, 8, 6, 9, 4])
const sorted = useSorted(source, (a, b) => a - b, {
  dirty: true,
})
console.log(source)// output: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

Type Declarations

typescript
export declare type UseSortedCompareFn<T = any> = (a: T, b: T) => number
export declare type UseSortedFn<T = any> = (
  arr: T[],
  compareFn: UseSortedCompareFn<T>
) => T[]
export interface UseSortedOptions<T = any> {
  /**
   * sort algorithm
   */
  sortFn?: UseSortedFn<T>
  /**
   * compare function
   */
  compareFn?: UseSortedCompareFn<T>
  /**
   * change the value of the source array
   * @default false
   */
  dirty?: boolean
}
export declare function useSorted<T = any>(
  source: MaybeRef<T[]>,
  compareFn?: UseSortedCompareFn<T>
): Ref<T[]>
export declare function useSorted<T = any>(
  source: MaybeRef<T[]>,
  options?: UseSortedOptions<T>
): Ref<T[]>
export declare function useSorted<T = any>(
  source: MaybeRef<T[]>,
  compareFn?: UseSortedCompareFn<T>,
  options?: Omit<UseSortedOptions<T>, "compareFn">
): Ref<T[]>
export declare type UseSortedCompareFn<T = any> = (a: T, b: T) => number
export declare type UseSortedFn<T = any> = (
  arr: T[],
  compareFn: UseSortedCompareFn<T>
) => T[]
export interface UseSortedOptions<T = any> {
  /**
   * sort algorithm
   */
  sortFn?: UseSortedFn<T>
  /**
   * compare function
   */
  compareFn?: UseSortedCompareFn<T>
  /**
   * change the value of the source array
   * @default false
   */
  dirty?: boolean
}
export declare function useSorted<T = any>(
  source: MaybeRef<T[]>,
  compareFn?: UseSortedCompareFn<T>
): Ref<T[]>
export declare function useSorted<T = any>(
  source: MaybeRef<T[]>,
  options?: UseSortedOptions<T>
): Ref<T[]>
export declare function useSorted<T = any>(
  source: MaybeRef<T[]>,
  compareFn?: UseSortedCompareFn<T>,
  options?: Omit<UseSortedOptions<T>, "compareFn">
): Ref<T[]>

Source

SourceDemoDocs

Contributors

Jelf

Changelog

v9.3.1 on 10/17/2022
feaa1 - feat: new function (#1799)

Released under the MIT License.