Documentation

Table

Les tableaux sont composés de colonnes configurables et peuvent afficher les valeurs d'objets SKOOR ou des données provenant d'une source de données externe

image-20240730-110122.png

Chaque ligne d'un tableau correspond à un objet SKOOR unique ou à une ligne de la source de données externe et peut répertorier ses différentes valeurs.

Filtres

Pour chaque colonne, un filtre peut être défini dans la boîte de dialogue de filtrage ou dans l'en-tête de la colonne s'il est configuré dans le widget. Il peut être utilisé pour filtrer les lignes du tableau afin de faire correspondre une chaîne de texte spécifique ou d'afficher uniquement les lignes qui correspondent à une valeur ou à un texte existant dans la liste à l'aide d'une liste déroulante. La boîte de dialogue de filtrage offre une interface intuitive permettant de créer facilement des filtres complexes. Dans la section « filtres en ligne », vous apprendrez à configurer les anciens filtres en ligne qui s’affichent dans l’en-tête.

Dans la boîte de dialogue de filtrage : sélectionnez facilement des opérateurs tels que « contient », « est égal à », « est supérieur à », etc. et saisissez des valeurs sans avoir à mémoriser la syntaxe :

  • Filtres de plage : spécifiquement pour les colonnes numériques et de date, vous pouvez facilement définir des plages (De...À)

  • Sélecteurs de date et d'heure : des sélecteurs intégrés pour les colonnes de date et d'horodatage facilitent la sélection de plages horaires

  • Sélection multiple : sélectionnez plusieurs valeurs dans une liste pour les requêtes « IN ».

image-20251215-094546.png

Caractères génériques

Tous les filtres de texte prennent en charge l'* de caractères génériques. Cela permet de rechercher des parties d'une chaîne de caractères.

  • Dev*

  • Dev*ment

  • *ment

  • 100*

  • 2022*

Colonnes contenant des nombres ou des dates

  • IN(x,y,z)
    Spécifiez une ou plusieurs valeurs. Les résultats ne comprennent que les enregistrements dont les données de la colonne correspondent à la valeur du filtre.

  • NOT(IN(x,y,z))
    Inversion de « in »

  • BETWEEN(x,y)      
    Spécifiez deux valeurs. Le résultat ne comprend que les enregistrements dont les données de la colonne se situent entre les deux valeurs indiquées.

  • >
    Spécifiez une seule valeur. Les résultats incluent uniquement les enregistrements dont les données de la colonne sont supérieures à la valeur du filtre.

  • <
    Spécifiez une seule valeur. Les résultats incluent uniquement les enregistrements dont les données de la colonne sont inférieures à la valeur du filtre.

  • >=
    Spécifiez une ou plusieurs valeurs. Les résultats incluent uniquement les enregistrements dont les données de la colonne sont supérieures ou égales à la valeur du filtre.

  • <= 
    Spécifiez une ou plusieurs valeurs. Les résultats incluent uniquement les enregistrements pour lesquels les données de la colonne sont inférieures ou égales à la valeur du filtre.

Colonnes contenant du texte

  • AND(x,y,z)
    Spécifiez deux chaînes ou caractères ou plus. Les résultats incluent uniquement les enregistrements contenant toutes les chaînes indiquées.

  • OR(x,y,z)
    Spécifiez deux chaînes ou caractères ou plus. Les résultats incluent uniquement les enregistrements contenant au moins l'une des chaînes indiquées.

  • NOT(x)
    Spécifiez un caractère ou une chaîne. Les résultats incluent uniquement les enregistrements ne contenant aucune occurrence de la chaîne indiquée.

Les filtres de texte peuvent également être imbriqués.

Réinitialiser les filtres

Tous les filtres peuvent être réinitialisés (restauration des valeurs par défaut) ou effacés à l'aide du lien correspondant situé au-dessus du tableau ou dans la boîte de dialogue des filtres :

image-20251215-093504.pngimage-20251215-093553.png

Filtres intégrés et valeurs par défaut

Les filtres peuvent s'afficher en ligne dans l'en-tête de colonne si l'option « Afficher dans l'en-tête » est cochée dans la configuration de la colonne, ce qui affiche également les anciens champs de configuration « correspondance de texte » et « filtre par défaut ».

image-20251215-093925.png

Pour les filtres affichés dans la boîte de dialogue de filtrage, un champ de filtre par défaut plus intuitif est disponible.

image-20251215-094141.png

En-têtes et colonnes fixes

