Is it possible to add labels to a pivot-table in Vue without affecting array indexes and drag-and-drop functionality as shown in the screenshot below?
https://i.stack.imgur.com/5JTSM.png
Are there alternative methods for implementing this feature?
You can find the JSFiddle here
<script src=//unpkg.com/vue></script>
<script src=//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7c1c2d29ac7dec1d8c3c3d6d5dbd2f7879984998185">[email protected]</a>/dist/vue-pivottable.umd.js></script>
<link rel="stylesheet" href="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2b4b7a7efb2abb4adb6b6a3a0aea782f2ecf1ecf4f0">[email protected]</a>/dist/vue-pivottable.css">
<div id="app">
<vue-pivottable-ui
:data="pivotData"
:aggregator-name="aggregatorName"
:renderer-name="rendererName"
:rows="rows"
:cols="cols"
:vals="vals"
:row-total="true"
:col-total="true"
>
</vue-pivottable-ui>
</div>
window.Vue.use(window['vue-pivottable'])
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],
],
aggregatorName: 'Sum',
rendererName: 'Table Heatmap',
rows: ['Payer Gender'],
cols: ['Party Size'],
vals: ['Total Bill'],
},
mounted() {
const pvtUnused = document.getElementsByClassName(
'pvtAxisContainer pvtUnused pvtHorizList'
)
const pvtCols = document.getElementsByClassName(
'pvtAxisContainer pvtHorizList pvtCols'
)
const pvtRows = document.getElementsByClassName(
'pvtAxisContainer pvtVertList pvtRows'
)
if (pvtUnused.length !== 0) {
pvtUnused[0].insertAdjacentHTML('afterbegin', '<h4>Unused Data</h4>')
}
if (pvtCols.length !== 0) {
pvtCols[0].insertAdjacentHTML('afterbegin', '<h4>Column Data</h4>')
}
if (pvtRows.length !== 0) {
pvtRows[0].insertAdjacentHTML('afterbegin', '<h4>Row Data</h4>')
}
},
})