Slot

Options for customizing vue-pivottable-ui.

WARNING

Both slot and scoped slots are supported, but the use of the v-slot directive is recommended.

rendererCell

If you want to replace the selection UI that selects the renderer, use the rendererCell slot.

<template>
  <vue-pivottable-ui
    :data="[
      { color: 'blue', shape: 'circle' },
      { color: 'red', shape: 'triangle' },
    ]"
    :rows="['color']"
    :cols="['shape']"
  >
    <template v-slot:rendererCell>
      <i class="fas fa-table" style="margin-right: 0.25rem"></i>Table2
    </template>
  </vue-pivottable-ui>
</template>

<script>
import { VuePivottableUi } from "vue-pivottable";
import "vue-pivottable/dist/vue-pivottable.css";
export default {
  components: {
    VuePivottableUi,
  },
};
</script>

aggregatorCell

If you want to replace the select UI that selects the aggregator you can use it.

<template>
  <vue-pivottable-ui
    :data="[
      { color: 'blue', shape: 'circle' },
      { color: 'red', shape: 'triangle' },
    ]"
    :rows="['color']"
    :cols="['shape']"
  >
    <template v-slot:aggregatorCell>
      <i class="fas fa-calculator" style="margin-right: 0.25rem"></i>Count
    </template>
  </vue-pivottable-ui>
</template>

<script>
import { VuePivottableUi } from "vue-pivottable";
import "vue-pivottable/dist/vue-pivottable.css";
export default {
  components: {
    VuePivottableUi,
  },
};
</script>

colGroup

You can use this slot if you want the width of td.pvtAxisContainer to be fixed, or if you want not the drag field to overflow td.pvtAxisContainer .

TIP

td.pvtAxisContainer has overflow-x:auto; property.

<template>
  <div>
    <vue-pivottable-ui
      :data="[
        { color: 'blue', shapeeeeeeeeeeeeeeee: 'circle' },
        { color: 'red', shapeeeeeeeeeeeeeeee: 'triangle' },
      ]"
      :rows="['color', 'shapeeeeeeeeeeeeeeee']"
      :cols="[]"
    >
      <template v-slot:rendererCell>Table</template>
      <template v-slot:aggregatorCell>Count</template>
      <template v-slot:colGroup>
        <colGroup :width="colGroupFirstWidth"></colGroup>
        <colGroup></colGroup>
      </template>
    </vue-pivottable-ui>
    <div class="m-1">
      <label>colGroupFirstWidth: </label>
      <input v-model="colGroupFirstWidth" type="number" />
    </div>
  </div>
</template>

<script>
import { VuePivottableUi } from "vue-pivottable";
import "vue-pivottable/dist/vue-pivottable.css";
export default {
  components: {
    VuePivottableUi,
  },
  data() {
    return {
      colGroupFirstWidth: 250,
    };
  },
};
</script>

output

This is a slot that replaces the area in td.pvtOutput.

<template>
  <div>
    <vue-pivottable-ui
      :data="[
        { color: 'blue', shape: 'circle' },
        { color: 'red', shape: 'triangle' },
      ]"
      :rows="['color']"
      :cols="['shape']"
    >
      <template v-slot:output v-if="!loaded">
        <div class="p-1">loading...</div>
      </template>
    </vue-pivottable-ui>
    <button
      class="btn btn-sm btn-secondary mt-1"
      :disabled="!loaded"
      @click="reload"
    >
      <i class="fas fa-redo mr-25"></i>
      redo
    </button>
  </div>
</template>

<script>
import { VuePivottableUi } from "vue-pivottable";
import "vue-pivottable/dist/vue-pivottable.css";
export default {
  components: {
    VuePivottableUi,
  },
  data() {
    return {
      loaded: false,
    };
  },
  methods: {
    reload() {
      this.loaded = false;
      setTimeout(() => {
        this.loaded = true;
      }, 1000);
    },
  },
  mounted() {
    this.reload();
  },
};
</script>