Soenneker.Blazor.SheetMapper

A Blazor component and utility library for mapping CSV or tabular files to C# objects.

Leverage FilePond for uploads and TomSelect for interactive dropdowns. Automatically extract headers, map columns to your model, and retrieve a clean { property → column } map.

Demo

Features

• Header extraction from CSV or tab-delimited files
• Interactive mapping of columns to model properties
• Automatic heuristic mapping (case‑ and whitespace‑insensitive)
• Status icons for unmapped, duplicate, and mapped states
• Show/hide the status‑icon column on demand
• API to fetch the final mapping as Dictionary<string, string>

---

Installation

dotnet add package Soenneker.Blazor.SheetMapper

---

Setup

1. Register interop in your DI container (e.g., Program.cs):

   builder.Services.AddSheetMapperAsScoped();

2. Import namespace in your _Imports.razor or component:

   @using Soenneker.Blazor.SheetMapper

---

Basic Usage

@page "/import"
@inject ISheetMapperInterop SheetMapperInterop

<SheetMapper
    @ref="sheetMapper"
    TargetType="typeof(Employee)"
    AutomaticallyMap="true"
    ShowStatusIcons="true" />

<button class="btn btn-primary mt-3" @onclick="ShowMap">
    Get Mapping
</button>

@code {
    private SheetMapper? sheetMapper;

    private void ShowMap()
    {
        if (sheetMapper is not null)
        {
            var map = sheetMapper.GetCurrentMap();
            // map: property → CSV column
        }
    }
}

---

Component Parameters

Parameter	Type	Default	Description
TargetType	Type	—	Required. Model type whose writable properties are mapped.
AutomaticallyMap	bool	false	Run auto-mapping heuristic on file load.
ShowStatusIcons	bool	true	Toggle visibility of the status‑icon column.
NotMappedIcon	RenderFragment	⚠️	Icon/markup for unmapped state.
DuplicatedIcon	RenderFragment	🔁	Icon/markup for duplicate‑mapping state.
MappedIcon	RenderFragment	✅	Icon/markup for successful mapping.

---

Public API

• void AutoMap() Re-run the auto-mapping logic at any time.

• Dictionary<string, string> GetCurrentMap() Returns { property → selected column }. Unmapped properties return "".

---

Customization

Status Icons

Override the built-in emojis with your own markup (SVG, <i>, etc.):

<SheetMapper
    TargetType="typeof(Employee)"
    NotMappedIcon="@<i class='fas fa-exclamation-triangle'></i>"
    DuplicatedIcon="@<i class='fas fa-sync-alt'></i>"
    MappedIcon="@<i class='fas fa-check-circle'></i>"
/>

Show/Hide Icon Column

Use the ShowStatusIcons parameter to toggle the entire status‑icon column:

<!-- hides the icons -->
<SheetMapper TargetType="typeof(Employee)" ShowStatusIcons="false" />

---

Styling

• CSS classes for fine‑tuning:

  • .map-row — wrapper for each mapping row
  • .status-icon — container for the icon

Override or extend them to match your design system.