DsfrTable - clic sur une ligne

[laruiss]

@TaylorGit9 propose de pouvoir cliquer sur une ligne d'un tableau DsfrTable ici : #166

@plegaud a fait une proposition ici #167

J'en propose une autre, qui permettra aux utilisateurs de la bibliothèque de gérer eux-mêmes plus de choses sur les tableaux :

• exporter DsfrTableHeader pour que les utilisateurs puissent eux-mêmes créer les en-têtes des tableaux ;
• exporter DsfrTableRow pour que les utilisateurs puissent eux-même créer le corps du tableau et ajouter des événements sur chaque ligne ;
• changer l'API de DsfrTable (1) et de DsfrTableCell (2)

(1) DsfrTable pourra recevoir dans sa props rows un objet (actuellement il est attendu un tableau) avec des propriétés qui seront ajoutées à l'élément tr sauf la propriété cells qui sera un tableau dont les éléments seront au choix :

• une string : la cellule aura pour texte la valeur de cette string
• un objet :
  • si l'Objet contient une propriété component, la cellule contiendra ce composant avec les autres props
  • sinon, l'objet devra contenir une propriété text, la cellule aura pour contenu la valeur de cette propriété, et toutes les autres propriétés seront ajouté à l'élément td

Cette discussion a pour but de s'entendre avec nos premiers utilisateurs de la bibliothèque sur la meilleure API possible.

Qu'en pensez-vous ?

[gideruette]

Pourquoi ne pas se servir des slots de Vue3 ? Cela éviterait d'avoir à passer des component en paramètres. Un named slot pour le header, un pour les cellules du header, un pour le composant le ligne ou pour le composant de cellule.

Si l'on ajoute un concept intermédiaire qui relierait le nom de colonne au nom de la propriété de l'objet, ça permettrait de modifier plus facilement l'ordre des colonnes :

rows: [{name: "toto", age:10}, {name: "tata", age: 12}]
header: {name: "Nom", age: "Age"}
columns: ["name", "age"]

Avec ces trois propriétés on peut gérer l'ordre des colonnes facilement avec column, les libelles des headers avec header sans se préoccuper de l'ordre, et les données brutes sans se préoccuper ni de l'ordre ni du header. On ne modifie pas dans nos données brutes (contenues dans rows) pour s'adapter au composant (champs text)

type Table<D> = 
rows: D[]
header: Record<keyof D, string>
columns: (keyof D)[]

[laruiss]

C'est précisément les slots que j'ai utilisé, vous pouvez le voir ici :

https://deploy-preview-171--vue-dsfr.netlify.app/?path=/story/composants-tableau-cellule-de-tableau-dsfrtablecell--cellule-de-tableau-complexe

Pour l'autre idée, je pense que ce n'est pas le travail du composant de gérer cela. Ce n'est en tout cas pas prioritaire.

Nous pouvons facilement créer une fonction utilitaire réutilisable comme celle-ci :

function getTableData (rowsData, headerData, columns = Object.keys(headerData)) {
  const header = columns.map(key => headerData[key])
  const rows = rowsData.map(obj => columns.map(key => obj[key]))
  return {
    header,
    rows
  }
}

À utiliser comme ici : https://jsitor.com/oVa_ApDsl