Un nombre fixe d'en-têtes et de colonnes peut être configuré dans les paramètres du tableau :

image-20240730-084047.png

Agrégation et sous-agrégation

Les lignes contenant des valeurs numériques peuvent être agrégées (somme, moyenne, min, max). De plus, les valeurs peuvent être regroupées par valeurs de colonne et agrégées à nouveau :

Types de colonnes

Pour plus de détails sur la modification des colonnes, consultez la section ci-dessous Détails des colonnes

Les types de colonnes suivants peuvent être configurés :

Paramètre

Description

Nom

Affiche le nom d'un objet SKOOR

Type

Affiche le type d'un objet SKOOR

Sous-type

Affiche le sous-type d'un objet SKOOR

État

Affiche l'état d'un objet SKOOR. L'état peut être représenté soit par une ampoule, soit par du texte simple. Cliquer sur l'état ouvre l'historique des états de l'objet

Statistiques d'état

Affiche le pourcentage d'un état spécifique sur une période donnée pour un objet SKOOR (l'état et la période sont personnalisables)

Propriété

Affiche une propriété spécifique d'un objet SKOOR

Nombre

Compte le nombre d'objets SKOOR en fonction d'un filtre ou d'une opération de recherche

Valeur

Affiche la valeur d'un objet SKOOR

Nom de l'appareil

Si la ligne contient un objet de type « job », le nom de l'appareil associé s'affiche

Parent

Affiche l'objet parent de l'objet actuel

Motifs

Raison des états autres que OK

Message

Messages générés par les tâches

Sélectionner

Affiche un drapeau pour la sélection

Maintenances

Affiche les maintenances planifiées et en cours d'un objet SKOOR

Source de données

Affiche la valeur d'une colonne d'une ligne de la source de données

Requête de données

Affiche la valeur d'une colonne d'une requête de données

Expression

Affiche une expression spécifique dans la ligne du tableau

Annotation

Ajoute des annotations à la ligne du tableau

Modification du widget Table :

Principes de base

La configuration du tableau est divisée en deux parties.

  • Dans la première partie, les paramètres généraux du tableau sont configurés, tels que l'en-tête du tableau, le nombre de lignes par page ou les fonctions d'agrégation

  • La deuxième partie, la section Source de données, concerne les données réelles du tableau, principalement générées par des objets SKOOR ou stockées dans une base de données. Dans cette section, les données peuvent être chargées, filtrées, enrichies par des superpositions, etc.

    • Les objets SKOOR peuvent être chargés à l'aide d'un filtre d'objets. Chaque objet généré par le filtre donne lieu à une ligne dans le tableau

    • Les bases de données peuvent être interrogées à l'aide du type de recherche « Source de données » (tables ou vues) ou « Requête de données » (SQL)

Paramètres du tableau

image-20240405-150409.png

Paramètre

Description

Taille de la page

Nombre de lignes visibles par page. S'il y a plus de lignes, un sélecteur de page s'affiche

La taille de la page est ignorée si certaines colonnes sont en mode pivot.

Afficher toutes les pages du rapport

Si cette option n'est pas cochée, seule la première page d'un tableau paginé sera visible dans les rapports

Afficher les lignes vides

Afficher les lignes vides si le nombre de lignes est inférieur à la taille de la page.

Afficher l'en-tête

Afficher ou masquer l'en-tête du tableau. Veuillez noter que les filtres de colonne par défaut sont toujours utilisés, même si une colonne ou l'ensemble de l'en-tête est masqué

En-tête fixe

L'en-tête reste visible lorsque les lignes défilent verticalement. Cela nécessite généralement une hauteur de widget configurée pour permettre le défilement à l'intérieur.

Couleur d'arrière-plan alternée des lignes

Les lignes adjacentes s'affichent dans des couleurs légèrement différentes pour améliorer la lisibilité

Nombre de colonnes fixes

Nombre de colonnes à partir de la gauche qui resteront visibles lors du défilement horizontal

Ligne d'agrégation

Ajoute une ligne contenant les valeurs agrégées au tableau.

  • S'applique uniquement aux colonnes numériques pour lesquelles l'option Afficher la valeur agrégée est activée

Position de la ligne d'agrégation

Affiche les valeurs agrégées en haut ou en bas du tableau

Nombre de colonnes de sous-agrégation

