# UI Maker CSV Import

> Guide on importing CSV data into your UI Maker interfaces.

Source: https://docs.apimaker.dev/v1/extensions/ui_maker/csv_import.html

> **UI Maker is deprecated**
>
> UI Maker is kept for the projects which use it and will be removed in API Maker v4. New admin screens are better built with any frontend framework on top of the [generated APIs](https://docs.apimaker.dev/v1/docs/apis-all/overview.html).

👉 To enable support for CSV import, just add below config.

👉 Need to provide mapping for CSV columns and database columns in "fieldMappings".

```typescript
export interface IDBMasterConfig {
    operations: {
        importData: {
            enable: true,
            gridWidth: '2000px',
            fieldMappings: [{
                header: 'Name',  // 👈 UI grid header value.
                sourceField: 'NAME', // 👈 CSV Field header value
                targetField: 'name', // 👈 Database field path
                convertTargetFieldToType: EType.string,  // 👈 Convert to this type for database before saving.
                width: '300px',
            }, {
                header: 'Date of birth',
                sourceField: 'DOB',
                targetField: 'dateOfBirth',
                convertTargetFieldToType: EType.date,

                dateParseFormat: 'yyyy-MM-dd',
                width: '300px',

                // dateParseFormat: 'dd-MM-yyyy hh:mm:ss a',
                // dateTimeZone: 'Asia/Kolkata',

                // dateFormatUIDisplay: 'dd-MM-yyyy hh:mm:ss a',
                // dateTimeZoneUIDisplay: 'Asia/Kolkata', // 'America/Los_Angeles',
            }]
        },
    }
}
```

## Interface Documentation

```typescript

export interface IDBMasterImportData {
    enable: boolean;

    /** Default : pi pi-file-import */
    icon?: string;

    /** width of grid. */
    gridWidth?: string;

    fieldMappings: IDBMasterImportGridColumn[];

    /** By default it can use save API. */
    apiCallOverrides?: IDBMasterAPICallOverrides;
}

export interface IDBMasterImportGridColumn {
    header: string;

    /** CSV field map */
    sourceField: string;

    /** It will be database field, csv data will be stored into this field after conversion. */
    targetField: string;

    /** CSV data will be converted to this type. */
    convertTargetFieldToType: EType;

    /** Default: ISO date format, date-fns format, Dates from CSV will be parsed using this format. */
    dateParseFormat?: string;

    /** Dates will be converted into this timezone before sending to database query. */
    dateTimeZone?: string;

    /** Dates will be converted to this format to display in UI.<br/> */
    dateFormatUIDisplay?: string;

    /** Dates will be converted to this format to display in UI.<br/> */
    dateTimeZoneUIDisplay?: string;

    // calculated property
    filterType?: EDBMasterConfigFilterType;

    /** width of grid column */
    width?: string;
}
```