Aller au contenu

Vue · Patron de liste

Liste rapport

Disponible

Patron de toutes les listes métier (factures, articles, tickets…). Header + navigation latérale + barre de recherche + barre de filtres (FilterPill) + table paginée triable + menu d'actions par ligne. Un seul NodeSpec → rendu identique en Svelte, React, Vue et Angular. Débloque 20+ écrans liste de gestion par simple échange de colonnes/données.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular. Le rendu et le code copié reflètent le framework sélectionné.

Liste rapport : factures (données mock)

Sent Tech ERP

Factures

Statut Payée, En attente Date 2026-05-01 Montant 5 000 €
Liste des factures : mai/juin 2026
INV/2026/0142Airbus Group2026-06-012026-07-0142 300 €Payée
INV/2026/0141Safran SA2026-05-292026-06-2831 800 €Payée
INV/2026/0140Orange SA2026-05-272026-06-2618 500 €En attente
INV/2026/0139Société Générale2026-05-242026-06-2314 200 €Payée
INV/2026/0138Thales Group2026-05-202026-06-0411 000 €En retard
1–5 of 8
Actions sur une ligne :
Voir le code (Svelte) 
<div class="lr-shell">
  <Header
    title="Sent Tech ERP"
    navItems={[{"label":"Tableau de bord","href":"#"},{"label":"Factures","href":"#","active":true},{"label":"Devis","href":"#"},{"label":"Clients","href":"#"},{"label":"Produits","href":"#"},{"label":"Rapports","href":"#"}]}
    account={{"name":"Fabien Antoine","email":"[email protected]"}}
  />
  <div class="lr-body">
    <aside class="lr-aside">
      <SideNav items={[{"label":"Tableau de bord","href":"#"},{"label":"Factures","href":"#","active":true},{"label":"Devis","href":"#"},{"label":"Clients","href":"#"},{"label":"Produits","href":"#"},{"label":"Rapports","href":"#"}]} />
    </aside>
    <main class="lr-main">
      <div class="lr-titlebar">
        <h2 class="lr-title">Factures</h2>
        <div class="lr-titlebar-actions">
          <Button variant="secondary" size="sm">Exporter</Button>
          <Button variant="primary" size="sm">Nouvelle facture</Button>
        </div>
      </div>
      <div class="lr-toolbar">
        <div class="lr-search">
          <Search
            label="Rechercher des factures"
            placeholder="Rechercher par référence ou client…"
          />
        </div>
        <FilterBar label="Filtres actifs">
          <FilterPill
            field="Statut"
            operator="in"
            value="Payée, En attente"
            active
            removable
          />
          <FilterPill
            field="Date"
            operator=">="
            value="2026-05-01"
            active
            removable
          />
          <FilterPill
            field="Montant"
            operator=">"
            value="5 000 €"
            active
            removable
          />
        </FilterBar>
      </div>
      <div class="lr-table">
        <DataTable
          caption="Liste des factures : mai/juin 2026"
          columns={[{"key":"ref","label":"Référence","sortable":true},{"key":"client","label":"Client","sortable":true},{"key":"date","label":"Date","sortable":true},{"key":"echeance","label":"Échéance","sortable":true},{"key":"montant","label":"Montant","sortable":true,"align":"end"},{"key":"statut","label":"Statut","sortable":true}]}
          rows={[{"id":"1","ref":"INV/2026/0142","client":"Airbus Group","date":"2026-06-01","echeance":"2026-07-01","montant":"42 300 €","statut":"Payée"},{"id":"2","ref":"INV/2026/0141","client":"Safran SA","date":"2026-05-29","echeance":"2026-06-28","montant":"31 800 €","statut":"Payée"},{"id":"3","ref":"INV/2026/0140","client":"Orange SA","date":"2026-05-27","echeance":"2026-06-26","montant":"18 500 €","statut":"En attente"},{"id":"4","ref":"INV/2026/0139","client":"Société Générale","date":"2026-05-24","echeance":"2026-06-23","montant":"14 200 €","statut":"Payée"},{"id":"5","ref":"INV/2026/0138","client":"Thales Group","date":"2026-05-20","echeance":"2026-06-04","montant":"11 000 €","statut":"En retard"},{"id":"6","ref":"INV/2026/0137","client":"Capgemini","date":"2026-05-18","echeance":"2026-06-17","montant":"9 750 €","statut":"Brouillon"},{"id":"7","ref":"INV/2026/0136","client":"Dassault Systèmes","date":"2026-05-15","echeance":"2026-06-14","montant":"8 200 €","statut":"Payée"},{"id":"8","ref":"INV/2026/0135","client":"Atos SE","date":"2026-05-12","echeance":"2026-05-27","montant":"6 480 €","statut":"En retard"}]}
          sortable
          pageSize={5}
          size="sm"
        />
      </div>
      <div class="lr-rowmenu">
        <span class="lr-rowmenu-label">Actions sur une ligne :</span>
        <OverflowMenu
          label="⋮"
          items={[{"id":"view","label":"Ouvrir"},{"id":"edit","label":"Modifier"},{"id":"send","label":"Envoyer"},{"id":"delete","label":"Supprimer"}]}
        />
      </div>
    </main>
  </div>
</div>

Composants DS utilisés