vue-csv-loader

Vue component to load CSV.

install

npm install vue-csv-loader

setup

main.js

import VueCsvLoader from "vue-csv-loader";
Vue.use(VueCsvLoader);

App.vue

template

<div id="app">
  <section>
    <csv-loader v-on:loadSuccess="loadSuccess"></csv-loader>
  </section>
 
  <section class="table-container">
    <table class="table is-bordered is-hoverable is-fullwidth">
      <thead>
        <tr v-for="(row, rowIndex) in csvHeader" v-bind:key="rowIndex">
          <td v-if="showCheckbox && rowIndex === 0">
            <input type="checkbox" />
          </td>
          <th v-for="(data, colIndex) in row" v-bind:key="colIndex">
            {{ data }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in csvBody" v-bind:key="rowIndex">
          <td v-if="showCheckbox">
            <input type="checkbox" @change="onCheckBoxCheck(row)" />
          </td>
          <td v-for="(data, colIndex) in row" v-bind:key="colIndex">
            {{ data }}
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</div>

script

import CsvLoader from "vue-csv-loader";
import "vue-csv-loader/dist/csv-loader.css";
 
export default {
  name: "app",
  components: {
    CsvLoader
  },
  data: function() {
    return {
      showCheckbox: true,
      csvHeader: [],
      csvBody: []
    };
  },
  methods: {
    loadSuccess: function(result) {
      this.csvHeader = result.csvHeader;
      this.csvBody = result.csvBody;
    },
    onCheckBoxCheck: function(row) {
      console.log(row);
    }
  }
};