From 6ef56dddd48b7489a47c751ecbc0432620c84b59 Mon Sep 17 00:00:00 2001 From: jimmy b Date: Fri, 26 Nov 2021 10:01:06 +0200 Subject: [PATCH 1/2] Instructions on how to use vue-csv-table-map --- README.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 51 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8b7f1bd..d2f5182 100755 --- a/README.md +++ b/README.md @@ -66,8 +66,9 @@ A minimal working example with all components will look something like this: - [VueCsvImport](#VueCsvImport) - The primary component wrapper. All other components should be used within this component. - [VueCsvToggleHeaders](#VueCsvToggleHeaders) - Toggles whether CSV should be read as having headers or not. -- [VueCsvInput](#VueCsvInput) - The file input field to upload your CSV -- [VueCsvMap](#VueCsvMap) - Used to map CSV columns to your fields +- [VueCsvInput](#VueCsvInput) - The file input field to upload your CSV. +- [VueCsvMap](#VueCsvMap) - Used to map CSV columns to your fields. +- [VueCsvTableMap](#VueCsvTableMap) - Used to your fields to the CSV coulmns (inverse of above). - [VueCsvSubmit](#VueCsvSubmit) - Used to POST the mapped CSV. - [VueCsvErrors](#VueCsvErrors) - Used to display errors. @@ -274,6 +275,54 @@ Or use slot for custom markup: --- +### VueCsvTableMap + +A drop in replacement for VueCsvMap to map the specifeid fields to the CSV. [inverse] + +```vue + + +``` + +Or use slot for custom markup: + +```vue + + +``` + +#### Props: + +| Prop | Default | Description | +| ------ | ------- | ----------- | +| tableAttributes | {} | (optional) Attributes to bind to the table. | +| autoMatch | true | (optional) Auto-match fields to columns when they share the same name | +| autoMatchIgnoreCase | true | (optional) Ignore case when auto-matching | + +#### Slot Props: + +| Prop | Description | +| ------ | ----------- | +| sample | The first row of the CSV. | +| map | The currently mapped fields. | +| fields | The fields. | + +--- + ### VueCsvSubmit Displays a button to post the CSV to specified URL. From ea5129cfc9089c427a8dc8e4313859c93c099307 Mon Sep 17 00:00:00 2001 From: jimmy b Date: Mon, 29 Nov 2021 08:40:50 +0200 Subject: [PATCH 2/2] add link to demo repl --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d2f5182..7a58348 100755 --- a/README.md +++ b/README.md @@ -9,7 +9,8 @@ This version is for Vue 3. [Click here for Vue 2](https://github.com/jgile/vue-c VueCsvImport is completely un-styled and customizable. All markup can be replaced and all text can be customized. -[Demo](https://jgile.github.io/vue-csv-import/) +[Simple demo](https://jgile.github.io/vue-csv-import/) +[Styled demo](https://replit.com/@JimmyBurgess/Vue-csv-import-demo) --- @@ -42,6 +43,7 @@ createApp(App) .use(VueCsvImportPlugin) .mount("#app"); ``` +## Useage A minimal working example with all components will look something like this: @@ -60,6 +62,8 @@ A minimal working example with all components will look something like this: ``` +The only required prop is `fields` which denotes the field names you want to map the csv headers to. +Once all required fields have been mapped to their respective columns, the v-model will be populated with a JSON representation of the mapped data. --- ## Components @@ -68,7 +72,7 @@ A minimal working example with all components will look something like this: - [VueCsvToggleHeaders](#VueCsvToggleHeaders) - Toggles whether CSV should be read as having headers or not. - [VueCsvInput](#VueCsvInput) - The file input field to upload your CSV. - [VueCsvMap](#VueCsvMap) - Used to map CSV columns to your fields. -- [VueCsvTableMap](#VueCsvTableMap) - Used to your fields to the CSV coulmns (inverse of above). +- [VueCsvTableMap](#VueCsvTableMap) - Used to your fields to the CSV coulmns (inverse of VueCsvMap). - [VueCsvSubmit](#VueCsvSubmit) - Used to POST the mapped CSV. - [VueCsvErrors](#VueCsvErrors) - Used to display errors.