Skip to main content

# Tableaux

# Type de tableaux

## Tableau classique

|  | Nir | Nom | Prénom | Date de naissance |
--- | --- | --- | --- | --- | --- | ---
1 |  | 2 11 56 34 890 345 | Bracq | Amelie | 02/11/1956 |
2 |  | 1 97 12 35 653 987 | Chateaubriand | Jean-rené | 08/12/1997 |
3 |  | 1 10 78 90 667 098 | Lieris | Michel | 25/10/1978 |
4 |  | 1 10 65 435 878 | Aymeric de Saint Chamas de la tour d'artaise | Marcel | 14/10/1965 |
5 |  | 1 49 06 14 369 163 | Vallotton | Jean-Pierre | 28/06/1949 |
6 |  | 2 11 05 75 329 045 | Sagot Duvauroux | Caroline | 02/12/2011 |
7 |  | 2 50 02 75 482 823 | de Vilmorin | Louise | 13/02/1950 |
8 |  | 1 04 18 95 578 390 | Gautier | Théophile | 09/04/2004 |
9 |  | 1 99 75 95 578 390 | Mallarmé | Stéphane | 24/04/1999 |
10 |  | 1 75 01 25 578 390 | Michaux | Henri | 31/01/1975 |

    <table class="table table-bordered table-striped table-centered">
      ...
    </table>

## Tableau minimaliste

|  | Nir | Nom | Prénom | Date de naissance |
--- | --- | --- | --- | --- | --- | ---
1 |  | 2 11 56 34 890 345 | Bracq | Amelie | 02/11/1956 |
2 |  | 1 97 12 35 653 987 | Chateaubriand | Jean-rené | 08/12/1997 |
3 |  | 1 10 78 90 667 098 | Lieris | Michel | 25/10/1978 |
4 |  | 1 10 65 435 878 | Aymeric de Saint Chamas de la tour d'artaise | Marcel | 14/10/1965 |
5 |  | 1 49 06 14 369 163 | Vallotton | Jean-Pierre | 28/06/1949 |
6 |  | 2 11 05 75 329 045 | Sagot Duvauroux | Caroline | 02/12/2011 |
7 |  | 2 50 02 75 482 823 | de Vilmorin | Louise | 13/02/1950 |
8 |  | 1 04 18 95 578 390 | Gautier | Théophile | 09/04/2004 |
9 |  | 1 99 75 95 578 390 | Mallarmé | Stéphane | 24/04/1999 |
10 |  | 1 75 01 25 578 390 | Michaux | Henri | 31/01/1975 |

    <table class="table table-simple">
      ...
    </table>

## Tableau à bordure épaisse

0 |  | 2 11 56 34 890 345 | Bracq | Amelie | 02/11/1956 |
1 |  | 1 97 12 35 653 987 | Chateaubriand | Jean-rené | 08/12/1997 |
2 |  | 1 10 78 90 667 098 | Lieris | Michel | 25/10/1978 |

    <table class="table table-bordered table-striped table-centered table-border-lg">
      ...
    </table>

# Contenu des cellules

## Actions dans un tableau

0 |  | 2 11 56 34 890 345 | Bracq | Amelie | 02/11/1956 |
1 |  | 1 97 12 35 653 987 | Chateaubriand | Jean-rené | 08/12/1997 |
2 |  | 1 10 78 90 667 098 | Lieris | Michel | 25/10/1978 |

    <table>
      ...
      <td class="actions right">
        <div class="dropdown">
          <a href="#" class="btn btn-icon">
            <span class="am-icon icon-detailview"></span>
          </a>
          <button type="button"  class="btn btn-icon" data-toggle="dropdown" data-target="#" aria-haspopup="true" aria-expanded="false" data-display="static">
          <span class="am-icon icon-settings-menu"></span>
          </button>
          <div role="menu" class="dropdown-menu">
            <a role="menuitem" href="#" class="dropdown-item">Renouveler</a>
            <a role="menuitem" href="#" class="dropdown-item">Supprimer les droits</a>
            <a role="menuitem" href="#" class="dropdown-item">Suspendre les droits </a>
          </div>
        </div>
      </td>
      ...
    </table>

## Alignement du texte dans les cellules

0 |  | 2 11 56 34 890 345 | Bracq | 12,50 € | 02/11/1956 |
1 |  | 1 97 12 35 653 987 | Chateaubriand | 12,50 € | 08/12/1997 |
2 |  | 1 10 78 90 667 098 | Lieris | 12,50 € | 25/10/1978 |

    <table>
      ...
      <td>0</td>
      <td>
        <input type="checkbox">
      </td>
      <td>2 11 56 34 890 345</td>
      <td>Bracq</td>
      <td class="right">12,50 €</td>
      <td class="center">02/11/1956</td>
      <td class="actions">
        <a href="#" class="btn am-icon icon-detailview"></a>
      </td>
      ...
    </table>