Ajoute une ligne d'agrégation basée sur une ou plusieurs colonnes

  • Si le nombre de colonnes est défini sur 2, le titre de la ligne d'agrégation sera ajouté à la troisième colonne, suivi des valeurs agrégées

  • Les titres d'agrégation tels que « Sous-total » ou « Moyenne » ne seront pas ajoutés aux colonnes de type numérique ou date

  • L'agrégation peut être activée ou désactivée dans la configuration des colonnes

Afficher les sous-agrégats imbriqués

Ajoute un sous-total sur un groupe de valeurs agrégées. L'exemple suivant montre le total de toutes les succursales ainsi que le sous-total par succursale et par service 

Conserver les filtres

Si l'option « Conserver les filtres » est activée, les filtres de colonne dynamiques ne sont pas effacés lors d'un changement de page

Autoriser l'exportation

Les données peuvent être exportées aux formats CSV ou XLSX

Action au clic

Spécifiez une action à effectuer lorsqu'un élément est cliqué dans le tableau.

Les espaces réservés suivants sont disponibles :

${params.<paramName>}

${object}

${customObject}

${columns.<columnName>}

${columnName}

${value}

Fournir le paramètre de filtre du tableau

Fournit le filtre actuellement appliqué sous forme de paramètre URL, y compris les filtres d'en-tête, la matrice de filtrage et la requête de recherche. Cela peut être utilisé pour transmettre ce filtre à d'autres widgets qui doivent afficher des informations en fonction des éléments actuellement affichés.

Nom du paramètre de filtre de tableau

Nom du paramètre URL pour le filtre de tableau. La valeur par défaut est tableFilter.

Pivot

Permet de répartir les colonnes verticalement, horizontalement ou les deux en fonction des valeurs.

Source de données

Paramètre

Description

Type de recherche

Sélectionnez la source de données requise. Les champs de la partie source de données de la configuration changent en fonction du type de recherche

Objet, Objets ci-dessous

Sélectionnez un ou plusieurs objets SKOOR à l'aide des filtres d'objets communs

Source de données

Sélectionnez une base de données. Les bases de données sont configurées dans la section Données et objets

Table

Sélectionnez l'une des tables ou vues d'une base de données

Requête de données

Sélectionnez une requête de données. Les requêtes de données sont configurées dans la section Données et objets

Appliquer une requête de matrice de filtres

Si un widget de matrice de filtres est configuré sur le tableau de bord, les filtres de ce widget sont appliqués si les colonnes des deux widgets correspondent

Requête de recherche

Définissez les filtres comme décrit dans l'éditeur de requête de source de données

Annotations

Cochez la case « Autoriser les annotations » pour activer la fonctionnalité d'annotations. Assurez-vous qu'une ou plusieurs colonnes sont définies ici comme clé, celle-ci servant à associer chaque annotation à une ligne de données :

Colonnes

Cliquez sur « Synchroniser les colonnes » pour ajouter toutes les colonnes disponibles de la table ou de la requête de données configurée. Si seul un sous-ensemble des colonnes disponibles est utilisé, cliquez sur « Ajouter une colonne » pour ajouter des colonnes ou supprimez celles qui ne sont pas utilisées après les avoir toutes synchronisées. Pour modifier l'ordre des colonnes, il suffit de glisser-déposer les éléments de colonne.

Ouvrez les paramètres en cliquant sur un élément de colonne :

image-20240830-125521.png

Paramètre

Description

Type

Type de colonne dépendant du type de recherche défini dans la section Source de données du widget

Nom

Nom de la colonne. Il s'affiche dans l'en-tête du tableau

Titre

Champ d'expression permettant d'utiliser des espaces réservés comme en-tête de colonne ; s'il est vide, la valeur du champ Nom sera utilisée.

Déclenchement au double-clic

L'action définie dans la section ClickAction n'est déclenchée que par un double-clic

Largeur

Largeur exacte en pixels ou en % (facultatif)

Largeur minimale

Largeur minimale de la colonne en pixels ou en % (facultatif)

Alignement

Aligner le texte à gauche, au centre ou à droite

Hauteur de l'en-tête

Hauteur de l'en-tête en pixels

Type de filtre

Type de filtre dynamique

  • aucun

  • sélectionner (filtrer selon les valeurs disponibles dans le tableau actuel)

  • texte (filtrer par texte)

  • sélection multiple

Afficher dans l'en-tête

Disponible uniquement si le type de filtre est défini sur « text » ou « select ».
Permet d'afficher le filtre dans l'en-tête de colonne au lieu de la boîte de dialogue de filtre.

Si cette option est cochée, affiche l'ancienne correspondance de texte et le filtre par défaut.

