Vous êtes ici

Construire une en-tête multi-niveaux pour vos tableaux

Vous avez 30 secondes ?
S'abonner au flux d'actualités
Rubrique: 
Astuce
Difficultée: 
Intermédiaire
Comme chacun le sait, l'élément table a été ajouté au Form API de Drupal 8, ce qui signifie que nous pouvons désormais programmer l'affichage d'un tableau dans un formulaire via l'élément :

'#type' => 'table'

Dans cette astuce, nous allons construire une en-tête (un header) ridiculement complexe pour notre tableau, à savoir un header multi-niveaux pour l'élément HTML table, comme celui-ci :
Le header de ce tableau a plusieurs niveaux, avec des cellules groupées entre-elles.
 
Le rendu de tableaux multi-niveaux est une nouvelle fonctionnalité qui n'existe pas à l'heure actuelle dans Drupal 8. J'en ai fait la proposition ici :
Lorsque cette nouvelle fonctionnalité sera prête et ajoutée à Drupal 8 - c'est à dire que le lien ci-dessus sera indiqué 'fixed' ou '(closed) fixed' - alors vous pourrez sauter le premier paragraphe et utiliser directement la Form API comme dans le dernier paragraphe : créer le tableau.

Ajout de la fonctionnalité

Dans ce paragraphe, nous allons ajouter à Form API la possibilité d'effectuer un rendu aussi complexe pour notre tableau. Cette fonctionnalité a été proposée à l'inclusion pour Drupal 8, n'hésitez pas à commenter ici pour accélérer le processus. En attendant d'être dans le core de Drupal, nous allons devoir développer un peu pour l'ajouter nous-même. Pour cela, rien de plus simple, voici deux méthodes à ajouter dans un module custom ou dans votre thème !
 
La première méthode est simplement une réécriture de la méthode template_preprocess_table() du fichier theme.inc de Drupal. La seconde méthode permet d'altérer la structure du rendering de l'élément table en ajoutant une nouvelle clef d'une part, et en supprimant l'usage de la méthode template_preprocess_table() devenue obsolète.
 
Désormais, il s'agit d'insérer un nouveau template dans votre thème : table.html.twig. Ce template devra être placé dans un dossier templates de votre thème et viendra remplacer l'usage de celui provenant de Drupal. Ce fichier doit contenir le code suivant :

Création du tableau

La partie du dessus ayant assuré la création de la nouvelle fonctionnalité, nous disposons désormais d'une nouvelle clef et d'une possibilité nouvelle pour l'élément table permettant la création d'un tableau avec une en-tête complexe. Voyons comment :
$form['table'] = [
  '#type' => 'table',
  '#header' => [
    'row1' => [
      'bigcell' => [
        'data' => 'Big header',
        'rowspan' => 2
      ],
      'longcell' => [
        'data' => 'Long header',
        'colspan' => 2
      ],
      'Small header'
    ],
    'row2' => ['cell1', 'cell2', 'cell3']
  ],
  '#header_multilevel' => TRUE,
  '#empty' => $this->t('There are no lines here.'),
];
Dans le code ci-dessus, nous remarquons immédiatement la nouvelle clef : #header_multilevel passée à TRUE. Cette clef indique que nous désirons un header sur plusieurs lignes, et donc, que l'on donnera un tableau à l'élément #header plus complexe qu'habituellement. Cet élément #header justement est désormais un tableau dont chaque élément représente une ligne du header. Nous retrouvons donc deux lignes : 'row1' et 'row2' (la valeur des clefs n'a pas d'importance). Chacune de ces lignes contient quatre colonnes. Dans la première, la première cellule groupe les deux lignes ensembles, puis la seconde cellule groupe deux colonnes ensembles, enfin la dernière est une cellule simple. La seconde ligne ne contient que trois cellules, puisque la première cellule est une cellule groupée provenant de la première colonne. Le résultat étant le tableau donné en début d'article !
 
Remarquez que vous pouvez toujours utiliser les trois syntaxes pour une cellule :
  • un simple texte pour une cellule simple
  • un tableau de texte pour définir plusieurs cellules simples
  • un tableau contenant la clef 'data', définissant une cellule complexe
Ceci ne change donc pas de l'API classique pour un tableau.
Notation: 
Aucun vote pour le moment
Vous avez aimé: