Data Mapping

Data mapping is a crucial part of the CSV import process. ExpressCSV makes this step seamless for both developers and end-users.

Automatic Column Matching

ExpressCSV can automatically match columns from the CSV file to your data model using:

Header Matching - Match based on column headers
Content Analysis - Analyze column contents to determine data type
Fuzzy Matching - Use fuzzy string matching to handle variations in column names

Manual Column Mapping

When automatic matching isn't perfect, users can manually map columns:

Drag & Drop Interface - Users can drag columns to map them
Dropdown Selectors - Users can select mappings from dropdowns
Custom Column Creation - Users can create computed columns

Required and Optional Fields

You can specify which fields are required and which are optional:

const columns = [
  { name: 'email', label: 'Email', required: true },
  { name: 'firstName', label: 'First Name', required: true },
  { name: 'lastName', label: 'Last Name', required: true },
  { name: 'phone', label: 'Phone Number', required: false },
  { name: 'address', label: 'Address', required: false },
];

Data Transformation

ExpressCSV supports transforming data during the mapping process:

Value Formatting - Format values (e.g., phone numbers, dates)
Value Normalization - Normalize values to a standard format
Value Transformation - Transform values (e.g., lowercase, uppercase)

Example

Here's an example of setting up column mapping with transformations:

const importer = new ExpressCSV({
  element: '#csv-importer',
  columns: [
    { 
      name: 'email', 
      label: 'Email Address', 
      required: true,
      transform: value => value.toLowerCase(),
    },
    { 
      name: 'name', 
      label: 'Full Name', 
      required: true,
      // Custom matcher to match various name-related headers
      match: (header) => /name|full name|person/i.test(header),
    },
    { 
      name: 'birthdate', 
      label: 'Birth Date', 
      // Transform string dates to Date objects
      transform: value => new Date(value),
    }
  ]
});

Next Steps

After mapping columns, the next step is to validate the data. Learn more about Validation.

Documentation