Si cette option n'est pas cochée, un champ combinant opérateur et valeur par défaut apparaît.

Correspondance de texte

Disponible uniquement si le type de filtre est défini sur « text ».

Définit le comportement du filtre de la table.

  • exact : Effectue une correspondance exacte.

  • contains : effectue une correspondance si la valeur contient le texte du filtre.

  • starts_with : effectue une correspondance si la valeur commence par le texte du filtre.

  • ends_with : effectue une correspondance si la valeur se termine par le texte du filtre.

Le caractère générique * peut être utilisé dans tous les modes de correspondance de texte (même dans exact)

Filtre par défaut

Le texte du filtre dynamique peut être prédéfini. Veuillez noter que le filtre est actif même si la colonne n'est pas affichée

Priorité de tri

Définissez une priorité de tri pour rendre la colonne triable. Les lignes sont triées en fonction de la priorité de tri. Si deux colonnes ont la même priorité de tri, la priorité est déterminée par la prévalence de la colonne

Sens de tri par défaut

Trier par défaut dans l'ordre croissant ou décroissant

Afficher

Afficher la colonne (par défaut) ou non. Veuillez noter que les filtres par défaut sont actifs même pour les colonnes masquées

Masquer si vide

Masquer la colonne si aucune ligne du tableau ne contient de valeur pour cette colonne

Masquer sur les petits écrans

Masquer la colonne si elle ne tient pas à l'écran

Masquer les répétitions

Masquer les valeurs répétitives. Cela peut être utilisé pour créer une sorte de regroupement :

Fusionner les lignes en double

Afficher uniquement l'une des lignes ayant la même valeur dans cette colonne 

Afficher la valeur agrégée

Activer ou désactiver cette valeur dans les lignes d'agrégation situées en haut ou en bas du tableau

Orientation de l'en-tête

En-tête horizontal ou vertical. Si vous choisissez l'option verticale, vous devez définir la hauteur de l'en-tête sur une valeur appropriée (pour des raisons techniques, la taille de l'en-tête ne peut pas être déterminée automatiquement)

Afficher au format HTML

Interpréter les balises HTML dans cette colonne

Classe conditionnelle

Spécifiquement pour les colonnes de comptage.
Utilisez cette option pour spécifier des classes conditionnelles pour les valeurs, ce qui permet d'appliquer un style à l'aide de ces classes.

Objet personnalisé

Définir pour utiliser un objet SKOOR personnalisé

Paramètres des types de colonnes

Nom

Affiche le nom de l'objet de ligne. Aucun paramètre disponible.

Type

Affiche le type de l'objet de ligne. Aucun paramètre disponible.

Sous-type

Affiche le sous-type de l'objet ligne. Aucun paramètre disponible.

État

Affiche l'état de l'objet ligne sous forme d'ampoule ou de texte.

Paramètre

Description

Type d'affichage

Sélectionnez le mode d'affichage de l'état d'un objet SKOOR :

  • Ampouleimage-20240903-073725.png

  • Formatimage-20240903-073739.png

Colonne

La colonne dans laquelle l'état se trouve.

Tous les états dans la sélection

Afficher tous les états dans le filtre.

image-20240903-171330.png

Lorsque le type de recherche renvoie des objets SKOOR, l'action de clic peut être définie pour la colonne. En activant Objet personnalisé, vous pouvez afficher l'état d'un objet SKOOR arbitraire (sélectionné par le filtre d'objets). 

Lorsque le type de recherche est une source de données ou une requête de données, sélectionnez la colonne contenant les états requis dans le menu déroulant Colonne :

Si la colonne d'état est utilisée sur une table basée sur une source de données ou une requête de données, les valeurs peuvent être mappées aux états (SKOOR Dashboard >= 7.1.2).

Pour associer plusieurs valeurs à un seul état, les valeurs peuvent être définies sous forme de liste séparée par des virgules.

Statistiques d'état

Calcule le pourcentage de l'objet se trouvant dans l'état sélectionné. Si un objet personnalisé est configuré dans la colonne, plusieurs objets peuvent être sélectionnés par le filtre de recherche. Dans ce cas, tous les objets sont agrégés par la fonction d'agrégation sélectionnée.

Paramètre

Description

État

Sélectionnez l'état dont vous souhaitez obtenir les statistiques

Maintenance considérée comme OK

Définissez si la maintenance doit être considérée comme OK

Fonction d'agrégation

Sélectionnez une fonction d'agrégation à utiliser pour calculer les statistiques de l'État.

