Aller au contenu

Vue · RH

Annuaire des employés

Disponible

Liste filtrable des employés : recherche, filtres par département et statut, table dense avec avatar, badge de statut et pagination. Pour parcourir et qualifier l'effectif.

Rendu multi-framework

Annuaire des employés (données mock)

Employé
Département
Lieu
Statut
Isabelle FontaineIngénieure Senior
Ingénierie
Montréal
Actif
Marc TremblayChef de Produit
Produit
Québec
Actif
Amina ChoudhuryDesigner UX
Design
Toronto
Congé
Julien BergeronAnalyste Financier
Finance
Montréal
Actif
Sara OkonkwoDéveloppeuse Full-Stack
Ingénierie
Ottawa
Actif
Pierre GagnonPartenaire RH
RH
Laval
Inactif
Nadia KhalilResponsable Marketing
Marketing
Montréal
Actif
Page 1 sur 3
Voir le code (Svelte) 
<div class="ed-shell">
  <div class="ed-toolbar">
    <div class="ed-search">
      <Input label="Rechercher" placeholder="Nom, titre, lieu…" type="search" />
    </div>
    <Select
      label="Statut"
      value="all"
      options={[{"value":"all","label":"Tous"},{"value":"active","label":"Actif"},{"value":"leave","label":"Congé"},{"value":"inactive","label":"Inactif"}]}
    />
    <Combobox
      label="Département"
      placeholder="Tous les départements"
      options={[{"value":"Ingénierie","label":"Ingénierie"},{"value":"Produit","label":"Produit"},{"value":"Design","label":"Design"},{"value":"Finance","label":"Finance"},{"value":"RH","label":"RH"},{"value":"Marketing","label":"Marketing"}]}
    />
    <Button variant="primary" size="sm">Ajouter un employé</Button>
  </div>
  <div class="ed-table-head">
    <div class="ed-th">Employé</div>
    <div class="ed-th">Département</div>
    <div class="ed-th">Lieu</div>
    <div class="ed-th">Statut</div>
    <div class="ed-th"></div>
  </div>
  <div class="ed-table-body">
    <div class="ed-row">
      <div class="ed-cell ed-cell-name">
        <Avatar name="Isabelle Fontaine" size="sm" tone="category1" />
        <div class="ed-info">
          <span class="ed-name">Isabelle Fontaine</span>
          <span class="ed-title">Ingénieure Senior</span>
        </div>
      </div>
      <div class="ed-cell">Ingénierie</div>
      <div class="ed-cell">Montréal</div>
      <div class="ed-cell">
        <Badge tone="success">Actif</Badge>
      </div>
      <div class="ed-cell ed-cell-actions">
        <Button variant="ghost" size="sm">Profil</Button>
      </div>
    </div>
    <div class="ed-row">
      <div class="ed-cell ed-cell-name">
        <Avatar name="Marc Tremblay" size="sm" tone="category2" />
        <div class="ed-info">
          <span class="ed-name">Marc Tremblay</span>
          <span class="ed-title">Chef de Produit</span>
        </div>
      </div>
      <div class="ed-cell">Produit</div>
      <div class="ed-cell">Québec</div>
      <div class="ed-cell">
        <Badge tone="success">Actif</Badge>
      </div>
      <div class="ed-cell ed-cell-actions">
        <Button variant="ghost" size="sm">Profil</Button>
      </div>
    </div>
    <div class="ed-row">
      <div class="ed-cell ed-cell-name">
        <Avatar name="Amina Choudhury" size="sm" tone="category3" />
        <div class="ed-info">
          <span class="ed-name">Amina Choudhury</span>
          <span class="ed-title">Designer UX</span>
        </div>
      </div>
      <div class="ed-cell">Design</div>
      <div class="ed-cell">Toronto</div>
      <div class="ed-cell">
        <Badge tone="warning">Congé</Badge>
      </div>
      <div class="ed-cell ed-cell-actions">
        <Button variant="ghost" size="sm">Profil</Button>
      </div>
    </div>
    <div class="ed-row">
      <div class="ed-cell ed-cell-name">
        <Avatar name="Julien Bergeron" size="sm" tone="category4" />
        <div class="ed-info">
          <span class="ed-name">Julien Bergeron</span>
          <span class="ed-title">Analyste Financier</span>
        </div>
      </div>
      <div class="ed-cell">Finance</div>
      <div class="ed-cell">Montréal</div>
      <div class="ed-cell">
        <Badge tone="success">Actif</Badge>
      </div>
      <div class="ed-cell ed-cell-actions">
        <Button variant="ghost" size="sm">Profil</Button>
      </div>
    </div>
    <div class="ed-row">
      <div class="ed-cell ed-cell-name">
        <Avatar name="Sara Okonkwo" size="sm" tone="category5" />
        <div class="ed-info">
          <span class="ed-name">Sara Okonkwo</span>
          <span class="ed-title">Développeuse Full-Stack</span>
        </div>
      </div>
      <div class="ed-cell">Ingénierie</div>
      <div class="ed-cell">Ottawa</div>
      <div class="ed-cell">
        <Badge tone="success">Actif</Badge>
      </div>
      <div class="ed-cell ed-cell-actions">
        <Button variant="ghost" size="sm">Profil</Button>
      </div>
    </div>
    <div class="ed-row">
      <div class="ed-cell ed-cell-name">
        <Avatar name="Pierre Gagnon" size="sm" tone="category1" />
        <div class="ed-info">
          <span class="ed-name">Pierre Gagnon</span>
          <span class="ed-title">Partenaire RH</span>
        </div>
      </div>
      <div class="ed-cell">RH</div>
      <div class="ed-cell">Laval</div>
      <div class="ed-cell">
        <Badge tone="neutral">Inactif</Badge>
      </div>
      <div class="ed-cell ed-cell-actions">
        <Button variant="ghost" size="sm">Profil</Button>
      </div>
    </div>
    <div class="ed-row">
      <div class="ed-cell ed-cell-name">
        <Avatar name="Nadia Khalil" size="sm" tone="category2" />
        <div class="ed-info">
          <span class="ed-name">Nadia Khalil</span>
          <span class="ed-title">Responsable Marketing</span>
        </div>
      </div>
      <div class="ed-cell">Marketing</div>
      <div class="ed-cell">Montréal</div>
      <div class="ed-cell">
        <Badge tone="success">Actif</Badge>
      </div>
      <div class="ed-cell ed-cell-actions">
        <Button variant="ghost" size="sm">Profil</Button>
      </div>
    </div>
  </div>
  <div class="ed-pagination">
    <Button variant="ghost" size="sm" disabled>Précédent</Button>
    <span class="ed-page-info">Page 1 sur 3</span>
    <Button variant="ghost" size="sm">Suivant</Button>
  </div>
</div>

Composants DS utilisés