Tableau de données pour Slint

KitDataTable · Slint Kit 0.3.1

Tableau de données Slint avec lignes virtualisées, en-têtes de tri et sélection de ligne.

Essayer le composant

Télécharger le projet complet, le décompresser et lancer cargo run --locked dans son dossier. Rust 1.92+ ; Slint Kit 0.3.0 depuis crates.io. Vous pouvez aussi copier les quatre fichiers ci-dessous.

Cliquez sur Name pour trier, puis sélectionnez Ada. Triez de nouveau : Rust conserve Ada par sa clé, même si la ligne change de place.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitDataTable, KitThemes, TableRow, TableColumn, DataSortDirection, DataAlignment, NavigationStep } from "@kit/kit.slint";
export { TableRow, TableColumn, DataSortDirection, DataAlignment, NavigationStep }
export component App inherits Window {
    title: "Slint data table";
    preferred-width: 520px; preferred-height: 320px;
    max-width: 100000px; max-height: 100000px;
    background: KitThemes.light.canvas;
    in property <[TableRow]> rows;
    in property <[TableColumn]> columns;
    in property <int> generation;
    in property <int> active-index: -1;
    in property <string> selected-label: "No selection";
    callback sort(int);
    callback choose(int, int);
    callback move(NavigationStep);
    VerticalLayout {
        padding: 24px; spacing: 16px;
        table := KitDataTable {
            height: 220px; rows: root.rows; columns: root.columns;
            generation: root.generation; active-index: root.active-index;
            sort-requested(token) => { root.sort(token); }
            activate(token, generation) => { root.choose(token, generation); }
            navigate(step) => { root.move(step); }
        }
        Text { text: root.selected-label; color: KitThemes.light.text-primary; }
    }
}

src/main.rs

// SPDX-License-Identifier: GPL-3.0-or-later
use slint::{ComponentHandle, ModelRc, VecModel};
use std::{cell::RefCell, rc::Rc};
mod ui {
    slint::include_modules!();
}

fn next_index(current: Option<usize>, length: usize, step: ui::NavigationStep) -> usize {
    use ui::NavigationStep::*;
    let current = current.unwrap_or(0);
    match step {
        First => 0,
        Last => length.saturating_sub(1),
        Previous | PagePrevious => current.saturating_sub(1),
        Next | PageNext => (current + 1).min(length.saturating_sub(1)),
    }
}

#[derive(Clone, Copy, PartialEq, Eq)]
enum Person {
    Zoe,
    Ada,
    Lina,
}
impl Person {
    fn token(self) -> i32 {
        match self {
            Self::Zoe => 11,
            Self::Ada => 23,
            Self::Lina => 37,
        }
    }
    fn label(self) -> &'static str {
        match self {
            Self::Zoe => "Zoe",
            Self::Ada => "Ada",
            Self::Lina => "Lina",
        }
    }
}
#[derive(Clone, Copy, PartialEq, Eq)]
struct Generation(i32);
struct State {
    order: Vec<Person>,
    selected: Option<Person>,
    active: Option<Person>,
    direction: ui::DataSortDirection,
    generation: Generation,
}
fn publish(state: &RefCell<State>, app: &ui::App) {
    let state = state.borrow();
    let rows = state
        .order
        .iter()
        .map(|person| ui::TableRow {
            token: person.token(),
            cells: ModelRc::new(VecModel::from(vec![person.label().into()])),
            selected: state.selected == Some(*person),
            disabled: false,
        })
        .collect::<Vec<_>>();
    let columns = vec![ui::TableColumn {
        token: 1,
        label: "Name".into(),
        sortable: true,
        sort: state.direction,
        alignment: ui::DataAlignment::Leading,
    }];
    let active = state
        .order
        .iter()
        .position(|p| Some(*p) == state.active)
        .map_or(-1, |i| i as i32);
    let label = state.selected.map_or("No selection".to_owned(), |p| {
        format!("Selected: {}", p.label())
    });
    let generation = state.generation.0;
    drop(state);
    app.set_generation(generation);
    app.set_active_index(active);
    app.set_rows(ModelRc::new(VecModel::from(rows)));
    app.set_columns(ModelRc::new(VecModel::from(columns)));
    app.set_selected_label(label.into());
}
fn main() -> Result<(), slint::PlatformError> {
    let app = ui::App::new()?;
    slint_kit::init_form_validation!(ui, app);
    let state = Rc::new(RefCell::new(State {
        order: vec![Person::Zoe, Person::Ada, Person::Lina],
        selected: None,
        active: None,
        direction: ui::DataSortDirection::Unsorted,
        generation: Generation(1),
    }));
    publish(&state, &app);
    let (model, weak) = (state.clone(), app.as_weak());
    app.on_sort(move |column| {
        if column != 1 {
            return;
        }
        {
            let mut state = model.borrow_mut();
            let Some(next) = state.generation.0.checked_add(1) else {
                return;
            };
            state.generation = Generation(next);
            state.direction = if state.direction == ui::DataSortDirection::Ascending {
                ui::DataSortDirection::Descending
            } else {
                ui::DataSortDirection::Ascending
            };
            state.order.sort_by_key(|p| p.label());
            if state.direction == ui::DataSortDirection::Descending {
                state.order.reverse();
            }
        }
        if let Some(app) = weak.upgrade() {
            publish(&model, &app);
        }
    });
    let (model, weak) = (state.clone(), app.as_weak());
    app.on_choose(move |token, generation| {
        {
            let mut state = model.borrow_mut();
            if generation != state.generation.0 {
                return;
            }
            let Some(person) = state.order.iter().copied().find(|p| p.token() == token) else {
                return;
            };
            state.selected = Some(person);
            state.active = Some(person);
        }
        if let Some(app) = weak.upgrade() {
            publish(&model, &app);
        }
    });
    let weak = app.as_weak();
    app.on_move(move |step| {
        {
            let mut state = state.borrow_mut();
            let current = state.order.iter().position(|p| Some(*p) == state.active);
            let index = next_index(current, state.order.len(), step);
            state.active = Some(state.order[index]);
        }
        if let Some(app) = weak.upgrade() {
            publish(&state, &app);
        }
    });
    app.run()
}

