Passer au contenu principal

Columns

Ouvrir dans ChatGPT
24.00
Java API

La classe Table utilise des instances de colonne pour définir et personnaliser l'affichage des données. Les colonnes contrôlent quelles données sont affichées, leur apparence et comment les utilisateurs peuvent interagir avec elles. Cette page couvre l'identité de la colonne, la présentation, les dimensions, les interactions utilisateur et les événements liés.

Identité de la colonne​

L'identité d'une colonne définit comment elle est reconnue dans la Table. Cela inclut son étiquette, la valeur qu'elle fournit, et si elle est visible ou navigable.

Étiquette​

L'étiquette d'une colonne est son identifiant public, aidant à clarifier les données affichées.

Utilisez setLabel() pour définir ou modifier l'étiquette.

conseil

Par défaut, l'étiquette sera la même que l'ID de la colonne.

table.addColumn("Product ID", Product::getProductId).setLabel("ID");

Fournisseurs de valeur​

Un fournisseur de valeur est une fonction responsable de la traduction des données brutes du jeu de données sous-jacent en un format approprié pour l'affichage dans une colonne spécifique. La fonction que vous définissez prend une instance du type de données de la ligne (T) et renvoie la valeur à mettre en avant dans la colonne associée pour cette ligne particulière.

Pour définir un fournisseur de valeur sur une colonne, utilisez l'une des méthodes addColumn() à partir du composant Table.

Dans le fragment suivant, une colonne tentera d'accéder à des données d'un objet JSON, ne les rendant que si les données ne sont pas nulles.

List<String> columnsList = List.of("athlete", "age", "country", "year", "sport", "gold", "silver", "bronze", "total");
for (String column : columnsList) {
  table.addColumn(column, (JsonObject person) -> {
    JsonElement element = person.get(column);
    if (!element.isJsonNull()) {
      return element.getAsString();
    }
    return "";
  });
}

Visibilité​

Il est possible de définir la visibilité d'une colonne, déterminant si elle sera affichée ou non dans la Table. Cela peut être utile, entre autres, pour déterminer s'il faut afficher des informations sensibles.

table.addColumn("Credit Card", Customer::getCreditCardNumber).setHidden(true);

L'attribut navigable détermine si les utilisateurs peuvent interagir avec une colonne pendant la navigation. En réglant setSuppressNavigable() sur true, vous restreignez l'interaction des utilisateurs avec la colonne, offrant une expérience en lecture seule.

table.addColumn("ReadOnly Column", Product::getDescription).setSuppressNavigable(true);

Mise en page et formatage​

Après avoir établi l'identité d'une colonne, la prochaine étape consiste à contrôler comment son contenu apparaît aux utilisateurs. Les options de mise en page telles que l'alignement et le plafonnement déterminent où les données se situent et comment elles restent visibles lorsque vous travaillez avec une Table.

Alignement​

Définir l'alignement d'une colonne vous permet de créer des tables organisées, ce qui peut aider les utilisateurs à identifier les différentes sections dans la Table.

Afficher le code

Le composant Table prend en charge trois options d'alignement :

  • Column.Alignment.LEFT: Convient aux données textuelles ou descriptives où le maintien d'un flux vers la gauche est intuitif. Utile pour mettre l'accent sur le point de départ du contenu.
  • Column.Alignment.CENTER: Les colonnes centrées sont idéales pour les valeurs plus courtes, comme une clé de caractère, un statut, ou toute autre chose qui a une présentation équilibrée.
  • Column.Alignment.RIGHT: Envisagez d'utiliser une colonne alignée à droite pour des valeurs numériques utiles à un examen rapide, comme des dates, des montants et des pourcentages.

Dans l'exemple précédent, la colonne finale pour Cost a été alignée à droite pour fournir une distinction visuelle plus évidente.

Plafonnement​

Le plafonnement de colonne est une fonctionnalité qui permet aux utilisateurs de fixer ou de "pinner" une colonne à un côté spécifique de la Table. Cela est utile lorsque certaines colonnes, telles que les identifiants ou les informations essentielles, doivent rester visibles lors du défilement horizontal à travers une table.

Afficher le code

Il existe trois directions disponibles pour pinner une colonne :

  • PinDirection.LEFT: Pince la colonne à gauche.
  • PinDirection.RIGHT: Pince la colonne à droite.
  • PinDirection.AUTO: La colonne apparaît en fonction de l'ordre d'insertion.

Le plafonnement peut être défini par programmation, vous permettant de changer la direction de plafonnement en fonction des interactions des utilisateurs ou par la logique de l'application.

Dimensions de la colonne 25.03​

Largeur fixe​

Définissez une largeur exacte pour une colonne en utilisant la méthode setWidth(), en spécifiant la largeur souhaitée en pixels :

