# vue-json-to-tsv

> A Vue.js 2 component to transform and download a json in tsv format

Latest version **1.0.1** (published 2022-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-json-to-tsv
pnpm add vue-json-to-tsv
yarn add vue-json-to-tsv
bun add vue-json-to-tsv
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-11-29 |
| First published | 2022-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Marco Chan |
| Maintainers | maruk0chan |
| Keywords | vue, json, tsv |

## Links

- npm: https://www.npmjs.com/package/vue-json-to-tsv
- Repository: https://github.com/maruk0chan/vue-json-to-tsv
- Homepage: https://github.com/maruk0chan/vue-json-to-tsv#readme
- Issues: https://github.com/maruk0chan/vue-json-to-tsv/issues
- npm.io page: https://npm.io/package/vue-json-to-tsv

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-11-29
- 1.0.0 — 2022-11-29

## README

# vue-json-to-tsv

A Vue.js 2 component to transform and download a json in tsv format [https://angeliquekom.github.io/vue-json-to-tsv.github.io/](https://angeliquekom.github.io/vue-json-to-tsv.github.io/)

## Installation

`npm install --save vue-json-to-tsv` or use `dist/vue-json-to-tsv.min.js`

## Demo

[Demo](https://angeliquekom.github.io/vue-json-to-tsv.github.io/)

## Usage

For vue-cli user:

```javascript
import VueJsonToTsv from 'vue-json-to-tsv';
```

For standalone usage:

```html
<script src="vue.min.js"></script>
<!-- must place this line after vue.js -->
<script src="dist/vue-json-to-tsv.min.js"></script>
<script type="text/javascript">
  Vue.use(VueJsonToTsv);
</script>
```

## Sample 1 (simple use)

Simple usage: will generate a default button. The tsv will include all the labels (name, surname) and the data

```html
<vue-json-to-tsv
  :json-data="[
    { name: 'Joe', surname: 'Roe' },
    { name: 'John', surname: 'Doe' }
  ]"
>
</vue-json-to-tsv>
```

#### Result tsv

tsv.tsv

| name | surname |
| ---- | ------- |
| Joe  | Roe     |
| John | Doe     |

## Sample 2 (filter labels)

Selected labels with custom tsv title: will generate a custom button as defined at the slot. The tsv will include only the "name" label with the "First name" title and the relevant data.

```html
<vue-json-to-tsv
  :json-data="[
    { name: 'Joe', surname: 'Roe' },
    { name: 'John', surname: 'Doe' }
  ]"
  :labels="{ name: { title: 'First name' } }"
  :tsv-title="My_CSV"
>
  <button>
    <b>My custom button</b>
  </button>
</vue-json-to-tsv>
```

#### Result tsv

My_CSV.tsv

| First name |
| ---------- |
| Joe        |
| John       |

## Sample 3 (handle success/error, custom button, configure labels)

Handle success/error with custom button, returns specific labels with custom title: use of custom methods on success or error.

```html
<vue-json-to-tsv
  :json-data="[
    { name: 'John', surname: 'Doe', age: 20, salary: 20.000, hours: 37.4 },
    { name: 'John', surname: 'Roe', age: 40, salary: 40.000, hours: 35.2 },
    { name: 'Jane', surname: 'Woe', age: 50, salary: 52.000, hours: 30.4 }
  ]"
  :labels="{
    name: { title: 'First name' },
    salary: { title: 'Annual salary' },
    hours: { title: 'Hours/week' }
  }"
  @success="val => handleSuccess(val)"
  @error="val => handleError(val)"
>
  <button>
    <b>My custom button</b>
  </button>
</vue-json-to-tsv>
```

## Configuration

| Prop            | Details                                                                                                                                                                                                                                                                                              |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| json-data       | Array of the objects which contain the data to display (required). Each key will be a different column at the tsv. All the objects should contain the same keys. If empty array an error will be returned. Example: <code>[ { name: 'Joe', surname: 'Roe' }, { name: 'Joe', surname: 'Doe' }]</code> |
| show-labels     | Boolean. If false the first row of the tsv will not contain the labels names.                                                                                                                                                                                                                        |
| labels          | An object of the keys of the labels will be displayed. Use to filter the keys to display and modify their label title. For each key we provide the title of the key to displayed. If not defined all the keys will be parsed. Example: <code>{ name: { title: 'First name' } }</code>                |
| tsv-title       | String. The title of the generated tsv. Default: 'tsv'                                                                                                                                                                                                                                               |
| separator       | String. The separator of the columns. Default: ' '                                                                                                                                                                                                                                                   |
| @update:error   | Will be triggered in case of an empty json array, if the labels object has not children or any parsing issue                                                                                                                                                                                         |
| @update:success | Will be triggered in case of a successful tsv creation                                                                                                                                                                                                                                               |

---
_Source: https://npm.io/package/vue-json-to-tsv · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._