Aller au contenu

Vue · Import / Données

Import / mappage de données

Disponible

Le flux d'import des outils BI (PowerBI, Qlik, Tableau) : Stepper (Source → Mappage → Revue → Import) + FileUploader + DataTable d'aperçu + Select de mappage colonne → champ + Alert de validation. Un seul NodeSpec → rendu identique en Svelte, React, Vue et Angular.

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é.

Import / mappage : flux CSV (données mock)

  1. Source Fichier
  2. 2 Mappage Colonnes → champs
  3. 3 Revue Aperçu
  4. 4 Import

1 · Source du fichier

  • contacts-2026.csv 180 KB

2 · Mappage des colonnes

company_name→
contact_email→
country_code→
annual_rev→

3 · Revue & validation

Aperçu des 4 premières lignes
Airbus Group[email protected]FR1240000
Safran SA[email protected]FR880000
Orange SA[email protected]FR650000
Atos SE:FR
Voir le code (Svelte) 
<div class="im-shell">
  <Stepper
    current={1}
    label="Import de données"
    steps={[{"label":"Source","description":"Fichier"},{"label":"Mappage","description":"Colonnes → champs"},{"label":"Revue","description":"Aperçu"},{"label":"Import"}]}
  />
  <div class="im-section">
    <h3 class="im-section-title">1 · Source du fichier</h3>
    <FileUploader
      label="Glisser-déposer un CSV ou cliquer pour importer"
      accept=".csv"
      items={[{"name":"contacts-2026.csv","size":184320,"file":{"name":"contacts-2026.csv","size":184320},"status":"complete"}]}
    />
  </div>
  <div class="im-section">
    <h3 class="im-section-title">2 · Mappage des colonnes</h3>
    <div class="im-map-grid">
      <div class="im-map-source">
        <code class="im-map-col">company_name</code>
        <span class="im-map-arrow">→</span>
      </div>
      <Select
        label="Champ cible"
        value="name"
        options={[{"value":"","label":": Ignorer :"},{"value":"name","label":"Nom du compte"},{"value":"email","label":"Email de contact"},{"value":"country","label":"Pays"},{"value":"revenue","label":"Chiffre d'affaires"}]}
      />
      <div class="im-map-source">
        <code class="im-map-col">contact_email</code>
        <span class="im-map-arrow">→</span>
      </div>
      <Select
        label="Champ cible"
        value="email"
        options={[{"value":"","label":": Ignorer :"},{"value":"name","label":"Nom du compte"},{"value":"email","label":"Email de contact"},{"value":"country","label":"Pays"},{"value":"revenue","label":"Chiffre d'affaires"}]}
      />
      <div class="im-map-source">
        <code class="im-map-col">country_code</code>
        <span class="im-map-arrow">→</span>
      </div>
      <Select
        label="Champ cible"
        value="country"
        options={[{"value":"","label":": Ignorer :"},{"value":"name","label":"Nom du compte"},{"value":"email","label":"Email de contact"},{"value":"country","label":"Pays"},{"value":"revenue","label":"Chiffre d'affaires"}]}
      />
      <div class="im-map-source">
        <code class="im-map-col">annual_rev</code>
        <span class="im-map-arrow">→</span>
      </div>
      <Select
        label="Champ cible"
        value="revenue"
        options={[{"value":"","label":": Ignorer :"},{"value":"name","label":"Nom du compte"},{"value":"email","label":"Email de contact"},{"value":"country","label":"Pays"},{"value":"revenue","label":"Chiffre d'affaires"}]}
      />
    </div>
  </div>
  <div class="im-section">
    <h3 class="im-section-title">3 · Revue & validation</h3>
    <Alert
      tone="warning"
      title="1 ligne à vérifier"
      message="La ligne « Atos SE » a un email manquant et un chiffre d'affaires vide. Elle sera importée avec des valeurs nulles."
    />
    <DataTable
      caption="Aperçu des 4 premières lignes"
      columns={[{"key":"c1","label":"company_name"},{"key":"c2","label":"contact_email"},{"key":"c3","label":"country_code"},{"key":"c4","label":"annual_rev"}]}
      rows={[{"id":"1","c1":"Airbus Group","c2":"[email protected]","c3":"FR","c4":"1240000"},{"id":"2","c1":"Safran SA","c2":"[email protected]","c3":"FR","c4":"880000"},{"id":"3","c1":"Orange SA","c2":"[email protected]","c3":"FR","c4":"650000"},{"id":"4","c1":"Atos SE","c2":":","c3":"FR","c4":""}]}
      size="sm"
    />
  </div>
  <div class="im-actions">
    <Button variant="secondary">Précédent</Button>
    <Button variant="primary">Lancer l'import</Button>
  </div>
</div>

Composants DS utilisés