Skip to content

Update Documentation #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Update Documentation #83

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ef56dd
Instructions on how to use vue-csv-table-map
James-Burgess Nov 26, 2021
ea5129c
add link to demo repl
James-Burgess Nov 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 56 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

---

Expand Down Expand Up @@ -42,6 +43,7 @@ createApp(App)
.use(VueCsvImportPlugin)
.mount("#app");
```
## Useage

A minimal working example with all components will look something like this:

Expand All @@ -60,14 +62,17 @@ A minimal working example with all components will look something like this:
</template>
```

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.

Expand Down Expand Up @@ -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

<template>
<vue-csv-import>
...
<vue-csv-table-map></vue-csv-table-map>
...
</vue-csv-import>
</template>
```

Or use slot for custom markup:

```vue

<template>
<vue-csv-import>
...
<vue-csv-table-map v-slot="{sample, map, fields}">
...
</vue-csv-table-map>
...
</vue-csv-import>
</template>
```

#### 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.
Expand Down