Examples
Transfer List
An interactive transfer list for CSV headers using VueAirport.
An interactive transfer list example that lets you move CSV headers between panels and reorganize fields.
Valeur d'origine
John Doe
Pipeline
John Doe
Transformation
Résultat
John Doe
Project Structure
transfer-list/
├── index.ts # Types, injection key, exports
├── fixtures.ts # Mocked CSV data
├── useCsv.ts # CSV utilities
├── useTransferList.ts # Handles the check-in of headers and data and the transfer logic
├── TransferList.vue # Main sortable transfer list component
├── Transferable.vue # Transferable item component
Usage
- View available headers from the mocked CSV
- Transfer headers to the right panel using the item's button
- Retrieve headers back to the left panel if needed
- Download the transferred data as a CSV file
Example CSV
name,age,city
John Doe,32,Paris
Jane Smith,28,Lyon
Alice Cooper,40,Bordeaux
Result
After transferring headers, the data is displayed and can be downloaded as a CSV file.