table.addColumn("ID", Product::getId).setWidth(80f);

La propriété de largeur définit la largeur initiale souhaitée pour la colonne. Comment cette largeur est utilisée dépend d'autres propriétés et du type de colonne :

  • Colonnes régulières : Avec seulement la largeur définie, la colonne s'affiche à la largeur spécifiée mais peut rétrécir proportionnellement si le conteneur est trop petit. La largeur d'origine sert de largeur souhaitée, mais sans contraintes minimales explicites, la colonne peut s'afficher plus petite que la largeur réglée.
  • Colonnes pinées : Maintiennent toujours leur largeur exacte, sans participer au rétrécissement réactif.
  • Colonnes flexibles : Définir la largeur est incompatible avec flex. Utilisez soit la largeur (fixe), soit flex (proportionnel), pas les deux.

Si non spécifié, la colonne utilisera sa largeur estimée en fonction de l'analyse du contenu des premières lignes.

// Obtenir la largeur actuelle
float currentWidth = column.getWidth();

Largeur minimale​

La méthode setMinWidth() vous permet de définir la largeur minimale d'une colonne. Si la largeur minimale n'est pas fournie, la Table calculera la largeur minimale en fonction du contenu de la colonne.

table.addColumn("Price", Product::getPrice).setMinWidth(100f);

La valeur passée représente la largeur minimale en pixels.

La propriété de largeur minimale contrôle la plus petite largeur qu'une colonne peut avoir :

  • Colonnes régulières : Avec seulement une largeur minimale définie, la colonne utilise la largeur minimale comme largeur souhaitée et minimale. Avec largeur + largeur minimale, la colonne peut rétrécir de la largeur jusqu'à la largeur minimale mais pas plus loin.
  • Colonnes pinées : Si seule la largeur minimale est définie (pas de largeur), elle devient la largeur fixe.
  • Colonnes flexibles : Empêche la colonne de rétrécir en dessous de cette largeur même lorsque l'espace du conteneur est limité.
// Obtenir la largeur minimale actuelle
float minWidth = column.getMinWidth();

Largeur maximale​

La méthode setMaxWidth() limite à quel point une colonne peut grandir, empêchant les colonnes avec un contenu long de devenir trop larges et d'affecter la lisibilité :

table.addColumn("Description", Product::getDescription)
  .setMinWidth(100f)
  .setMaxWidth(300f);

La propriété maxWidth limite la croissance des colonnes pour tous les types de colonnes et ne sera jamais dépassée quelle que soit la taille du contenu, du conteneur ou des paramètres flex.

// Obtenir la largeur maximale actuelle
float maxWidth = column.getMaxWidth();

Dimensionnement flexible​

La méthode setFlex() permet un dimensionnement proportionnel des colonnes, permettant aux colonnes de partager l'espace disponible une fois que les colonnes à largeur fixe sont allouées :

// La colonne de titre obtient deux fois l'espace de la colonne d'artiste
table.addColumn("Title", Product::getTitle).setFlex(2f);
table.addColumn("Artist", Product::getArtist).setFlex(1f);

Comportements clés de flex :

  • Valeur de flex : Détermine la proportion de l'espace disponible. Une colonne avec flex=2 obtient deux fois l'espace d'une colonne avec flex=1.
  • Incompatible avec la largeur : Ne peut pas être utilisé en même temps que la propriété largeur. Lorsque flex est supérieur à zéro, il prend effet sur le paramètre de largeur.
  • Respecte les contraintes : Fonctionne avec les contraintes de largeur minimale/largeur maximale. Sans largeur minimale, les colonnes flexibles peuvent rétrécir jusqu'à 0.
Afficher le code

Largeur vs Flex

Les propriétés de largeur et de flex sont mutuellement exclusives. Définir l'une vide automatiquement l'autre. Utilisez la largeur pour un contrôle précis ou le flex pour un comportement réactif.

Dimensionnement automatique​

Au-delà des paramètres manuels de largeur et de flex, les colonnes peuvent également être dimensionnées automatiquement. Le dimensionnement automatique permet à la Table de déterminer les largeurs optimales soit en analysant le contenu, soit en distribuant l'espace proportionnellement.

Dimensionnement automatique basé sur le contenu​

Dimensionnez automatiquement les colonnes en fonction de leur contenu. La Table analyse les données de chaque colonne et calcule la largeur optimale pour afficher le contenu sans troncature.

// Dimensionner automatiquement toutes les colonnes pour s'adapter au contenu
table.setColumnsToAutoSize().thenAccept(c -> {
  // Dimensionnement terminé - les colonnes s'adaptent maintenant à leur contenu
});

// Dimensionner automatiquement une colonne spécifique
table.setColumnToAutoSize("description");

