Codifyo Docs

Thème

Configuration des Colonnes (CrudColumn) ​

Ce guide détaille la configuration des colonnes pour le composant <CrudPage>.

Types de colonnes supportés ​

Type (type)Rendu produit
'text' (défaut)Texte brut ou formaté.
'badge'Badge coloré Bootstrap 4 (auto-détecte la classe ou accepte { type: 'success', value: 'Actif' }).
'date'Date formatée au format local (dd/mm/Y).
'datetime'Date et heure formatées au format local (dd/mm/Y H:i).
'boolean'Affiche Oui (vrai) ou Non (faux).
'image'Image avec aperçu miniature (<img style="max-height: 40px;" />).
'link'Lien cliquable (externe ou interne) avec URL interpolée, texte dynamique et cible configurable.
'html'Rendu HTML (injection sécurisée avec conversion nl2br si activé).
'array'Liste ou badges alignés pour les propriétés contenant des tableaux.
'custom'Réservé pour une surcharge sur mesure via slot #cell-[key].

Options avancées des colonnes ​

typescript
export interface CrudColumn<T = Record<string, any>> {
  key: string;              // Clé de la propriété de l'item (ex: 'user.name' supporte les clés imbriquées)
  label: string;            // Intitulé de la colonne
  type?: 'text' | 'badge' | 'date' | 'datetime' | 'boolean' | 'custom' | 'image' | 'link' | 'array' | 'html' | 'actions';
  sortable?: boolean;       // Active le tri par clic sur l'en-tête
  defaultSort?: boolean | 'asc' | 'desc'; // Définit cette colonne comme triée par défaut (ex: 'desc')
  col?: number;             // Taille de grille Bootstrap col-md-{col} (1 à 12) pour les vues détaillées
  format?: (value: unknown, item: T) => string; // Fonction de formattage dynamique
  nl2br?: boolean;          // Convertit automatiquement \n en <br /> (échappement HTML sécurisé)
  
  // Options spécifiques aux colonnes de type 'link'
  linkUrl?: string;         // Template d'URL interpolé (ex: '/equipments/{equipment_id}?backUrl={currentUrl}')
  linkText?: string;        // Libellé fixe ou interpolé (ex: '{equipment.name}' ou 'Fiche #{id}')
  target?: '_self' | '_blank' | '_parent' | '_top' | string; // Cible du lien (défaut: '_blank')
  showExternalIcon?: boolean; // Affichage de l'icône fa-external-link-alt (défaut: true)
                              // Avec target '_blank', le texte masqué « (nouvel onglet) » est ajouté pour les lecteurs d'écran

  // Option spécifique aux colonnes de type 'image'
  imageAlt?: string;        // Texte alternatif interpolé (ex: 'Photo de {name}'). '' = image décorative. Défaut : label

  iframe?: boolean;         // Si type='html' et iframe=true: affiche le HTML dans une iframe isolée à hauteur auto
  
  // Options spécifiques aux colonnes de type 'array'
  itemKey?: string;         // Si le tableau contient des objets, clé à afficher (ex: 'name')
  itemType?: 'text' | 'badge' | 'link'; // Rendu des sous-éléments du tableau
  displayStyle?: 'inline' | 'list';     // Disposition: 'inline' (séparés par virgule) ou 'list' (puces <ul>)
}

1. Lien interne vers un autre CRUD avec backUrl ​

Pour créer un lien vers une autre entité en restant dans la même fenêtre et en transmettant la page actuelle comme URL de retour :

typescript
{
  key: 'equipment_id',
  label: 'Équipement',
  type: 'link',
  linkUrl: '/equipments/{equipment_id}?backUrl={currentUrl}',
  linkText: '{equipment_name}',
  target: '_self'
}

Variables d'URL disponibles pour l'interpolation de linkUrl :

  • {currentUrl} : URL relative actuelle avec query string (ex: /hearings?page=2&sort=date), encodée automatiquement via encodeURIComponent.
  • {currentPath} : Chemin relatif actuel sans query string (ex: /hearings).
  • {currentHref} : URL absolue complète (ex: https://mon-domaine.com/hearings?page=2).
  • N'importe quelle propriété de l'élément (ex: {id}, {equipment.name}, etc.).

Sécurité : le paramètre ?backUrl= lu dans l'URL par CrudPage n'est retenu que s'il pointe vers la même origine (chemin relatif ou URL http(s) du même domaine, résolu depuis la page courante). Toute autre valeur (javascript:, URL externe, //autre-domaine…) est ignorée et le lien « Retour » ferme simplement l'action. Pour un retour vers un autre domaine, passez la prop backUrl directement à <CrudPage> (valeur de confiance, non filtrée). Le helper sanitizeBackUrl() est exporté pour vos propres liens de retour.

2. Lien externe ouvrant dans un nouvel onglet ​

typescript
{
  key: 'website',
  label: 'Site Web',
  type: 'link',
  linkUrl: 'https://example.com/company/{company_id}',
  linkText: 'Visiter le site',
  target: '_blank' // Ouvre dans un nouvel onglet avec icône fa-external-link-alt et rel="noopener noreferrer"
}