BjTable

Tableau React : wrapper, props header et footer pour des nœuds au-dessus / sous le table ; bordered, striped, fixedLayout, caption.

Utilisation

import { BjTable } from '@flrxnt/dsbj/react'

export function Example() {
  return (
    <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>
  )
}

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>

striped

X	Y
a	b
c	d

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

fixedLayout

<BjTable fixedLayout bordered caption="…">
  <colgroup>
    <col style={{ width: '40%' }} />
    <col style={{ width: '60%' }} />
  </colgroup>
  …
</BjTable>

caption et no-caption

<BjTable bordered>
  <thead>…</thead>
  <tbody>…</tbody>
</BjTable>

header et footer

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

import { BjButton } from '@flrxnt/dsbj/react'
import { BjTable } from '@flrxnt/dsbj/react'

export function Example() {
  return (
    <BjTable
      caption="Liste"
      bordered
      header={
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <BjButton variant="secondary" size="sm">Exporter</BjButton>
        </div>
      }
      footer={<p className="bj-text-sm">Pagination</p>}
    >
      <thead>…</thead>
      <tbody>…</tbody>
    </BjTable>
  )
}

Combinaisons

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

<BjTable caption="…" bordered striped fixedLayout header={…} footer={…}>
  <thead>…</thead>
  <tbody>…</tbody>
</BjTable>

Children (thead, tbody…)

Enfants du table : colgroup, thead, tbody, etc.

Props

Prop	Description
`bordered`	Bordures cellules.
`striped`	Rayures sur le tbody.
`fixedLayout`	table-layout fixed.
`caption`	Légende ; sans caption, classe no-caption.
`header`	Nœud React dans bj-table__header.
`footer`	Nœud React dans bj-table__footer.
`children`	Enfants du table : colgroup, thead, tbody, etc.