---
title: Le tableau inversé
description: "## Présentation Le tableau inversé se révèle très pratique pour afficher des fiches descriptives synthétiques. ![tableau inversé - exemple](https://wiki.biboard.fr/wp-content/uploads/2024/03/V17_Formulaire1.png) ## Les propriétés simples ![Tableau inversé - bandeau de configuration](https://wiki.biboard.fr/wp-content/uploads/2024/03/V17_Formulaire2.png) ``` Les propriétés simples du tableau inversé correspondent aux propriétés tableau…"
url: "https://wiki.biboard.fr/wiki/le-tableau-inverse/"
updated: "2025-09-23"
category: Guide utilisateur / Studio / Tableaux de bord / Tableaux
---

# Le tableau inversé

## Présentation

Le tableau inversé se révèle très pratique pour afficher des fiches descriptives synthétiques.

![tableau inversé - exemple](https://wiki.biboard.fr/wp-content/uploads/2024/03/V17_Formulaire1.png)

## Les propriétés simples

![Tableau inversé  - bandeau de configuration](https://wiki.biboard.fr/wp-content/uploads/2024/03/V17_Formulaire2.png)

```
Les propriétés simples du tableau inversé correspondent aux propriétés tableau simple.
```

## Edition : [nom du composant]

Quand on clique sur l'onglet "Edition : Nom_Du_Tableau" ou on double clique sur le tableau inversé à partir de la page conception en studio, on voit l'assistant des propriétés avancées du tableau inversé.

Comme les tableaux simples, on trouve deux parties:

### Propriétés du champ

#### Section "Champs"

Représente la liste des champs du tableau (marqué en rouge dans l'image)

#### **Propriétés du champ** 

Représente les attributs d'un champ sélectionné (marqué en bleu dans l'image)

![Tableau inversé - quelques propriétés de champ](https://wiki.biboard.fr/wp-content/uploads/2024/06/V18__Tableaux-Tableau-inverse-Proprietes-simples_01.png)

```
Les attributs du tableau inversé correspondent aux attributs du tableau simple. elles sont expliquées ici.
```

#### Modèle

Le cadre marqué en orange dans l'image ci-dessus n'est pas présente dans un tableau simple.
Pour chaque champ, on peut ajouter un code Html/Javascript en utilisant les propriétés marquées en orange:

##### Début

```
Entête du code Html/JS
```

##### Modèle

```
Contenu du code Html/JS
```

##### Fin

```
Pied du code Html/JS
```

## Edition Web : [nom du composant]

### Propriétés

#### Composant

```
Cette fonctionnalité est décrite Comportement lors du filtrage.
```

### Propriétés communes

#### Positionnement

```
Suivre le lien : Positionnement
```

#### Apparence

```
Suivre le lien : Apparence
```

#### Comportement

```
Suivre le lien : Comportement
```

#### Modèle de tableau

```
Suivre le lien : Modèle de tableau
```

### Datasource

#### Source de données

```
Suivre  le lien : Source de données
```

## **Exemple**

Imaginons qu'on a le tableau inversé suivant :

![Tableau inversé - exemple](https://wiki.biboard.fr/wp-content/uploads/2024/03/V17_Formulaire1.png)

On souhaite que le champs "LivraisonPays" dispose d'un lien hypertexte qui nous donne un accès vers la page wiki de ce pays pour avoir plus d'info. Dans ce cas, On ajoute une balise <a> dans le **Modèle** du champ "LivraisonPays" comme présenté dans l'image ci-dessous à droite :

![Tableau inversé - propriétés modèles avec du HTML](https://wiki.biboard.fr/wp-content/uploads/2024/03/V17_Formulaire4-1024x213.png)

**Astuce** : dans le menu modèle , {0} renvoie la nom du champ et {1} renvoie la valeur du champ.

Après l'ajout de cette balise, chaque "livraisonPays" est transformé en lien hypertexte. En cliquant sur une valeur de "LivraisonPays", un popup est ouvert qui est la page wiki de ce pays. [https://fr.aws.biboard.fr/Fichier:V17_Formulaire5.png](https://fr.aws.biboard.fr/Fichier:V17_Formulaire5.png)

On veut aller un peu plus loin dans notre exemple, on voudrait que le "Prix" soit coloré en vert si sa valeur est plus grande que 15. Pour cela, on ajoute un code JS dans le modèle du champ "Prix" comme vu dans l'image

![Tableau inversé - propriétés modèles avec du HTML et JS](https://wiki.biboard.fr/wp-content/uploads/2024/03/V17_Formulaire7-1024x263.png)

Et voici le résultat :

![Tableau inversé - exemple avec HTML et JS](https://wiki.biboard.fr/wp-content/uploads/2024/03/V17_Formulaire6.png)