DsfrDataTable : paramètres du slot #cell

[CopperGiraffe]

Hello l’équipe vue-dsfr,

Est-ce que le paramètre cell du slot cell ne devrait pas donner accès à l’objet entier systématiquement ? (et s’appeler row dans ce cas)

Il n’est pas rare de vouloir faire des concaténations de différents champs de notre objet au sein d’une cellule.
Aussi il parait un peu étrange d’avoir, dans certains cas l’objet et dans d’autres l’attribut directement. Cela permettrait d’avoir un comportement plus prévisible et plus homogène.

Je sais qu’il est possible d’avoir l’objet en ayant un attribut key qui ne correspond pas à un champs de notre objet, mais cela provoque d’autres problèmes (voir #930 notamment)

Merci et bonne journée !

[laruiss]

Je ne suis pas sûr de bien comprendre, est-ce que vous voudriez bien rejoindre le Discord afin qu’on fasse une visio avec partage d’écran ?
cell comme son nom l’indique, a les données d’une cellule. row, qui n’est pas exposé (pour l’instant, en tout cas), contient les données de toutes les cellules de la ligne (row).

[CopperGiraffe]

J’ai fait une petite démo pour que ce soit plus clair :

Je mets aussi ce qu’il faut pour comprendre ici (il faut un compte pour codeSandbox, j’ai réalisé après coup)

const headers: DsfrDataTableProps['headersRow'] = [
  {
    key: 'identity',
    label: 'Identity',
  },
  {
    key: 'name',
    label: 'Name'
  },
  {
    key: 'email',
    label: 'Email',
  },
]

const rows = [
  { id: 2, name: 'Jane Doe', nickname: 'Janie', age: 35, email: 'jane.doe@gmail.com' },
  { id: 1, name: 'John Doe', nickname: 'Jojo', age: 28, email: 'john.doe@gmail.com' },
  { id: 3, name: 'James Bond', nickname: 'Jamie', age: 48, email: 'james.bond@mi6.gov.uk' },
  { id: 4, name: 'Jack Bolder', nickname: 'Jack', age: 52, email: 'jack.bolder@pm.me' },
]

    <DsfrDataTable
      :headers-row="headers"
      :rows="rows"
      row-key="id"
      [...]
    >
      <template #cell="{ colKey, cell }">
        <template v-if="colKey === 'identity'">
          <a :href="`/url/to/${cell.id}`">{{ cell.nickname }} ({{ cell.age }})</a>
        </template>
        <template v-else>
          {{ cell }}
        </template>
      </template>
    </DsfrDataTable>

Ma colonne identity ne correspond pas à un attribut de mon objet, du coup dans le slot #cell le mot clé cell correspond en réalité à la ligne plutôt qu’à la cellule. Cela n’arrive que dans ce cas, autrement le mot clé cell du slot reflète bien la cellule uniquement.

Ma question est donc relative au nom de l’attribut cell du slot lorsque la key d’une colonne n’existe pas comme attribut de l’objet, est-il pertinent ? Est-ce qu’avoir systématiquement accès au row plutôt qu’à la cell uniquement ne serait pas plus homogène et plus pratique ?

Ça reviendrait à changer cette ligne https://github.com/dnum-mi/vue-dsfr/blob/develop/src/components/DsfrDataTable/DsfrDataTable.vue#L117 de façon à toujours renvoyer row