Cellule de tableau - DsfrTableCell

🌟 Introduction

DsfrTableCell, c'est la cellule magique de vos tableaux Vue ! Ce composant flexible gère l'affichage de chaque cellule, avec la possibilité d'inclure du texte, des composants personnalisés, et plus encore. Découvrons ensemble comment l'utiliser au mieux.

🏅 La documentation sur le tableau sur le DSFR

La story sur la cellule de tableau sur le storybook de VueDsfr

🛠️ Props

Nom	Type	Défaut	Obligatoire	Description
field	string | Object		✅	Les données de la cellule. Peut être une chaîne ou un objet pour des options avancées.
cellAttrs	Object	{}		Les attributs HTML supplémentaires pour l'élément <td>.

Conseil de pro

Utilisez la propriété component pour insérer des composants Vue personnalisés dans vos cellules, ajoutant une touche unique à votre tableau !

📝 Exemples

Exemple de Texte Simple

<template>
  <DsfrTable
    title="Titre du tableau"
  >
    <template #header>
      <DsfrTableHeaders :headers="headers" />
    </template>
    <tr>
      <DsfrTableCell field="texte simple" />
    </tr>
  </DsfrTable>
</template>

Exemple avec élément HTML et attributs de cellule (cell)

<template>
  <DsfrTable
    title="Titre du tableau"
  >
    <template #header>
      <DsfrTableHeaders :headers="headers" />
    </template>
    <tr>
      <DsfrTableCell
        :field="{
          component: 'a',
          text: 'Vers la page d\'accueil',
          href: '/',
          'aria-label': 'Vers la page d’accueil',
        }"
        :cell-attrs="{ class: 'text-bold', style: 'color: blue;' }"
      />
    </tr>
  </DsfrTable>
</template>

Exemple avec composant personnalisé

Démo

DsfrTableCellDemo.vue

<script lang="ts" setup>
import { getCurrentInstance } from 'vue'

import DsfrTag from '../../DsfrTag/DsfrTag.vue'
import DsfrTable from '../DsfrTable.vue'
import DsfrTableCell from '../DsfrTableCell.vue'
import DsfrTableHeaders from '../DsfrTableHeaders.vue'

getCurrentInstance()?.appContext.app.component('DsfrTag', DsfrTag)

const headers = ['Nom', 'Prénom', 'Email', 'Statut']

const fieldWithComponent = {
  component: 'DsfrTag',
  label: 'Succès',
  class: 'success',
}
</script>

<template>
  <DsfrTable
    title="Tableau avec une cellule personnalisée"
  >
    <template #header>
      <DsfrTableHeaders :headers="headers" />
    </template>
    <tr>
      <DsfrTableCell field="Le nom" />
      <DsfrTableCell field="Le prénom" />
      <DsfrTableCell field="l’adresse email" />
      <DsfrTableCell :field="fieldWithComponent" />
    </tr>
  </DsfrTable>
</template>

<style scoped>
:deep(.success) {
  color: var(--success-425-625);
  background-color: var(--success-950-100);
}
</style>

⚙️ Code source du composant

DsfrTableCell.vue

<script lang="ts" setup>
import { computed } from 'vue'

import type { DsfrTableCellProps } from './DsfrTable.types'

export type { DsfrTableCellProps }

const props = withDefaults(defineProps<DsfrTableCellProps>(), {
  cellAttrs: () => ({}),
})

const component = computed(() => {
  return (typeof props.field === 'object' && props.field !== null && props.field.component) ? props.field.component : false
})
const isPrimitive = computed(() => {
  return ['string', 'number', 'boolean'].includes(typeof props.field)
})
</script>

<template>
  <td v-bind="cellAttrs">
    <component
      :is="component"
      v-if="component"
      v-bind="typeof field === 'object' ? field : {}"
    >
      {{ (field as Record<string, any>).text }}
    </component>
    <template v-else>
      {{ isPrimitive ? field : (field as Record<string, any>).text }}
    </template>
  </td>
</template>

DsfrTable.types.ts

import type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'vue'

import type VIcon from '../VIcon/VIcon.vue'

export type DsfrTableRowProps = {
  rowData?: (string | Record<string, any>)[]
  rowAttrs?: HTMLAttributes
}

export type DsfrTableHeaderProps = {
  header?: string
  headerAttrs?: ThHTMLAttributes & { onClick?: (e: MouseEvent) => void }
  icon?: string | InstanceType<typeof VIcon>['$props']
}

export type DsfrTableHeadersProps = (string | (DsfrTableHeaderProps & { text?: string }))[]

export type DsfrTableCellProps = {
  field: string | Record<string, unknown>
  cellAttrs?: TdHTMLAttributes
  component?: string
  text?: string
  title?: string
  class?: string
  onClick?: Promise<void>
}

export type DsfrTableProps = {
  title: string
  headers?: DsfrTableHeadersProps
  rows?: (DsfrTableRowProps | (DsfrTableCellProps | { component: string, [k: string]: unknown } | string)[])[]

  rowKey?: ((row: (string | Record<string, any>)[] | undefined) => string | number | symbol | undefined) | string
  noCaption?: boolean
  pagination?: boolean
  currentPage?: number
  resultsDisplayed?: number
}

Avec DsfrTableCell, chaque cellule de votre tableau est une toile vierge prête à être personnalisée. Amusez-vous bien à coder ! 🎨