Aller au contenu

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

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

Eddard Stark

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

N’a pas de loup géant

Jon Snow

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

Loup géant: Fantôme

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

Eddard Stark

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

 

Seigneur 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 à 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

Nom

Épée

Loup géant

Surnom

Nom

Eddard Stark

Épée

Glace

Loup géant

Surnom

Seigneur Winterfell

Nom

Jon Snow

Épée

Grand-Griffe

Loup géant

Fantôme

Surnom

Le Bâtard de Ned Stark

Nom

Arya Stark

Épée

Aiguille

Loup géant

Nymeria

Surnom

Vues back-office

Tutoriel

Appel du composant "Tableau responsive" 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
  
] ) ?>