# Mise en évidence des éléments de tableau

## Surlignement

Le framework propose plusieurs motifs de couleurs permettant de mettre en évidence, de façon contextuelle, une ligne ou une cellule de tableau.

Le nom des classes css donne une indication du contexte d'utilisation envisagé. Il convient d'utiliser le surlignement avec parcimonie sous peine d'en annuler l'effet.

classe | Nir | Nom | Prénom | date de naissance |
--- | --- | --- | --- | --- | ---
| 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
`.info` | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
`.warning` | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
`.danger` | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
`.success` | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
`.active` | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

    <table>
      <tbody>
        <tr class="info">...</tr>
        <tr class="warning">...</tr>
        <tr class="danger">...</tr>
        <tr class="success">...</tr>
      </tbody>
    </table>

## Surlignement renforcé

La mise en évidence peut également être plus appuyée pour indiquer une erreur ou une sélection en cours

classe | Nir | Nom | Prénom | date de naissance |
--- | --- | --- | --- | --- | ---
`.emphasis-alert` | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
| 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
`.emphasis-alert` | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
| 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
`.active` | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

    <table>
      <tbody>
        <tr class="emphasis-alert">...</tr>
        <tr class="emphasis-active">...</tr>
        <tr class="active">...</tr>
      </tbody>
    </table>

## Surlignement de cellule

La mise en évidence peut également se placer sur les cellules d'un tableau.

| Nir | Nom | Prénom | date de naissance |
--- | --- | --- | --- | --- | ---
1 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
2 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
3 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
4 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
5 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
6 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
7 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
6 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
8 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
9 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
10 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |

    <table>
      <tbody>
        <tr>
          <td class="info">...</td>
        </tr>
        <tr>
          <td class="warning">...</td>
        </tr>
        <tr>
          <td class="danger">...</td>
        </tr>
        <tr>
          <td class="success">...</td>
        </tr>
        <tr>
          <td class="emphasis-alert">...</td>
        </tr>
        <tr>
          <td class="emphasis-active">...</td>
        </tr>
        <tr>
          <td class="active">...</td>
        </tr>
      </tbody>
    </table>

## Surlignement au survol

Il est également possible d'effectuer une mise en évidence de la ligne d'un tableau au survol facilitant ainsi sa lecture. Pour cela le tableau doit posséder la classe `.table-hover`. Ce procédé est compatible avec les autres méthodes de surlignement à l'exception de l'état `.active` qui possède son propre état de survol.

Si la ligne du tableau ne possède qu'une action possible, il est alors conseillé de la rendre cliquable par javascript.

| Nir | Nom | Prénom | date de naissance |
--- | --- | --- | --- | --- | ---
1 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
2 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
3 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
4 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
5 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

    <table class="table table-bordered table-striped table-fixedwidth table-hover">
      <tbody>
        <tr>
          <td>...</td>
        </tr>
        ...
      </tbody>
    </table>

## Infobulle dans un tableau

Lorsque la taille des cellules de tableau ne permet pas d'afficher toutes les données, il est possible d'attribuer une infobulle à une cellule de tableau. Il faut alors configurer l'infobulle pour l'attacher au `Body` en utilisant le paramètre `container: 'body'`.

| Nir | Nom | Prénom | date de naissance |
--- | --- | --- | --- | --- | ---
1 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
2 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
3 | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |

# Taille des tableaux

## Tableau simple

classe |  | Nir | Nom | Prénom test de libelle très très très très très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

## Tableau contraint

Ajout de la classe `table-fixedwidth` pour contraindre le tableau dans son conteneur.

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

## Tableau contraint à taille de cellules variables

Ajouter la classe `table-fixedwidth` et les classes `cell-xxs, cell-xs, cell-sm, cell-md, cell-lg ou cell-xlg` sur les lignes du tableau permet de définir les tailles de cellules en pourcentages.

La taille définie est honorée par le navigateur selon la taille disponible et les autres déclarations de cellules. Les tailles ne sont pas garanties précisément mais les proportions relatives sont conservées.

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

    <table class="table table-bordered table-striped table-fixedwidth">
      <thead>
        <tr>
          <th class="cell-xs"></th>
          <th class="cell-xs"></th>
          <th class="cell-sm">Nir</th>
          <th class="cell-lg">Nom</th>
          <th class="cell-xlg">Prénom test de libelle très long</th>
          <th class="cell-date">date de naissance</th>
          <th class="cell-action"></th>
        </tr>
    ...

