BjTable

Tableau dans un wrapper défilant : légende optionnelle, modificateurs bordered, striped, fixedLayout, slots header et footer autour du table.

Utilisation

<script setup>
import { BjTable } from '@flrxnt/dsbj/vue'
<\/script>

<template>
  <BjTable caption="Liste des services" bordered striped>
    <thead>
      <tr>
        <th>Service</th>
        <th>Délai</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Carte d’identité</td>
        <td>15 jours</td>
      </tr>
      <tr>
        <td>Extrait de naissance</td>
        <td>48 h</td>
      </tr>
    </tbody>
  </BjTable>
</template>

Aperçu

Liste des services
Service	Délai
Carte d’identité	15 jours
Extrait de naissance	48 h

bordered

A	B
1	2

<BjTable bordered caption="…">…</BjTable>
<BjTable caption="…">Sans bordered</BjTable>

striped

X	Y
a	b
c	d

<BjTable striped caption="…">…</BjTable>

fixedLayout

<BjTable fixedLayout bordered caption="Colonnes à largeur fixe">
  <colgroup>
    <col style="width: 40%" />
    <col style="width: 60%" />
  </colgroup>
  …
</BjTable>

caption et no-caption

<BjTable bordered>
  <!-- Sans caption → bj-table--no-caption -->
  <thead>…</thead>
  <tbody>…</tbody>
</BjTable>

Slots header et footer

Liste des services
Service	Délai
Carte d’identité	15 jours

<BjTable caption="Liste" bordered>
  <template #header>
    <div style="display: flex; justify-content: flex-end; gap: var(--bj-spacing-2v)">
      <button type="button" class="bj-btn bj-btn--secondary bj-btn--sm">Exporter</button>
    </div>
  </template>
  <thead>…</thead>
  <tbody>…</tbody>
  <template #footer>
    <p class="bj-text-sm">Pagination ou méta</p>
  </template>
</BjTable>

Combinaisons

Liste des services
Service	Délai
Carte d’identité	15 jours
Extrait de naissance	48 h

<BjTable caption="…" bordered striped fixedLayout>
  <template #header>…</template>
  <thead>…</thead>
  <tbody>…</tbody>
  <template #footer>…</template>
</BjTable>

Props

Prop / slot	Description
`bordered`	Bordures sur les cellules.
`striped`	Rayures alternées sur le corps.
`fixedLayout`	table-layout: fixed sur le table.
`caption`	Texte de légende ; si absent, classe bj-table--no-caption.
`header (slot)`	Slot header : barre d’outils au-dessus du table.
`footer (slot)`	Slot footer : pagination ou actions sous le table.