Examples
Transformations Example
Transform data during import
import { CSVImporter } from '@importcsv/react';
import type { Column } from '@importcsv/react';
const columns: Column[] = [
{
id: 'name',
label: 'Name',
transformations: [
{ type: 'trim' },
{ type: 'capitalize' }
]
},
{
id: 'email',
label: 'Email',
type: 'email',
transformations: [
{ type: 'trim' },
{ type: 'lowercase' }
]
},
{
id: 'phone',
label: 'Phone',
transformations: [
{ type: 'normalize_phone' }
]
},
{
id: 'country_code',
label: 'Country',
transformations: [
{ type: 'uppercase' },
{ type: 'default', value: 'US' }
]
},
{
id: 'start_date',
label: 'Start Date',
type: 'date',
transformations: [
{ type: 'normalize_date', format: 'YYYY-MM-DD' }
]
},
{
id: 'product_sku',
label: 'SKU',
transformations: [
{ type: 'remove_special_chars' },
{ type: 'replace', find: ' ', replace: '-' },
{ type: 'uppercase' }
]
},
{
id: 'price',
label: 'Price',
type: 'number',
transformations: [
{
type: 'custom',
fn: (value) => {
// Remove $ and convert to number
return parseFloat(value.replace('$', ''));
}
}
]
}
];
export default function TransformationsExample() {
return (
<CSVImporter
columns={columns}
onComplete={(data) => {
console.log('Transformed data:', data);
}}
/>
);
}
Input CSV
Name,Email,Phone,Country,Start Date,SKU,Price
john doe ,JOHN@EXAMPLE.COM,(555) 123-4567,us,01/15/2024,PRD #123!,$99.99
JANE SMITH,Jane@Example.Com,555.987.6543,,2024-02-20,item 456,$149.50
Output After Transformations
{
"rows": [
{
"values": {
"name": "John Doe",
"email": "john@example.com",
"phone": "+15551234567",
"country_code": "US",
"start_date": "2024-01-15",
"product_sku": "PRD-123",
"price": 99.99
}
},
{
"values": {
"name": "Jane Smith",
"email": "jane@example.com",
"phone": "+15559876543",
"country_code": "US",
"start_date": "2024-02-20",
"product_sku": "ITEM-456",
"price": 149.50
}
}
]
}