AMSOM TABLE

Ce package regroupe les composants tableaux d'AMSOM Habitat

Il regroupe les packages :

• AmsomTableDraggable voir la documentation ici

Nouvelles fonctionnalités

Formatage des données (v4.5.x)

Le composant AmsomTableDraggable supporte maintenant le formatage automatique et personnalisé des valeurs :

Formatter personnalisé

Définissez une fonction de formatage pour chaque colonne :

const columns = [
  {
    id: 'price',
    libelle: 'Prix',
    show: true,
    formatter: (value, item) => {
      // Formater le prix en euros
      return value ? `${value.toFixed(2)} €` : '-'
    }
  },
  {
    id: 'fullName',
    libelle: 'Nom complet',
    show: true,
    formatter: (value, item) => {
      // Combiner plusieurs champs
      return `${item.firstName} ${item.lastName}`.toUpperCase()
    }
  }
]

Paramètres du formatter :

• value : La valeur brute de la cellule (item[columnId])
• item : L'objet complet de la ligne (pour accéder à d'autres propriétés)

Type de données prédéfini

Utilisez type pour appliquer automatiquement un formatage standard :

const columns = [
  {
    id: 'createdAt',
    libelle: 'Date de création',
    show: true,
    type: 'unixDate' // Formate timestamp Unix en DD/MM/YYYY
  },
  {
    id: 'lastUpdate',
    libelle: 'Dernière modification',
    show: true,
    type: 'unixDateTime' // Formate en DD/MM/YYYY HH:mm
  },
  {
    id: 'amount',
    libelle: 'Montant',
    show: true,
    type: 'currency' // Formate en euros (1234.56 → 1 234,56 €)
  }
]

Types disponibles :

• unixDate : Timestamp Unix → format date (DD/MM/YYYY)
• unixDateTime : Timestamp Unix → format date et heure (DD/MM/YYYY HH:mm)
• currency : Nombre → format devise euro (1 234,56 €)

Ordre de priorité : Si formatter et type sont définis, formatter est prioritaire.

Utilisation automatique : Le formatage s'applique automatiquement à :

• ✅ Affichage : Rendu dans le template par défaut
• ✅ Recherche : Filtrage sur la valeur formatée (sauf si customSearch défini)
• ✅ Tri : Classement basé sur la valeur formatée (sauf si customSort défini)

Performance & DRY : En utilisant formatter, vous évitez de dupliquer la logique dans customSort et customSearch.

Custom Search (v4.4.x)

Le composant AmsomTableDraggable supporte maintenant les fonctions de recherche personnalisées par colonne :

• Recherche flexible : Définissez votre propre logique de filtrage par colonne
• Cas d'usage : Filtrer par libellé quand la colonne affiche un ID
• Compatible avec recherche standard : Le customSearch complète la recherche par défaut

<amsom-table-draggable :default-columns="columns" :td-items-list="data" :search="searchTerm">
  <!-- vos templates -->
</amsom-table-draggable>

Exemple de configuration :

const columns = [
  {
    id: 'userId',
    libelle: 'Utilisateur',
    show: true,
    customSearch: (item, searchTerm) => {
      // Filtrer par le libellé de l'utilisateur au lieu de l'ID
      return normalize(item.userLibelle).includes(normalize(searchTerm))
    }
  }
]

Menu contextuel (v4.3.x)

Le composant AmsomTableDraggable supporte maintenant les menus contextuels :

• Clic droit sur ligne : Détecte l'item et la colonne cliquée
• Gestion des bordures : Fonctionne même sur les bordures des cellules
• Support colonnes sticky : Compatible avec les colonnes fixes
• Event personnalisé : @contextmenu avec données complètes

<amsom-table-draggable
  @contextmenu="handleRightClick"
  :default-columns="columns"
  :td-items-list="data"
>
  <!-- vos templates -->
</amsom-table-draggable>

Installation

npm i @amsom-habitat/amsom-table

Importer les css dans le main.js tel que :

import '@amsom-habitat/amsom-table/dist/style.css'

Développment

Après avoir fait vos dev, veillez à bien tenir à jour le changelog.md ainsi que la version du package.json puis faites :

git add .
git commit -m '<commentaire'
git push origin <branch>

Tests

Les tests sont réalisé de manière automatique sur les branches main et dev mais peuvent être fait localement, notemment pour voir l'evolution du développement via la commande :

npm run storybook

Le valideur devra, si des changements sont observés, aller sur la pipeline pour valider les différences à l'aide de chromatic, sans cela aucun merge-request ne sera possible. Si un merge est effectué, une double verification sera necessaire.

Déploiement

Après avoir merge les dev sur la branche main, exécutez :

make publish

Cette commande vérifie la version, le changelog et publie le tout