Pour affiner encore les tailles de cellules, celles-ci peuvent être exprimées en modules de 24 divisions avec les classes `cell-1 ... 24`. Cette méthode permet d'obtenir un tableau dont la somme des définitions de tailles fait 100%, assurant ainsi un redimensionnement parfaitement proportionnel.

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

    <table class="table table-bordered table-striped table-fixedwidth">
      <thead>
        <tr>
          <th class="cell-1"></th>
          <th class="cell-1"></th>
          <th class="cell-3">Nir</th>
          <th class="cell-6">Nom</th>
          <th class="cell-8">Prénom test de libelle très long</th>
          <th class="cell-3">date de naissance</th>
          <th class="cell-2"></th>
        </tr>
    ...

Enfin les classes `cell-fixed-xxs, cell-fixed-xs, cell-fixed-sm, cell-fixed-md, cell-fixed-lg, cell-fixed-xlg ou cell-date et cell-action` permettent de définir des tailles fixes en pixels (respectivement 35px, 50px,100px, 150px, 250px, 350px, 128px, 64px).

La taille des cellules définie en pixels est honorée en priorité, c'est donc un bon moyen de protéger une colonne pour que son contenu reste toujours visible. Cependant, ajouter de nombreuses définitions de taille en pixels augmente la taille minimale du tableau pouvant provoquer son débordement hors de son conteneur et éventuellement l'apparition d'une barre de défilement horizontale.

Il est conseillé de laisser au moins une colonne sans définition de taille pour absorber la réduction ou l'agrandissement du tableau.

Il est possible de placer des définitions de taille que sur certaines colonnes, voir de mélanger les définitions en pixels et pourcentages. Cependant, il faut savoir que les définitions en pixels agissent sous Firefox comme des attributs min-width et récupéreront l'espace disponible non défini.

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

    <table class="table table-bordered table-striped table-fixedwidth">
      <thead>
        <tr>
          <th class="cell-fixed-xs"></th>
          <th class="cell-fixed-sm"></th>
          <th class="cell-fixed-md">Nir</th>
          <th class="cell-fixed-lg">Nom</th>
          <th class="">Prénom test de libelle très long</th>
          <th class="cell-date">date de naissance</th>
          <th class="cell-action"></th>
        </tr>
    ...

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

    <table class="table table-bordered table-striped table-fixedwidth">
      <thead>
        <tr>
          <th class="cell-xs"></th>
          <th class="cell-xs"></th>
          <th class="cell-sm">Nir</th>
          <th class="cell-lg">Nom</th>
          <th class="cell-xlg">Prénom test de libelle très long</th>
          <th class="cell-date">date de naissance</th>
          <th class="cell-action"></th>
        </tr>
    ...

## Tableau à taille de colonnes variables

Utilisation de la classe `table-fitcontent` et d'une déclarartion de taille en pixel pour créer un tableau à taille fixe

    <table class="table table-bordered table-striped table-fitcontent">
    <colgroup>
      <col style="width: 40px;">
      <col style="width: 40px;">
      <col style="width: 100px;">
      <col style="width: 100px;">
      <col style="width: 100px;">
      <col style="width: 100px;">
      <col style="width: 60px;">
    </colgroup>
    <thead>
    ...

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

## Tableau contraint avec contenu sur plusieurs ligne

Ajout des classes`table-multipleline-header et table-multipleline-body` pour permettre aux contenus de passer sur plusieurs lignes

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

## Tableau responsive

Un tableau peut également être inclus dans un conteneur possédant la classe `table-responsive` pour lui permettre de scroller à l'intérieur de celui-ci. Si le tableau possède des éléments flottants (liste déroulantes, infobulles), le composant popper.js pourra être utilisé pour garantir leur visibilité.

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand armand sigmund sidonie anatole fernand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand armand sigmund sidonie anatole fernand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

## Tableau contraint avec contenu sur plusieurs ligne

Ajout des classes`table-multipleline-header et table-multipleline-body` pour permettre aux contenus de passer sur plusieurs lignes

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

## Dimensionnement de tabeau dynamique

Pour créer un tableau combinant la présentation responsive et contrainte, il suffit de placer le tableau dans un conteneur possédant la classe `table-dynamicsize` et une déclaration de largeur. La classe `fixedwidth` pourra être ajouter ou supprimer au conteneur pour modifier la présentation du tableau dynamiquement.

Ci dessous un exemple avec un bouton avec une icône représentant chaque état et un exemple avec une icône unique

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand armand sigmund sidonie anatole fernand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand armand sigmund sidonie anatole fernand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |