Vue-pivot-table demo

by Owumaro

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/@click2buy/[email protected]/plugin-dist/vue-pivot-table.umd.min.js"></script>
<div id="app" class="container mt-5">
  <h2 class="border-bottom pb-2 mb-4">Pivot <small>(drag & drop UI + PivotTable)</small></h2>

  <div class="mb-5">
    <pivot
      :data="data"
      :fields="fields"
      :available-field-keys="availableFieldKeys"
      :row-field-keys="rowFieldKeys"
      :col-field-keys="colFieldKeys"
      :reducer="reducer"
      :default-show-settings="defaultShowSettings"
      :is-data-loading="isDataLoading">
      <template slot="value" slot-scope="{ value }">
        {{ value.toLocaleString() }}
      </template>
    </pivot>
  </div>

  <h2 class="border-bottom pb-2 mb-4">PivotTable <small>(standalone)</small></h2>

  <div class="mb-5">
    <pivot-table
      :data="asyncData"
      :row-fields="rowFields"
      :col-fields="colFields"
      :reducer="reducer"
      :default-show-settings="defaultShowSettings"
      :is-data-loading="isDataLoading">
      <template slot="value" slot-scope="{ value }">
        {{ value.toLocaleString() }}
      </template>
      <template slot="loading">
        <div class="text-center">
          Loading...
        </div>
      </template>
    </pivot-table>
  </div>
</div>

Vue

const data = [
  {"country": "United States", "year": 2010, "gender": "male", "count": 153295220},
  {"country": "United States", "year": 2010, "gender": "female", "count": 156588400},
  {"country": "United States", "year": 2011, "gender": "male", "count": 154591960},
  {"country": "United States", "year": 2011, "gender": "female", "count": 157800200},
  {"country": "United States", "year": 2012, "gender": "male", "count": 155851840},
  {"country": "United States", "year": 2012, "gender": "female", "count": 158944800},
  {"country": "China", "year": 2010, "gender": "male", "count": 690256342},
  {"country": "China", "year": 2010, "gender": "female", "count": 650712406},
  {"country": "China", "year": 2011, "gender": "male", "count": 694106441},
  {"country": "China", "year": 2011, "gender": "female", "count": 654068030},
  {"country": "China", "year": 2012, "gender": "male", "count": 697964288},
  {"country": "China", "year": 2012, "gender": "female", "count": 657422649},
  {"country": "India", "year": 2010, "gender": "male", "count": 638354751},
  {"country": "India", "year": 2010, "gender": "female", "count": 592629727},
  {"country": "India", "year": 2011, "gender": "male", "count": 646873890},
  {"country": "India", "year": 2011, "gender": "female", "count": 600572093},
  {"country": "India", "year": 2012, "gender": "male", "count": 655193693},
  {"country": "India", "year": 2012, "gender": "female", "count": 608395922},
  {"country": "France", "year": 2010, "gender": "male", "count": 30675773},
  {"country": "France", "year": 2010, "gender": "female", "count": 32285363},
  {"country": "France", "year": 2011, "gender": "male", "count": 30815839},
  {"country": "France", "year": 2011, "gender": "female", "count": 32452566},
  {"country": "France", "year": 2012, "gender": "male", "count": 30948916},
  {"country": "France", "year": 2012, "gender": "female", "count": 32612882}
]

Vue.use(vuePivotTable)

new Vue({
  el: "#app",
  data: () => {
    return {
     ...