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
<?= 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
] ) ?>