Ajustement proportionnel automatique​

Distribuez toutes les colonnes proportionnellement à travers la largeur disponible de la Table. Cette opération définit chaque colonne à flex=1, les faisant partager la largeur totale de la Table également, indépendamment de la longueur de leur contenu. Les colonnes s'étendront ou se contracteront pour remplir exactement les dimensions de la Table sans espace restant.

// Ajuster les colonnes à la largeur de la table (équivalent à définir flex=1 sur toutes)
table.setColumnsToAutoFit().thenAccept(ignored -> {
  // Toutes les colonnes partagent maintenant l'espace également
});
Opérations asynchrones

Les méthodes de dimensionnement automatique retournent PendingResult<Void> car elles nécessitent des calculs côté client. Utilisez thenAccept() pour exécuter le code après l'achèvement du dimensionnement. Si vous n'avez pas besoin d'attendre la fin, vous pouvez appeler les méthodes sans thenAccept()

Afficher le code

Interactions des utilisateurs 25.03​

Redimensionnement des colonnes​

Le redimensionnement des colonnes donne aux utilisateurs le contrôle sur la quantité d'espace qu'occupe chaque colonne en faisant glisser les bords des colonnes.

Vous pouvez contrôler le comportement de redimensionnement sur des colonnes individuelles lors de la création de votre table :

// Activer le redimensionnement des utilisateurs pour cette colonne
table.addColumn("Title", Product::getTitle).setResizable(true);

// Désactiver le redimensionnement
table.addColumn("ID", Product::getId).setResizable(false);

// Vérifier l'état actuel
boolean canResize = column.isResizable();

Pour les tables où vous souhaitez un comportement cohérent sur plusieurs colonnes, utilisez les méthodes de configuration en masse :

// Rendre toutes les colonnes existantes redimensionnables
table.setColumnsToResizable(true);

// Verrouiller toutes les colonnes existantes contre le redimensionnement
table.setColumnsToResizable(false);

Réorganisation des colonnes​

La réorganisation des colonnes permet aux utilisateurs de faire glisser et déposer des colonnes dans leur ordre préféré, personnalisant la mise en page de la Table pour leur flux de travail.

Configurez les permissions de mouvement des colonnes lors de la configuration de votre table :

// Autoriser les utilisateurs à déplacer cette colonne
table.addColumn("Title", Product::getTitle).setMovable(true);

// Empêcher le mouvement de la colonne (utile pour les colonnes ID ou action)
table.addColumn("ID", Product::getId).setMovable(false);

// Vérifier l'état actuel
boolean canMove = column.isMovable();

Appliquez les paramètres de mouvement à plusieurs colonnes simultanément :

// Activer la réorganisation pour toutes les colonnes existantes
table.setColumnsToMovable(true);

// Désactiver la réorganisation pour toutes les colonnes existantes  
table.setColumnsToMovable(false);
Opérations en masse

Les méthodes setColumnsToResizable() et setColumnsToMovable() n'affectent que les colonnes existantes au moment de l'invocation. Elles ne définissent pas de valeurs par défaut pour les colonnes futures.

Mouvement programmatique des colonnes​

En plus du glisser-déposer, vous pouvez également repositionner les colonnes par programmation par index ou ID. Gardez à l'esprit que l'index est basé uniquement sur les colonnes visibles ; toutes les colonnes cachées sont ignorées lors du calcul des positions.

// Déplacer la colonne à la première position
table.moveColumn("title", 0);

// Déplacer la colonne à la dernière position
table.moveColumn(titleColumn, table.getColumns().size() - 1);

// Mouvement asynchrone avec rappel
table.moveColumn("description", 2).thenAccept(c -> {
  // Colonne déplacée avec succès
});

Gestion des événements​

Le composant Table émet des événements lorsque les utilisateurs interagissent avec les colonnes, vous permettant de répondre aux modifications de mise en page et de sauvegarder les préférences des utilisateurs.

Événements pris en charge :

  • TableColumnResizeEvent: Déclenché lorsqu'un utilisateur redimensionne une colonne en faisant glisser sa bordure.
  • TableColumnMoveEvent: Déclenché lorsqu'un utilisateur réorganise une colonne en faisant glisser son en-tête.

Vous pouvez attacher des écouteurs à la Table pour répondre lorsque les utilisateurs modifient la mise en page de la table.

Table<Product> table = new Table<>();

table.onColumnResize(event -> {
  // Gérer l'événement de redimensionnement de colonne
  // Accéder : event.getColumn(), event.getOldWidth(), event.getNewWidth()
});

table.onColumnMove(event -> {
  // Gérer l'événement de déplacement de colonne  
  // Accéder : event.getColumn(), event.getOldIndex(), event.getNewIndex()
});