Propriété

Affiche une propriété de l'objet de ligne.

Compter

Compte les objets en fonction d'un filtre d'objets

Le champ Conditions accepte les espaces réservés habituels.

Pour obtenir une référence à l'objet ligne, on peut utiliser l'extrait de condition suivant :

{
  "item": "id",
  "operator": "eq",
  "expression": %id%
}

Il est également possible de définir une classe personnalisée pour un comptage donné. Cela est particulièrement utile pour colorer les comptages supérieurs à une valeur spécifiée :

Classes utiles :

  • gras

  • Major

  • Minor

  • Warning

  • OK

Valeur

Affiche une valeur de l'objet de ligne. En activant l'option Objet personnalisé, vous pouvez afficher la valeur d'un objet SKOOR arbitraire (sélectionné par le filtre d'objets). 

La valeur peut être définie par sa clé de valeur. Les valeurs de retour et les valeurs de chaîne acceptent l'index en notation de tableau (par exemple returnValue[0]) ou le nom de l'unité définie.

Paramétrage

Description

Nom de la valeur

Spécifiez le nom de la valeur d'un objet SKOOR.

Afficher l'unité

Définissez si l'unité de cette valeur doit être affichée ou non.

Fonction d'agrégation

Sélectionnez une fonction d'agrégation à appliquer à la valeur.

Nom de l'appareil

Affiche le nom de l'appareil associé si l'objet est une tâche.

Parent

Affiche l'objet parent de l'objet actuel.

Motifs

La raison pour laquelle les objets se trouvent dans un état tel que « Major », « Minor » ou « Warning ».

Message

Affiche le message d'information sur la tâche, s'il est disponible.

Sélection 

Ajoute des options pour ajouter ou supprimer une maintenance ainsi qu'une case à cocher à chaque ligne.

Maintenances

Affiche les opérations de maintenance en cours.

Source de données

Affiche la valeur d'une colonne d'une table de source de données.

La fonction d'agrégation peut être définie pour agréger les valeurs de la colonne.

Si la colonne est de type float, il est possible de définir la précision de la valeur.

Paramétrage

Description

Colonne

Sélectionnez la colonne souhaitée de la source de données.

Unité de la source

L'unité des données dans la colonne.

Unité cible

L'unité cible vers laquelle convertir les valeurs.

Afficher l'unité

Afficher l'unité dans l'en-tête du tableau.

Fonction d'agrégation

Sélectionnez une fonction d'agrégation à appliquer à la valeur de la colonne.

Précision

Définissez la précision de la valeur (pour les nombres à virgule flottante).

Format de l'heure

Définissez le format d'heure souhaité.

Mode pivot

La fonction d'agrégation doit être définie sur « regrouper » pour que ce paramètre s'affiche.

Générer dynamiquement des colonnes en fonction des valeurs de cette colonne.

Options :

  • La colonne
    génère des colonnes en fonction des valeurs de cette colonne. Prend

Requête de données

Affiche la valeur d'une colonne d'une requête de données. Les mêmes options de configuration que pour les sources de données s'appliquent également aux colonnes de requête de données.

Expression

Les colonnes d'expression peuvent calculer des valeurs à partir d'autres colonnes configurées dans ce widget de tableau. Les autres colonnes peuvent être référencées de deux manières :

  • ${columns.<nom de la colonne>}

  • ${columns[« <nom de la colonne> »]}

Pour <nom de colonne>, indiquez exactement le nom configuré dans la colonne correspondante (par exemple, avec une majuscule au début)

Veuillez également consulter la page « Placeholders » pour plus de détails.

Annotation

Avec ce type de colonne, les utilisateurs peuvent enrichir les données d'une source de données ou d'une requête de données à l'aide d'annotations. Il existe cinq types de colonnes d'annotation :

Paramétrage

Description

Type d'affichage

Une liste déroulante proposant le type d'annotation souhaité :

  • Bouton

  • Statut

  • Description

  • Créé

  • Utilisateur

Bouton

Ajoute un bouton à chaque ligne du tableau pour ajouter des annotations.

De plus, un ensemble fixe d'états peut être configuré ici, avec des transitions possibles entre eux. Cliquez sur le bouton Ajouter pour ajouter des états :

Une transition à partir de l'état Undefined doit être configurée. Sinon, aucune annotation ne pourra être ajoutée

Statut

Affiche l'état actuel des annotations de chaque ligne

Description

Affiche la description actuelle de l'annotation

Créé

Affiche la date de création de l'annotation

Utilisateur

Afficher l'utilisateur qui a créé l'annotation

Veuillez consulter la page Annotations pour plus de détails.

Paramètres avancés des colonnes

Actions au clic

Selon le type de colonne, des actions au clic peuvent être définies pour effectuer une exploration en profondeur ou pour naviguer vers une autre page au clic. Voir Action au clic pour plus de détails.

Style des cellules

image-20240903-103023.png

Il est possible de personnaliser le style de chaque cellule du tableau à l'aide de CSS. Cela peut être fait soit en utilisant du CSS en ligne (Style de cellule d'en-tête, Style de cellule de tableau), soit en utilisant des classes CSS qui peuvent être définies dans les paramètres de style d'un tableau de bord.

Paramètre

Description

Classe de cellule d'en-tête

Indiquez un nom de classe pour l'en-tête (pouvant être utilisé dans la mise en forme CSS)

Style de la cellule d'en-tête

Définissez le style spécifique de l'en-tête (en CSS)

Classe de cellule de tableau

Indiquez un nom de classe pour l'ensemble du tableau (utilisable dans la mise en forme CSS)

Style de cellule de tableau

Définir un style spécifique pour l'ensemble du tableau (en CSS)

Orientation de l'en-tête

En-tête horizontal ou vertical. Si vous choisissez l'option verticale, vous devez définir la hauteur de l'en-tête sur une valeur appropriée (pour des raisons techniques, la taille de l'en-tête ne peut pas être déterminée automatiquement)

Débordement

Sélectionnez le comportement par défaut en cas de débordement :

  • wrap

  • ellipsis

Stylisation des tableaux

Icône dépendante du contenu

Depuis SKOOR Dashboard 7.1.2, il est possible d'utiliser la colonne «state» (État) sur les tableaux basés sur des sources de données et des requêtes de données. Les valeurs peuvent être mappées à des états et les ampoules correspondantes s'affichent. Consultez https://skoorag.atlassian.net/wiki/spaces/DOC/pages/494473/Table#State pour plus de détails.

En utilisant la fonctionnalité introduite avec SKOOR Dashboard 7.1.2, l'exemple ci-dessous se présenterait comme suit :

image-20240809-111948.png

Problème

image-20240809-105332.png

Le contenu d'une cellule de tableau (par exemple « OK ») doit être remplacé par une icône (par exemple une ampoule).

Solution

  1. Définir la classe de la cellule du tableau dans les paramètres de la colonne

image-20240809-105709.png

image-20240809-105813.png

Dans l'exemple ci-dessus, la valeur de la classe est extraite de la troisième colonne de chaque ligne. Dans cet exemple, cela donnera une classe définie sur statusOK.

  1. Ajoutez du code CSS dans la boîte de dialogue des paramètres du tableau de bord

image-20240809-110249.png
/* Set a lightbulb as default background image for tds with class status */
td.status {
  background-image: url('assets/images/lightbulb-grey.svg');
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center 6px;
}

/* 
 * Absolute positioned elements (the tooltip in this case) always take the 
 * next not static positioned element as the anchor point
 */
td.status > div {
  position: relative;
  overflow: visible; 
}

/* 
 * Makes the inner td absolute positioned and style the span that it looks like a tooltip.
 * Initially, the tooltip is hidden.
 */
td.status > div > span {    
    padding: 2px;
    display:none;
    position: absolute;
    top: -3px;
    left: 30px;    
    text-align: left;
    background-color: #eff0f1;
    border: 1px solid #c7cbce;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    white-space: nowrap;
}

/* Shows the tooltip on hover */
td.status:hover > div > span {
  display: block;
}

/* 
 * Defines the background image for the defined value. 
 * You need one of those for each possible content, undefined values
 * will display the default image.
 */
td.statusOK {
  background-image: url('assets/images/lightbulb-green.svg');
}

Cela permettra d'afficher une jolie icône sur laquelle le texte d'origine s'affiche au survol.

Veuillez noter que, comme nous n'avons traité que la classe statusOK, les autres classes affichent toutes l'ampoule grise standard

image-20240809-110459.png

Au lieu d'utiliser une URL de fichier pour les images, il est également possible d'intégrer les images directement dans le CSS à l'aide d'URL de données :

td.statusOK {
  background-image: url('data:image/png;base64,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');
}

le résultat ressemblerait à ceci :

image-20240809-111651.png
Previous
Table
Next
Inventaire