En-têtes de tableau

🌟 Introduction

Bienvenue dans la documentation du composant DsfrTableHeaders! Ce composant est comme le maestro d'un orchestre, orchestrant l'affichage des en-têtes de vos tableaux Vue avec élégance et précision. Allons-y pour découvrir ses caractéristiques.

🏅 La documentation sur le tableau sur le DSFR

La story sur les en-têtes de tableau sur le storybook de VueDsfr

🛠️ Props

Nom	Type	Défaut	Obligatoire	Description
headers	DsfrTableHeadersProps		✅	Un tableau d'objets ou de chaînes représentant les en-têtes du tableau.

Description des Types

• DsfrTableHeadersProps: Un tableau composé d'objets ou de chaînes. Un objet peut avoir une propriété text (chaîne) pour le texte de l'en-tête et headerAttrs (objet) pour les attributs HTML supplémentaires à appliquer sur l'en-tête.

🧩 Slots

Pas de slots spécifiques pour ce composant. Il s'agit principalement d'un composant utilitaire pour DsfrTable.

📝 Exemples

Exemple Basique

<DsfrTableHeaders :headers="['Nom', 'Age', 'Ville']" />

Exemple avec Attributs Supplémentaires

Démo

DsfrTableHeadersDemo.vue

<script setup lang="ts">
import DsfrTable from '../DsfrTable.vue'
import DsfrTableHeaders from '../DsfrTableHeaders.vue'
import type { DsfrTableRowProps } from '../DsfrTable.types'

const title = 'Exemple de tableau avec entêtes personnalisées'
const rows: DsfrTableRowProps[] = [
  { rowData: ['Alice', '30', 'Paris'] },
  { rowData: ['Bob', '24', 'Lyon'] },
]
</script>

<template>
  <DsfrTable
    :title="title"
    :rows="rows"
    class="w-full"
  >
    <template #header>
      <DsfrTableHeaders
        :headers="[
          { text: 'Nom', headerAttrs: { class: 'header-nom' } },
          { text: 'Age', headerAttrs: { class: 'header-age' } },
          'Ville',
        ]"
      />
    </template>
  </DsfrTable>
</template>

<style scoped>
:deep(.fr-table table) {
  table-layout: fixed;
}
</style>

Petit conseil

Utiliser des objets pour les en-têtes vous permet d'ajouter des classes CSS ou d'autres attributs pour personnaliser davantage vos en-têtes!

⚙️ Code source du composant

DsfrTableHeader.vue

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

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

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

export type { DsfrTableHeaderProps }

const props = withDefaults(defineProps<DsfrTableHeaderProps>(), {
  header: '',
  headerAttrs: () => ({}),
  icon: undefined,
})

const dsfrIcon = computed(() => {
  return props.icon && typeof props.icon === 'string' && props.icon.startsWith('fr-') ? props.icon : ''
})
const iconProps = computed(() => dsfrIcon.value ? undefined : typeof props.icon === 'string' ? { name: props.icon } : props.icon)
</script>

<template>
  <th
    v-bind="headerAttrs"
    scope="col"
  >
    {{ header }}
    <VIcon
      v-if="icon && !dsfrIcon"
      v-bind="iconProps"
    />
    <span
      v-if="dsfrIcon"
      :class="{ [String(icon)]: dsfrIcon }"
    />
  </th>
</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
}

Voilà, chers développeurs, prêts à rendre vos tableaux encore plus impressionnants avec DsfrTableHeaders ! 🌟