Type de tableaux

Tableau classique

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

Tableau minimaliste

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

Tableau à bordure épaisse

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

Contenu des cellules

Actions dans un tableau

<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

<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.

<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

<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.

<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.

<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'.

Taille des tableaux

Tableau simple

Tableau contraint

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

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.

<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.

<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.

<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>
...

<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>
...

Tableau contraint avec contenu sur plusieurs ligne

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

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é.

Tableau contraint avec contenu sur plusieurs ligne

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

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