Studio 1.5.0

Runtime 2.8.0

REDY 16.4.0

Cellule de tableau de données

💎 Acteur Avancé

Le tableau de données est un acteur qui nécessite une bonne compréhension de son fonctionnement et de ses propriétés ainsi que des notions de JSON et parfois du JavaScript.

Ce type d’acteur est particulier car il ne peut pas être utilisé directement dans une scène ou un composite. Il est utilisé uniquement comme style d’acteur pour les colonnes d’un acteur Tableau de données.

Chaque colonne d’un tableau de données utilise un style d’acteur cellule de tableau de données. Des styles par défaut sont fournis pour chaque type de colonne (voir la page Tableau de données pour plus de détails).

Il est possible de créer d’autres styles d’acteur Cellule de donnée pour les personnaliser. Ils seront basés sur les styles par défaut pour les utiliser dans les colonnes de type correspondant.
Voir la page Tableau de données pour plus de détails.

Sommaire

• Cellule de tableau de données
• Propriétés
  • Afficher le texte ?
  • Composite
  • Dépassement de texte
  • Format date/heure
  • Image faux
  • Image vrai
  • Position verticale
  • Texte faux
  • Texte vrai
  • Type
  • Valeur
• Informations
  • canAddActor
  • canClearActors
  • canRemoveActor
  • childActors
  • column
  • columnKey
  • composite
  • content
  • dataRow
  • isHeader
  • rowKey
  • text
  • transformedValue
  • value
• Méthodes
  • addActor(actorSetup, atIndex)
  • addActors(actorSetups, atIndexes?)
  • clearActors()
  • getActor(key)
  • moveDownActor(key)
  • moveUpActor(key)
  • removeActor(actorKey)
  • removeActors(…actorKeys)
• Événements
  • onDidActorAdd
  • onDidActorRemove
  • onDidActorsAdd
  • onDidActorsClear
  • onDidActorsRemove
• Hérite de
• Types de colonnes
• Basé sur Texte table-cell-string
• Basé sur Nombre table-cell-number
• Basé sur Booléen table-cell-boolean
• Basé sur Booléen image table-cell-boolean-image
• Basé sur Date/Heure table-cell-datetime
• Basé sur Personalisé table-cell-custom

🔧 propriété · ℹ️ information · ⚙️ méthode · ⚡ évènement · 🔒 lecture seule

Propriétés

Afficher le texte ?

this.properties.displayText · boolean · défaut false · modifie : Rendu

Composite

this.properties.composite · any · défaut null · modifie : Rendu

Pour personnaliser réellement l’affichage, il faut créer un composite qui va définir comment afficher la donnée et ajouter un style d’acteur cellule de tableau de données basé sur Personnalisé table-cell-custom qui utilise ce composite.

Passage par le contexte de données

Le composite à créer reçoit les mêmes éléments de la cellule que dans l’évènement onDidCellRender de l’acteur Tableau de données. Ils sont disponibles dans le contexte de données du composite. Ainsi, elle sont accessibles par script ou via des liaisons vers le contexte de données.

Passage par les propriétés du composite

Il est également possible de commander des propriétés du composite en passant un objet dans l’évènement onCellContentTransform de l’acteur Tableau de données.

// onCellContentTransform

if (!context.isHeader && context.columnKey === "custom1") {
  // la clé de la colonne est "custom1"
  // Personnalisation de la cellule
  return {
      // Passage d'une propriété "color" au composite
      color: context.dataRow.status === "active" ? "green" : "red",
      // Passage d'une propriété "label" au composite
      label: context.dataRow.name,
  };
}

Dans cet exemple, on passe deux propriétés color et label au composite de la cellule. La couleur du composite sera changée en fonction de la valeur du champ status de la ligne de données, et la propriété scpécifique qui a comme clé label sera définie avec la valeur du champ name de la ligne de données.

Dépassement de texte

this.properties.textOverflow · 'nowrap' | 'break' | 'wrap' | 'truncate' · défaut 'nowrap' · modifie : Rendu

Par défaut, le texte est tronqué si la largeur de la cellule est insuffisante pour l’afficher en entier. Il est possible de configurer le comportement en cas de dépassement de texte.

• Tronquer truncate: le texte est coupé et des points de suspension sont ajoutés à la fin.
• Retour à la ligne wrap: le texte est affiché sur plusieurs lignes si nécessaire.
• Retour à la ligne (Cassure) break: le texte est affiché sur plusieurs lignes si nécessaire, en cassant les mots si besoin.
• Sans retour à la ligne nowrap: le texte est affiché en une seule ligne, même s’il dépasse la largeur de la cellule.

Format date/heure

this.properties.datetimeFormat · string · défaut 'DD/MM/YYYY HH:mm:ss' · modifie : Rendu

Il est possible de configurer le format d’affichage de la date/heure en utilisant la propriété Format. Vous pouvez utiliser les formats de Moment.js pour personnaliser l’affichage selon vos besoins.

Image faux

this.properties.falseImage · string · défaut ''

Image vrai

this.properties.trueImage · string · défaut ''

Position verticale

this.properties.verticalPosition · 'start' | 'center' | 'end' · défaut 'center' · modifie : Style CSS

Il est possible de configurer l’alignement vertical du texte dans la cellule. Par défaut, le texte est centré verticalement.

• Haut start: le texte est aligné en haut de la cellule.
• Milieu center: le texte est centré verticalement dans la cellule.
• Bas end: le texte est aligné en bas de la cellule.

Texte faux

this.properties.falseText · string · défaut '_table_cell_false_text'

Texte vrai

this.properties.trueText · string · défaut '_table_cell_true_text'

Deux propriétés permettent de configurer le texte affiché pour les états vrai et faux.

Par défaut, les textes sont “Oui” et “Non”, mais ils peuvent être personnalisés en utilisant les propriétés suivantes :

Type

this.properties.type · 'string' | 'number' | 'boolean' | 'boolean-image' | 'datetime' · défaut 'string'

Valeur

this.properties.value · string · défaut '' · modifie : Rendu

La propriété principale à configurer est la valeur à afficher dans la cellule. Par défaut, la valeur de la donnée est utilisée.

Informations

Accessibles par script, via this dans un script de l’acteur ou context.getActor('clé') depuis un autre acteur.

canAddActor

this.canAddActor · 🔒 lecture seule · boolean

Pour savoir s’il est possible d’ajouter un acteur.

canClearActors

this.canClearActors · 🔒 lecture seule · boolean

Pour savoir s’il est possible de retirer tous les acteurs.

canRemoveActor

this.canRemoveActor · 🔒 lecture seule · boolean

Pour savoir s’il est possible de retirer un acteur.

childActors

this.childActors · 🔒 lecture seule · Array<BaseActor

Obtiens la liste de tous les acteurs enfants.

column

this.column · 🔒 lecture seule

Colonne de la cellule (key, name, fieldPath, style, columnWidth…).

columnKey

this.columnKey · 🔒 lecture seule

Clé de la colonne de la cellule.

composite

this.composite

Composite affiché dans la cellule, null sans composite.

content

this.content · 🔒 lecture seule

Contenu affiché dans la cellule : l’image pour le type boolean-image, sinon le texte.

dataRow

this.dataRow · 🔒 lecture seule

Ligne de données de la cellule (objet vide si absente).

isHeader

this.isHeader · 🔒 lecture seule

Indique si la cellule appartient à la ligne d’en-tête.

rowKey

this.rowKey · 🔒 lecture seule

Index de la ligne de la cellule (HEADER pour l’en-tête).

text

this.text · 🔒 lecture seule

Texte affiché dans la cellule : la valeur transformée, mise en forme selon le type de la cellule (booléen, date).

transformedValue

this.transformedValue

Valeur de la cellule après transformation par l’évènement onCellContentTransform du tableau.

value

this.value · 🔒 lecture seule

Valeur brute de la cellule (propriété value).

Méthodes

addActor(actorSetup, atIndex)

this.addActor(actorSetup, atIndex) · renvoie Promise<Actor.BaseActor>

Ajoute un acteur enfant. L’acteur est ajouté à la fin de la liste si atIndex n’est pas renseigné. Note: C’est le seul moyen de créer un acteur.

• actorSetup : Setup JSON de l’acteur à ajouter.
• atIndex : Position à laquelle l’acteur doit être ajouté.

addActors(actorSetups, atIndexes?)

this.addActors(actorSetups, atIndexes?) · renvoie Promise<Array.<Actor.BaseActor>>

Ajoute une collection d’acteurs enfants. Les acteurs sont ajoutés à la fin de la liste si le tableau d’indexes n’est pas spécifié.

• actorSetups : Tableau des Setups JSON des acteurs à ajouter.
• atIndexes : Tableau des indexes où ajouter les acteurs.

clearActors()

this.clearActors()

Retire tous les acteurs enfants.

getActor(key)

this.getActor(key) · renvoie Actor.BaseActor

Obtient un acteur enfant par sa clé.

• key : Clé de l’acteur à trouver.

moveDownActor(key)

this.moveDownActor(key)

Déplace vers le bas un acteur enfant obtenu par sa clé.

• key : Clé de l’acteur enfant à déplacer.

moveUpActor(key)

this.moveUpActor(key)

Déplace vers le haut un acteur enfant obtenu par sa clé.

• key : Clé de l’acteur enfant à déplacer.

removeActor(actorKey)

this.removeActor(actorKey)

Retire un acteur enfant.

• actorKey : Clé de l’acteur enfant à retirer.

removeActors(…actorKeys)

this.removeActors(...actorKeys)

Retire les acteurs enfants.