Cargo.toml et build.rs

Cargo.toml

[package]
name = "slint-kit-data-table-example"
version = "0.1.0"
edition = "2024"
rust-version = "1.92"
license = "GPL-3.0-or-later"
publish = false

[dependencies]
slint-kit = "=0.3.0"
slint = { version = "=1.18.1", default-features = false, features = ["std", "compat-1-18", "backend-winit", "renderer-skia", "accessibility"] }

[build-dependencies]
slint-kit-build = "=0.3.0"

[workspace]

build.rs

fn main() {
    slint_kit_build::compile("ui/app.slint").expect("compile component example");
}

Fichiers : Cargo.toml · build.rs · ui/app.slint · src/main.rs

Donnez une height bornée au tableau, puis fournissez columns, rows, generation et active-index. Traitez sort-requested(column-token) dans Rust en triant votre modèle et en mettant à jour le sens de tri. Traitez navigate pour modifier l’index actif et activate(row-token, generation) pour agir sur une ligne.

Le tableau affiche l’ordre fourni par le modèle ; cliquer sur un en-tête ne le trie pas automatiquement. Modifier active-index rend cette ligne visible. Définissez empty-label pour un modèle vide et interactive: false pendant qu’une modale bloque le tableau.

Pour relier réellement le tri, les touches et la sélection, utilisez l’application complète de tableau triable.

Voir le code source ↗

Choisir entre une option intégrée et une composition personnalisée

Options partagées

label — propriété intégrée ; exemple de composition personnalisé

Composition visuelle

Le fichier ci-dessous produit la capture. Pour les composants pilotés par un contrôleur, il montre l’état affiché sans fournir le branchement Rust. Créer un projet.

Afficher le fichier de la capture

// Public label overrides localize this fixture; toolkit/host defaults keep their language.
// SPDX-License-Identifier: GPL-3.0-or-later
import { DataAlignment, DataSortDirection, KitDataTable, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitDataTable — exemple";
    preferred-width: 620px;
    preferred-height: 400px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in-out property <string> status;
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Tableau de données"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitDataTable { empty-label: "Aucun résultat"; label: "Tableau de données"; theme: root.theme; height: 250px; generation: 1; columns: [{ token: 11, label: "Projet", sortable: true, sort: DataSortDirection.ascending, alignment: DataAlignment.leading }, { token: 23, label: "État", sortable: true, sort: DataSortDirection.unsorted, alignment: DataAlignment.leading }, { token: 38, label: "Responsable", sortable: false, sort: DataSortDirection.unsorted, alignment: DataAlignment.leading }]; rows: [{ token: 101, cells: ["Notes de terrain", "En cours", "Alex"], selected: true, disabled: false }, { token: 205, cells: ["Système de design", "Révision", "Jamie"], selected: false, disabled: false }, { token: 309, cells: ["Plan de lancement", "Brouillon", "Taylor"], selected: false, disabled: false }]; activate(token, generation) => { root.status = "Identifiant du projet " + token; } }
        if root.status != "": Text { text: root.status; color: root.theme.text-secondary; font-size: 12px * root.theme.text-scale; wrap: word-wrap; }
    }
}

Télécharger cet exemple

API publique

Hérite de Rectangle.

Propriétés

Nom	Type	Sens
`interactive`	`bool`	`in`
`theme`	`KitTheme`	`in`
`control-size`	`ControlSize`	`in`
`columns`	`[TableColumn]`	`in`
`rows`	`[TableRow]`	`in`
`generation`	`int`	`in`
`active-index`	`int`	`in`
`label`	`string`	`in`
`empty-label`	`string`	`in`
`minimum-column-width`	`length`	`in`
`scroll-y`	`length`	`out`

Types et variantes

Type	Déclaration
`enum ControlSize`	`compact, medium, comfortable`
`enum DataAlignment`	`leading, center, trailing`
`enum DataSortDirection`	`unsorted, ascending, descending`
`enum NavigationStep`	`next, previous, first, last, page-next, page-previous`
`struct TableColumn`	`token: int, label: string, sortable: bool, sort: DataSortDirection, alignment: DataAlignment`
`struct TableRow`	`token: int, cells: [string], selected: bool, disabled: bool`

Signaux

activate(int,int)
navigate(NavigationStep)
sort-requested(int)

Fonctions

take-focus()
reveal-active()

Voir aussi

Liste de contenus