vue-pivottable-live

by seungwoo321

HTML

<script src="https://unpkg.com/@vue-pivottable/plotly-renderer@1.0.0/dist/plotly-renderer.umd.js"></script>
<script src="https://unpkg.com/vue-pivottable@0.4.65/dist/vue-pivottable.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-pivottable@0.4.65/dist/vue-pivottable.css">
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <vue-pivottable-ui
    :data="pivotData"
    :aggregator-name="aggregatorName"
    :renderers="renderers"
    :renderer-name="rendererName"
    :rows="rows"
    :cols="cols"
    :vals="vals"
    :row-total="false"
    :col-total="true"
  >
  </vue-pivottable-ui>
</div>

JavaScript

Vue.use(VuePivottable.default)
new Vue({
  el: "#app",
  data: {
      pivotData: [
  ['Total Bill', 'Tip', 'Payer Gender', 'Payer Smoker', 'Day of Week', 'Meal', 'Party Size'],
  [16.99, 1.01, 'Female', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [10.34, 1.66, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 3],
  [21.01, 3.5, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 3],
  [23.68, 3.31, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [24.59, 3.61, 'Female', 'Non-Smoker', 'Sunday', 'Dinner', 4],
  [25.29, 4.71, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 4],
  [8.77, 2, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [26.88, 3.12, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 4],
  [15.04, 1.96, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [14.78, 3.23, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [10.27, 1.71, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [35.26, 5, 'Female', 'Non-Smoker', 'Sunday', 'Dinner', 4],
  [15.42, 1.57, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [18.43, 3, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 4],
  [14.83, 3.02, 'Female', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [21.58, 3.92, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [10.33, 1.67, 'Female', 'Non-Smoker', 'Sunday', 'Dinner', 3],
  [16.29, 3.71, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 3],
  [16.97, 3.5, 'Female', 'Non-Smoker', 'Sunday', 'Dinner', 3],
  [20.65, 3.35, 'Male', 'Non-Smoker', 'Saturday', 'Dinner', 3],
  [17.92, 4.08, 'Male', 'Non-Smoker', 'Saturday', 'Dinner', 2],
  [20.29, 2.75, 'Female', 'Non-Smoker', 'Saturday', 'Dinner', 2],
  [15.77, 2.23, 'Female', 'Non-Smoker', 'Saturday', 'Dinner', 2],
  [39.42, 7.58, 'Male', 'Non-Smoker', 'Saturday', 'Dinner', 4],
  [19.82, 3.18, 'Male', 'Non-Smoker', 'Saturday', 'Dinner', 2],
  [17.81, 2.34, 'Male', 'Non-Smoker', 'Saturday', 'Dinner', 4],
  [13.37, 2, 'Male', 'Non-Smoker', 'Saturday', 'Dinner', 2],
  [12.69, 2, 'Male', 'Non-Smoker', 'Saturday', 'Dinner', 2],
  [21.7, 4.3, 'Male', 'Non-Smoker', 'Saturday', 'Dinner', 2],
 ...