• actorKeys : Clés de l’acteur enfant à retirer.

Événements

Les évènements communs à tous les acteurs sont décrits avec l’acteur de base.

onDidActorAdd

Se produit lorsque un acteur est ajouté.

context : contexte d’évènement, avec en plus :

Membre de context	Type	Description
addedActor	Actor.BaseActor	Acteur ajouté.

onDidActorRemove

Se produit lorsque un acteur est retiré.

context : contexte d’évènement, avec en plus :

Membre de context	Type	Description
removedActor	Actor.BaseActor	Acteur retiré.

onDidActorsAdd

Se produit lorsque une collection d’acteurs est ajoutée.

context : contexte d’évènement, avec en plus :

Membre de context	Type	Description
addedActors	Array.<Actor.BaseActor>	Acteurs ajoutés.

onDidActorsClear

Se produit lorsque la collection d’acteurs est vidée.

context : contexte d’évènement, avec en plus :

Membre de context	Type	Description
removedActors	Array.<Actor.BaseActor>	Acteurs retirés.

onDidActorsRemove

Se produit lorsque des acteurs sont retirés.

context : contexte d’évènement, avec en plus :

Membre de context	Type	Description
removedActors	Array.<Actor.BaseActor>	Acteurs retirés.

Hérite de

Outre ce qui est décrit ici, l’acteur a tout ce que décrit l’acteur de base : propriétés communes (taille, disposition, aspect, texte, bordures, effets…), évènements communs (cycle de vie, souris, clavier…) et membres accessibles par script.

Il hérite aussi de :

• LayoutBase : Base pour les acteurs de disposition.
• Parenthood (comportement) : Étend la classe pour permettre d’avoir des acteurs enfants.

Types de colonnes

Chaque type de colonne utilise un jeu de propriétés spécifiques pour configurer l’affichage des données dans les cellules. Les types de colonnes disponibles sont décrits dans la page Tableau de données.

Lorsqu’on crée un style d’acteur cellule de tableau de données, il est important de se baser sur le style correspondant au type de colonne souhaité. Ainsi, les propriétés spécifiques au type de colonne seront disponibles pour la configuration.

Par exemple, pour créer un style d’acteur cellule de tableau de données pour une colonne de type Nombre, il faut créer un nouveau style et le baser sur le style par défaut Nombre table-cell-number. Cela permettra d’accéder aux propriétés spécifiques pour configurer l’affichage des nombres dans les cellules de cette colonne.

Autre exemple, pour créer un style d’acteur cellule de tableau de données pour l’utiliser comme en-tête de colonne, il faut créer un nouveau style et le baser sur le style par défaut Texte entête table-cell-string-header ou Texte table-cell-string. Cela permettra d’accéder aux propriétés spécifiques pour configurer l’affichage des en-têtes de colonnes.

Basé sur Texte table-cell-string

Ce style est utilisé pour les colonnes de type Texte. Il permet de configurer l’affichage des données textuelles dans les cellules.

Basé sur Nombre table-cell-number

Ce style est utilisé pour les colonnes de type Nombre. Il permet de configurer l’affichage des données numériques dans les cellules.

La propriété Valeur est un nombre.

Par défaut l’alignement horizontal est à droite, mais il est possible de le modifier en utilisant la propriété commune Alignement du texte textAlign (gauche, centre, droite, justifié).

Basé sur Booléen table-cell-boolean

Ce style est utilisé pour les colonnes de type Booléen. Il permet de configurer l’affichage des données booléennes (vrai/faux) dans les cellules. Un texte est affiché selon la valeur (par défaut “Oui” pour vrai et “Non” pour faux).

La propriété Valeur est un booléen.

Basé sur Booléen image table-cell-boolean-image

Ce style est utilisé pour les colonnes de type Booléen (image). Il permet de configurer l’affichage des données booléennes (vrai/faux) dans les cellules en utilisant des images et un texte au survol pour représenter les états vrai et faux. Le texte est affiché selon la valeur (par défaut “Oui” pour vrai et “Non” pour faux). Si aucune image n’est configurée, une bulle de couleur verte (vrai) ou rouge (faux) est affichée.

La propriété Valeur est un booléen.

Basé sur Date/Heure table-cell-datetime

Ce style est utilisé pour les colonnes de type Date/Heure. Il permet de configurer l’affichage des données de type date et heure dans les cellules.

La propriété Valeur est une date/heure au format ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ) ou un timestamp (nombre de millisecondes depuis le 1er janvier 1970).

Basé sur Personalisé table-cell-custom

Ce style est utilisé pour les colonnes de type Personnalisé. Il permet de créer des cellules avec un affichage entièrement personnalisé en utilisant un composite. Par défaut, un composite basique est fourni, mais il est possible de créer un composite personnalisé.

---

✔️ FR IT

❔ Posez une Question 💡 Proposez une Suggestion 💬 Venez discuter

made by