importOK

Reference

Props & Events

A list of all component properties that can be used to configure and customize the importOK wizard.

Props

title

Description Primary text to be displayed at the top of the wizard, across all steps.
Type string
Default Import

subtitles

Description Secondary text to be displayed at each wizard step.
Type string[]
Default 
[
'Upload your file to get started',
'Match source to target columns',
'Review validation errors and fix your data',
'Please do not close this window during the import process.',
]

fields

Description Fields to be mapped. Please refer to Fields for more details.
Type { [key: string]: ImportField; }
Default {}

transformers

Description Custom transformers. Please refer to Transformers for more details.
Type { [key: string]: (record: ImportRecord, key: string, ...args: string[]); }
Default {}

validators

Description Custom validators. Please refer to Validators for more details.
Type { [key: string]: (record: ImportRecord, key: string, ...args: string[]); }
Default {}

providers

Description Custom providers. Please refer to Data providers for more details.
Type { [key: string]: DataProvider; }
Default {}

mapper

Description Custom mapping strategy. Please refer to Mapping strategy for more details.
Type MapperStrategy
Default LevenshteinMappingStrategy

editorMode

Description

Controls how cell editing behaves in the table.

advanced enables spreadsheet-style editing. Users must first select a row before editing a cell. This mode supports keyboard navigation, such as arrow keys and Enter, making it ideal for power users.

basic enables direct click-to-edit behavior. Users can click a cell and edit immediately, without needing to select a row first. This mode disables keyboard navigation and provides a lightweight editing experience.
Type 'advanced' | 'basic'
Default 'advanced'

allowManualRecords

Description

Controls whether users can manually add new records in the editor step.

When enabled, a button appears in the toolbar of the third step (editor) allowing users to add new records in addition to their uploaded CSV file. The button is only enabled when all records are shown (no search or filtering applied).
Type boolean
Default false

style

Description Custom CSS rules. Please refer to Styling for more details.
Type string
Default undefined

locale

Description The locale to use. Please refer to Internalization for more details.
Type string
Default en

translations

Description Provide additional translations, or overwrite the existing ones. Please refer to Internalization for more details.
Type { [key: string]: { [key: string]: string } }

sampleFile

Description Example file that can be downloaded in the first step as an example. Can be either a URL string pointing to a downloadable file, or a File object for dynamically constructed sample files.
Type string | File
Default ''

uploadedFile

Description Raw file to be imported. Useful if your application already offers an upload area. Please refer to Upload Files for more details.
Type File
Default undefined

throttle

Description Throttle the import process - applicable when used with onRecordReady
Type number
Default 0 (no throttle)

meta

Description Meta data to be passed to onRecordReady and onImportReady.
Type object
Default {}

Events & Callbacks

onRecordReady

Angular [recordReady]

Description Callback to import a single record.
Type function(record: ImportRecord, meta: object): Promise<any>
Event props
  • record The record to be imported.
  • meta The meta object passed in the meta prop (if any), plus additional meta data from import include the file size and type.
Default undefined

onImportReady

Angular [importReady]

Description Callback to import multiple records at once.
Type function(records: ImportRecord[], meta: object): Promise<any>
Event props
  • records The records to be imported.
  • meta The meta object passed in the meta prop (if any), plus additional meta data from import include the file size and type.
Default undefined

onImportProgress

Angular (importProgress)

Description Triggered when the progress changes.
Event props
  • processed How many records processed so far, including failed.
  • failed How many records failed so far.
  • total Total number of records.

onStepEnter

Angular (stepEnter)

Description Triggered when the user enters a new step of the wizard.
Event props
  • step The index of the step the user is entering.
  • previousStep The index of the step the user is leaving.

onStepExit

Angular (stepExit)

Description Triggered when the user is about to exit the current step.
Event props
  • step The index of the step the user is exiting.
  • nextStep The index of the step the user previously exited.

Start typing to search documentation and articles...

⌘K or Ctrl+K to open search

No results found for ""

Try different keywords or check your spelling.

Use ↑ ↓ arrow keys to navigate and Enter to select