Leptos-Use Guide

use_sorted

Category
Iterable
Module
leptos_use

Reactive sort of iterable

Demo

source

Usage

use leptos::*;
use leptos_use::use_sorted;

#[component]
fn Demo() -> impl IntoView {
let source = vec![10, 3, 5, 7, 2, 1, 8, 6, 9, 4];
let sorted = use_sorted(source); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

view! { }
}

You can also sort by key or with a compare function.

use leptos::*;
use leptos_use::{use_sorted_by, use_sorted_by_key};

#[derive(Clone, PartialEq)]
pub struct Person {
    pub name: String,
    pub age: u16,
}

#[component]
fn Demo() -> impl IntoView {
let source = vec![
    Person {
        name: "John".to_string(),
        age: 40,
    },
    Person {
        name: "Jane".to_string(),
        age: 20,
    },
    Person {
        name: "Joe".to_string(),
        age: 30,
    },
    Person {
        name: "Jenny".to_string(),
        age: 22,
    },
];

// sort by key
let sorted = use_sorted_by_key(
    source.clone(),
    |person| person.age,
);

// sort with compare function
let sorted = use_sorted_by(
    source,
    |p1, p2| p1.age.cmp(&p2.age),
);

view! { }
}

Please note that these two ways of sorting are equivalent.

Source

Source • Demo • Docs