diff --git a/README.md b/README.md index 8b7f1bd..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,14 +62,17 @@ 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 - [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 VueCsvMap). - [VueCsvSubmit](#VueCsvSubmit) - Used to POST the mapped CSV. - [VueCsvErrors](#VueCsvErrors) - Used to display errors. @@ -274,6 +279,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.