CsvField

MappingResult Type

The onMappingComplete callback receives an object with the following structure:

Features

• Automatic delimiter detection: Supports both comma (,) and semicolon (;) delimiters
• Smart column mapping: Automatically matches CSV columns to required fields (case-insensitive)
• Data preview: Shows a preview of mapped data before confirmation
• Integrated table preview: Displays imported data in a sortable, paginated table with column mapping summary
• Validation: Ensures all required columns are mapped before proceeding
• Error handling: Clear error messages for invalid files or parsing issues
• Flexible styling: Supports all Button variants and sizes
• Clear functionality: Easy reset button to clear imported data

Preview Table

After confirming the column mapping, the component automatically displays:

• Total record count
• Visual summary of column mappings using chips
• Sortable table with pagination
• Clear button to reset the import

Expected CSV Format

The CSV file should have headers in the first row. Example:

Import Process

1. User clicks the button to select a CSV file
2. Component parses the file and extracts column headers
3. A modal opens showing required columns and available CSV columns
4. Automatic matching is attempted (case-insensitive)
5. User can manually map any unmatched columns
6. Data preview is shown for each mapped column
7. Upon confirmation, data is transformed and returned via callback
8. If showPreview is enabled, a sortable table displays the imported data with:
   • Total record count
   • Column mapping summary using chips
   • Pagination and sorting capabilities
   • Clear button to reset the import

Customization Tips

• Button appearance: Use variant, size, and isSolid props to match your design
• Button text: Customize buttonText for different contexts ("Import Users", "Load Data", etc.)
• Preview control: Set showPreview=false if you want to build your own preview UI
• Table pagination: Adjust previewPageSize based on your expected data volume