Soenneker.Blazor.SheetMapper 4.0.339

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

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:

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