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
Tableau en colonne
Tableau à double entrées
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
] ) ?>