Tables en SwiftUI

Introduction

Dans SwiftUI, une Table constitue un conteneur essentiel pour la création et l'affichage de collections de données sous un format tabulaire, permettant ainsi d'organiser des valeurs en colonnes et en lignes. Cet outil est particulièrement utile pour présenter des ensembles de données disposés de manière structurée. Lorsque le nombre de lignes dépasse l'espace vertical disponible, le composant Table active automatiquement le défilement vertical pour garantir l'accès à l'ensemble des données. De plus, sur macOS, le défilement horizontal s'active si le nombre de colonnes excède la largeur de la vue.

Syntaxe de la Table

Pour créer une table qui adapte ses lignes selon une collection de données identifiables, on utilise la syntaxe suivante :

var body: some View {
    Table(data: // fournir une collection de données identifiables) {
        TableColumn(Text, value: KeyPath)
        TableColumn(Text, value: KeyPath)
    }
}

Exemple d'Implémentation

La Table est idéale pour présenter des données d'une manière cohérente et ordonnée. Prenons un exemple simple où l'on crée une table à trois colonnes à partir d'un tableau de 'Chanteurs'. Le modèle de données doit être conforme au protocole Identifiable :

struct ContentView: View {
    @State private var personnes = [
        Chanteur(name: "Taylor", lastName: "Swift", ranking: 95),
        Chanteur(name: "Olivia", lastName: "Rodrigo", ranking: 80),
        Chanteur(name: "Billie", lastName: "Eilish", ranking: 70),
        Chanteur(name: "Katy", lastName: "Perry", ranking: 75)
    ]

    var body: some View {
        Table(personnes) {
            TableColumn("Nom", value: \.name)
            TableColumn("Prénom", value: \.lastName)
            TableColumn("Classement") {
                personne in
                Text(String(personne.ranking))
            }
        }
    }
}

struct Chanteur: Identifiable {
    let name: String
    let lastName: String
    let ranking: Int
    let id = UUID()

    var fullName: String { name + " " + lastName}
}

Ajout de Tri à une Table

Pour activer le tri des colonnes d'une Table, il est nécessaire de créer un tableau d'objets KeyPathComparator avec des ordres de tri par défaut. De plus, il faut fournir un lien vers un tableau de comparateurs pour suivre les modifications de l'ordre de tri. La table elle-même ne trie pas les données ; pour activer le tri, on peut utiliser le modificateur .onChange(of:perform:) et trier les données dans le bloc de fermeture. Voici comment ajouter du tri à notre exemple précédent :

struct ContentView: View {
    @State private var personnes = [
        Chanteur(name: "Taylor", lastName: "Swift", ranking: 95),
        Chanteur(name: "Olivia", lastName: "Rodrigo", ranking: 80),
        Chanteur(name: "Billie", lastName: "Eilish", ranking: 70),
        Chanteur(name: "Katy", lastName: "Perry", ranking: 75)
    ]
    @State private var sortOrder = [KeyPathComparator(\Chanteur.name)]

    var body: some View {
        Table(personnes, sortOrder: $sortOrder) {
            TableColumn("Nom", value: \.name)
            TableColumn("Prénom", value: \.lastName)
            TableColumn("Classement") {
                personne in
                Text(String(personne.ranking))
            }
        }
        .onChange(of: sortOrder) { nouvelOrdre in
            personnes.sort(using: nouvelOrdre)
        }
    }
}

Ajout de Sélection à une Table

Pour améliorer l'interaction avec la table, il est possible de permettre à l'utilisateur de sélectionner une ou plusieurs lignes. Pour cela, il faut fournir un lien vers un identifiant optionnel de l'élément à la Table. Pour créer une table qui permet des sélections multiples, vous pouvez établir un lien vers un ensemble d'IDs. Voici comment intégrer cette fonctionnalité :

@State private var selection = Set()

var body: some View {
    Table(personnes, selection: $selection, sortOrder: $sortOrder) {
        // configure columns...
    }
}

Personnalisation du Style d'une Table

L'une des façons les plus simples de modifier l'apparence d'une table est d'utiliser le modificateur .tableStyle(_:) qui nécessite un argument, un TableStyle, définissant le style à appliquer. SwiftUI propose plusieurs styles de table, tel que InsetTableStyle et, sur macOS, BorderedTableStyle. Par défaut, le style utilisé est AutomaticTableStyle, disponible sur toutes les plateformes prenant en charge la Table.

Table(personnes, selection: $selection, sortOrder: $sortOrder) {}
    .tableStyle(InsertTableStyle())

Définir une Largeur Fixe pour une Colonne de Table

Pour définir une largeur précise pour une colonne de table, cela peut être réalisé comme suit :

TableColumn("Nom", value: \.name).width(100)