Aller au contenu

Flexible Content - Tableau Complexe

Ce composant permet d’afficher un tableau de données. L’agencement desktop et mobile est modifiable suivant vos besoins.

À la différence du Tableau Simple, ce composant vous permet d’enrichir vos cellules avec du style de texte ou un bouton.

Choix de l'affichage responsive

Réarrangement du tableau en une seule colonne

Cette présentation permet une lisibilité du tableau en mobile sans provoquer de scroll (défilement) horizontal. Le tableau est ré-agencé en plusieurs blocs regroupant les informations ensemble :

  • dans le cas d’un tableau en ligne, chaque ligne est ré-agencée en une seule colonne, chaque colonne étant affichée l’une en dessous de l’autre
  • dans le cas d’un tableau en colonne, les colonnes sont affichées les unes en dessous des autres
  • dans le cas d’un tableau à double entrée, on retrouve le comportement d’un tableau en ligne, mais le titre des colonnes est repris à chaque ligne avec le contenu de la cellule correspondante en face.

Défilement horizontal

Si la mise en page et le contenu du tableau sont exacts et ne doivent pas se modifier, le défilement horizontal permet à l’utilisateur de naviguer dans le tableau de droite à gauche en conservant son aspect desktop.

Orientation du tableau

Tableau en ligne

Eddard Stark

Possède une épée nommée Glace

N’a pas de loup géant

Seigneur de Winterfell

Jon Snow

Possède une épée nommée Grand-Griffe

Loup géant: Fantôme

Le Bâtard de Ned Stark

Arya Stark

Possède une épée nommée Aiguille

Loup géant : Nymeria

Tableau en colonne

Eddard Stark

Jon Snow

Arya Stark

Possède une épée nommée Glace

Possède une épée nommée Grand-Griffe

Possède une épée nommée Aiguille

Loup géant: Fantôme

Loup géant : Nymeria

Seigneur Winterfell

Le Bâtard de Ned Stark

Voir la biographie Voir la biographie Voir la biographie

Tableau à double entrées

Nom

Épée

Loup géant

Surnom

Eddard Stark

Glace

Seigneur Winterfell

Voir la biographie

Jon Snow

Grand-Griffe

Fantôme

Le Bâtard de Ned Stark

Voir la biographie

Arya Stark

Aiguille

Nymeria

Voir la biographie

Vues back-office

Tutoriel

Appel du composant "Tableau Complexe" hors Flexible Content

PHP
<?= ifc_render_component( 'responsive-table', [
    'table_mobile' => 'collapse', // ou 'scroll' suivant le style voulu en mobile
    'table_orientation' => 'horizontal', // ou 'vertical' ou 'double'
    'table_rows' => [], // tableau des lignes si le tableau est en lignes
    'table_columns' => [], // tableau des colonnes si le tableau est en colonnes
    'double_table_head' => [], // tableau des entêtes de colonnes si le tableau est à double entrée
    'double_table_rows' => [], // tableau des lignes si le tableau est à double entrée
    'table_class' => "", // Classes CSS supplémentaires
  ] ) ?>