From eed41dc12484624342e91af4910315318f81ecfb Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Thu, 20 Mar 2025 19:30:15 +0900
Subject: [PATCH 01/12] feat: add table renderer and composables

---
 .../pivottable-ui/VPivottableUi.vue           |  3 ++
 src/components/pivottable/VPivottable.vue     | 41 +++++------------
 src/components/pivottable/VPivottableBody.vue |  2 +-
 .../pivottable/VPivottableHeader.vue          |  2 +-
 .../pivottable/renderer/TableRenderer.vue     | 45 +++++++++++++++++++
 src/components/pivottable/renderer/index.js   | 45 +++++++++++++++++++
 src/composables/useAggregators.js             | 11 +++++
 src/composables/usePivotData.js               | 38 ++++++++++++++++
 src/composables/useSorting.js                 | 11 +++++
 src/composables/useTableRenderers.js          | 19 ++++++++
 src/composables/useValueFormatting.js         | 11 +++++
 vite.config.js                                | 19 +++++++-
 12 files changed, 212 insertions(+), 35 deletions(-)
 create mode 100644 src/components/pivottable/renderer/TableRenderer.vue
 create mode 100644 src/components/pivottable/renderer/index.js
 create mode 100644 src/composables/useAggregators.js
 create mode 100644 src/composables/usePivotData.js
 create mode 100644 src/composables/useSorting.js
 create mode 100644 src/composables/useTableRenderers.js
 create mode 100644 src/composables/useValueFormatting.js

diff --git a/src/components/pivottable-ui/VPivottableUi.vue b/src/components/pivottable-ui/VPivottableUi.vue
index 58a2db0..ea153ea 100644
--- a/src/components/pivottable-ui/VPivottableUi.vue
+++ b/src/components/pivottable-ui/VPivottableUi.vue
@@ -6,6 +6,8 @@
         <VRendererCell
           :rendererName="rendererName"
           @update:propUpdater="propUpdater"
+          :tableRenderer="TableRenderer"
+          :renderers="defaultProps.renderers"
         />
         <VDragAndDropCell
           attrs="unused"
@@ -118,6 +120,7 @@ import VDragAndDropCell from './VDragAndDropCell.vue'
 import { VPivottable } from '../'
 import { computed, ref, watch } from 'vue'
 import { usePropsData } from '../../composables'
+import TableRenderer from '../pivottable/renderer'
 const props = defineProps({
   ...defaultProps,
   async: {
diff --git a/src/components/pivottable/VPivottable.vue b/src/components/pivottable/VPivottable.vue
index 5d3b7ba..8893faf 100644
--- a/src/components/pivottable/VPivottable.vue
+++ b/src/components/pivottable/VPivottable.vue
@@ -1,43 +1,22 @@
 <template>
-  <table class='pvtTable'>
-    <VPivottableHeader
-      :rowTotal="props.rowTotal"
-      :localeStrings="props.localeStrings"
-    />
-    <VPivottableBody
-      :rowTotal="props.rowTotal"
-      :tableOptions="props.tableOptions"
-    />
-  </table>
+  <component
+    :is="rendererComponent"
+    v-bind="props"
+  ></component>
 </template>
 
 <script setup>
-import { defaultProps } from '../../helper'
-import { providePivotData } from '../../composables/pivotData'
-import VPivottableHeader from './VPivottableHeader.vue'
-import VPivottableBody from './VPivottableBody.vue'
-
+import { computed } from 'vue'
+import { defaultProps } from '@/helper'
+import TableRenderer from './renderer'
 const props = defineProps({
   ...defaultProps,
-  localeStrings: {
-    type: Object,
-    default: function () {
-      return {
-        totals: 'Totals'
-      }
-    }
-  },
-  tableOptions: {
+  rendererItems: {
     type: Object,
-    default: function () {
-      return {
-        clickCallback: null
-      }
-    }
+    default: () => TableRenderer
   }
 })
-
-providePivotData(props)
+const rendererComponent = computed(() => props.rendererItems[props.rendererName] || TableRenderer.Table)
 
 </script>
 
diff --git a/src/components/pivottable/VPivottableBody.vue b/src/components/pivottable/VPivottableBody.vue
index 1563a78..17aade4 100644
--- a/src/components/pivottable/VPivottableBody.vue
+++ b/src/components/pivottable/VPivottableBody.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import VPivottableBodyRows from './VPivottableBodyRows.vue'
-import { usePivotData } from '../../composables/pivotData.js'
+import { usePivotData } from '@/composables/usePivotData'
 
 const { pivotData, rowKeys, colKeys, rowAttrs, colAttrs } = usePivotData()
 const { rowTotal, tableOptions } = defineProps(['rowTotal', 'tableOptions'])
diff --git a/src/components/pivottable/VPivottableHeader.vue b/src/components/pivottable/VPivottableHeader.vue
index bf2bd4a..ad662dd 100644
--- a/src/components/pivottable/VPivottableHeader.vue
+++ b/src/components/pivottable/VPivottableHeader.vue
@@ -16,7 +16,7 @@
 
 <script setup>
 import VPivottableHeaderRows from './VPivottableHeaderRows.vue'
-import { usePivotData } from '../../composables/pivotData.js'
+import { usePivotData } from '@/composables/usePivotData'
 
 const { rowAttrs, colAttrs, colKeys } = usePivotData()
 const { localeStrings, rowTotal } = defineProps(['localeStrings', 'rowTotal'])
diff --git a/src/components/pivottable/renderer/TableRenderer.vue b/src/components/pivottable/renderer/TableRenderer.vue
new file mode 100644
index 0000000..172d072
--- /dev/null
+++ b/src/components/pivottable/renderer/TableRenderer.vue
@@ -0,0 +1,45 @@
+<template>
+  <table class='pvtTable'>
+    <VPivottableHeader
+      :rowTotal="props.rowTotal"
+      :localeStrings="props.localeStrings"
+    />
+    <VPivottableBody
+      :rowTotal="props.rowTotal"
+      :tableOptions="props.tableOptions"
+    />
+  </table>
+</template>
+
+<script setup>
+import { defaultProps } from '@/helper'
+import { providePivotData } from '@/composables/usePivotData'
+import VPivottableHeader from '../VPivottableHeader.vue'
+import VPivottableBody from '../VPivottableBody.vue'
+
+const props = defineProps({
+  ...defaultProps,
+  localeStrings: {
+    type: Object,
+    default: function () {
+      return {
+        totals: 'Totals'
+      }
+    }
+  },
+  tableOptions: {
+    type: Object,
+    default: function () {
+      return {
+        clickCallback: null
+      }
+    }
+  }
+})
+providePivotData(props)
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/pivottable/renderer/index.js b/src/components/pivottable/renderer/index.js
new file mode 100644
index 0000000..e489f5b
--- /dev/null
+++ b/src/components/pivottable/renderer/index.js
@@ -0,0 +1,45 @@
+import { defineComponent, h } from 'vue'
+import TableRenderer from './TableRenderer.vue'
+import { defaultProps } from '@/helper'
+
+export default {
+  Table: defineComponent({
+    name: 'vue-table',
+    setup (props) {
+      return () => h(TableRenderer, {
+        ...defaultProps,
+        ...props
+      })
+    }
+  }),
+  'Table Heatmap': defineComponent({
+    name: 'vue-table-heatmap',
+    setup (props) {
+      return () => h(TableRenderer, {
+        ...defaultProps,
+        ...props,
+        heatmapMode: 'full'
+      })
+    }
+  }),
+  'Table Col Heatmap': defineComponent({
+    name: 'vue-table-col-heatmap',
+    setup (props) {
+      return () => h(TableRenderer, {
+        ...defaultProps,
+        ...props,
+        heatmapMode: 'col'
+      })
+    }
+  }),
+  'Table Row Heatmap': defineComponent({
+    name: 'vue-table-row-heatmap',
+    setup (props) {
+      return () => h(TableRenderer, {
+        ...defaultProps,
+        ...props,
+        heatmapMode: 'row'
+      })
+    }
+  })
+}
diff --git a/src/composables/useAggregators.js b/src/composables/useAggregators.js
new file mode 100644
index 0000000..8f3e4bc
--- /dev/null
+++ b/src/composables/useAggregators.js
@@ -0,0 +1,11 @@
+// 집계 함수들을 Vue3 반응형으로 래핑
+import { ref, computed } from 'vue'
+import { aggregators, aggregatorTemplates } from '../helper/utilities.js'
+
+export function useAggregators (options) {
+  // 집계 함수 선택 및 관리
+
+  return {
+    // 집계 함수와 관련 메서드
+  }
+}
diff --git a/src/composables/usePivotData.js b/src/composables/usePivotData.js
new file mode 100644
index 0000000..7c8a307
--- /dev/null
+++ b/src/composables/usePivotData.js
@@ -0,0 +1,38 @@
+import { inject, provide, ref, computed } from 'vue'
+import { PivotData } from '@/helper/utilities.js'
+
+const pivotDataKey = Symbol('pivotData')
+
+export function providePivotData (props) {
+  const pivotData = ref(null)
+  const error = ref(null)
+  try {
+    pivotData.value = new PivotData(props)
+  } catch (error) {
+    if (console && console.error(error.stack)) {
+      error.value = 'An error occurred computing the PivotTable results.'
+    }
+  }
+
+  const rowKeys = computed(() => pivotData.value?.getRowKeys() || [])
+  const colKeys = computed(() => pivotData.value?.getColKeys() || [])
+  const colAttrs = computed(() => pivotData.value?.props.cols || [])
+  const rowAttrs = computed(() => pivotData.value?.props.rows || [])
+
+  const getAggregator = (rowKey, colKey) => pivotData.value?.getAggregator(rowKey, colKey)
+  const grandTotalAggregator = () => pivotData.value.getAggregator([], [])
+  provide(pivotDataKey, {
+    pivotData,
+    rowKeys,
+    colKeys,
+    colAttrs,
+    rowAttrs,
+    getAggregator,
+    grandTotalAggregator,
+    error
+  })
+}
+
+export function usePivotData () {
+  return inject(pivotDataKey)
+}
diff --git a/src/composables/useSorting.js b/src/composables/useSorting.js
new file mode 100644
index 0000000..a6bc0d2
--- /dev/null
+++ b/src/composables/useSorting.js
@@ -0,0 +1,11 @@
+// 정렬 관련 유틸리티를 Vue3 반응형으로 래핑
+import { ref, computed } from 'vue'
+import { naturalSort, getSort, sortAs } from '../helper/utilities.js'
+
+export function useSorting (options) {
+  // 정렬 방향, 정렬 필드 등 관리
+
+  return {
+    // 노출할 상태와 메서드
+  }
+}
diff --git a/src/composables/useTableRenderers.js b/src/composables/useTableRenderers.js
new file mode 100644
index 0000000..e0eb881
--- /dev/null
+++ b/src/composables/useTableRenderers.js
@@ -0,0 +1,19 @@
+// composables/useTableRenderer.js
+import { ref, computed } from 'vue'
+import { redColorScaleGenerator } from '../helper/utilities.js'
+
+export function useTableRenderer (options) {
+  // 기존 redColorScaleGenerator 및 관련 함수 래핑
+
+  // 히트맵 로직
+  const getColorScaleGenerator = (values) => {
+    return options.tableColorScaleGenerator || redColorScaleGenerator(values)
+  }
+
+  // 기타 렌더러 관련 함수
+
+  return {
+    getColorScaleGenerator
+    // 기타 필요한 함수 및 상태
+  }
+}
diff --git a/src/composables/useValueFormatting.js b/src/composables/useValueFormatting.js
new file mode 100644
index 0000000..7d110cf
--- /dev/null
+++ b/src/composables/useValueFormatting.js
@@ -0,0 +1,11 @@
+// 값 포맷팅 기능을 Vue3 반응형으로 래핑
+import { ref, computed } from 'vue'
+import { numberFormat } from '../helper/utilities.js'
+
+export function useValueFormatting (options) {
+  // 포맷팅 옵션 관리
+
+  return {
+    // 포맷팅 함수와 옵션
+  }
+}
diff --git a/vite.config.js b/vite.config.js
index 85ce67a..9965a0b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,22 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-
+import { fileURLToPath, URL } from 'node:url'
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+    extensions: [
+      '.mjs',
+      '.js',
+      '.json',
+      '.jsx',
+      '.ts',
+      '.tsx',
+      '.vue',
+      '.mts'
+    ]
+  }
 })

From c9acbf78e7ebda37324b5b062b26d143c62d251f Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Mon, 31 Mar 2025 14:19:06 +0900
Subject: [PATCH 02/12] feat: update ui

---
 src/components/pivottable-ui/VPivottableUi.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/pivottable-ui/VPivottableUi.vue b/src/components/pivottable-ui/VPivottableUi.vue
index ea153ea..9047cd0 100644
--- a/src/components/pivottable-ui/VPivottableUi.vue
+++ b/src/components/pivottable-ui/VPivottableUi.vue
@@ -253,7 +253,8 @@ const onValSlice = (e, i) => newProps.value.vals.splice(i, 1, e.target.value)
 const pivotData = new PivotData(newProps.value)
 
 watch(() => props.data, (value) => {
-  state.value.unusedOrder = props.unusedAttrs
+  // TODO
+  state.value.unusedOrder = props.unusedAttrs // unusedAttrs 없음
   materializeInput(value)
 }, {
   immediate: false

From 429ea177d73c181a1e44a9f062f7153b2f43701b Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Tue, 8 Apr 2025 10:51:36 +0900
Subject: [PATCH 03/12] fix

---
 src/components/pivottable-ui/VPivottableUi.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/pivottable-ui/VPivottableUi.vue b/src/components/pivottable-ui/VPivottableUi.vue
index 58a2db0..348118e 100644
--- a/src/components/pivottable-ui/VPivottableUi.vue
+++ b/src/components/pivottable-ui/VPivottableUi.vue
@@ -4,8 +4,9 @@
     <tbody>
       <tr>
         <VRendererCell
+          :rendererItems="rendererItems"
           :rendererName="rendererName"
-          @update:propUpdater="propUpdater"
+
         />
         <VDragAndDropCell
           attrs="unused"
@@ -118,6 +119,7 @@ import VDragAndDropCell from './VDragAndDropCell.vue'
 import { VPivottable } from '../'
 import { computed, ref, watch } from 'vue'
 import { usePropsData } from '../../composables'
+import { Renderer } from '../pivottable/'
 const props = defineProps({
   ...defaultProps,
   async: {
@@ -174,6 +176,7 @@ const state = ref({
   attrValues: {},
   materializedInput: []
 })
+const rendererItems = computed(() => props.renderers || Renderer)
 const { newProps, setProps, propUpdater } = usePropsData(props)
 const rowAttrs = computed(() => {
   return newProps.value.rows.filter(

From ee8e9b1ca7f3712d16795ce6ecde7236db43a20e Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Thu, 10 Apr 2025 15:53:44 +0900
Subject: [PATCH 04/12] WIP

---
 src/App.vue                                   |   6 -
 .../pivottable-ui/VDragAndDropCell.vue        |   4 +-
 .../pivottable-ui/VPivottableUi.vue           | 223 +++++++++---------
 .../pivottable/renderer/TableRenderer.vue     |   4 +-
 src/composables/index.js                      |   2 +-
 src/composables/propData.js                   |  16 --
 src/composables/usePropsState.js              |  73 ++++++
 src/helper/defaultProps.js                    |  71 ++----
 8 files changed, 212 insertions(+), 187 deletions(-)
 delete mode 100644 src/composables/propData.js
 create mode 100644 src/composables/usePropsState.js

diff --git a/src/App.vue b/src/App.vue
index 8be2336..a9abe61 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,9 @@
 <script setup>
-import { VPivottable } from './index.js'
 import tips from './tips.js'
 </script>
 
 <template>
   <div>
-    <VPivottable
-      :data="tips"
-      :rows="['Payer Smoker']"
-      :cols="['Payer Gender']"
-    />
     <VPivottableUi
       :data="tips"
       :rows="['Payer Smoker']"
diff --git a/src/components/pivottable-ui/VDragAndDropCell.vue b/src/components/pivottable-ui/VDragAndDropCell.vue
index 9c0396d..f4942d5 100644
--- a/src/components/pivottable-ui/VDragAndDropCell.vue
+++ b/src/components/pivottable-ui/VDragAndDropCell.vue
@@ -89,10 +89,10 @@ const props = defineProps({
 const modelItems = ref([])
 
 const onDrag = evt => {
-  console.log('event', Object.keys(evt)[0])
+  // console.log('event', Object.keys(evt)[0])
   emit('update:draggedAttribute', {
     cellType: props.cellType,
-    attributes: modelItems.value
+    attributes: Object.values(modelItems.value)
   })
 }
 
diff --git a/src/components/pivottable-ui/VPivottableUi.vue b/src/components/pivottable-ui/VPivottableUi.vue
index 7217a7d..3d6dd98 100644
--- a/src/components/pivottable-ui/VPivottableUi.vue
+++ b/src/components/pivottable-ui/VPivottableUi.vue
@@ -6,17 +6,19 @@
         <VRendererCell
           :rendererItems="rendererItems"
           :rendererName="rendererName"
+          :update:rendererName="onUpdateRendererName"
         />
         <VDragAndDropCell
+          classes="pvtAxisContainer pvtUnused pvtHorizList"
           cellType="unused"
           :attributeNames="unusedAttrs"
-          classes="pvtAxisContainer pvtUnused pvtHorizList"
-          :restrictedFromDragDrop="[]"
-          :disabledFromDragDrop="[]"
-          :zIndices="{}"
-          :openStatus="{}"
-          :hideFilterBoxOfUnusedAttributes="false"
-          :valueFilter="{}"
+          :valueFilter="state.valueFilter"
+          :disabledFromDragDrop="state.disabledFromDragDrop"
+          :hideFilterBoxOfUnusedAttrs="state.hideFilterBoxOfUnusedAttrs"
+          @update:zIndexOfFilterBox="onMoveFilterBoxToTop"
+          @update:unselectedFilterValues="onUpdateValueFilter"
+          @update:openStatusOfFilterBox="onUpdateOpenStatus"
+          @update:draggedAttribute="onDraggedAttribute"
         >
           <template v-slot:pvtAttr="props">
             <slot name="pvtAttr" v-bind="props" />
@@ -27,28 +29,26 @@
         <slot name="aggregatorCell">
           <VAggregatorCell
             :aggregatorItems="aggregatorItems"
-            :aggregatorName="newProps.aggregatorName"
-            :rowOrder="newProps.rowOrder"
-            :colOrder="newProps.colOrder"
-            :vals="newProps.vals"
-            :attrValues="newProps.attrValues"
-            :hiddenAttributes="newProps.hiddenAttributes"
-            :hiddenFromAggregators="newProps.hiddenFromAggregators"
-            :numValsAllowed="numValsAllowed"
-            @update:propUpdater="propUpdater"
-            @update:valSlice="onValSlice"
+            :aggregatorName="state.aggregatorName"
+            :rowOrder="state.rowOrder"
+            :colOrder="state.colOrder"
+            :attributeNames="state.attributeNames"
+            :hiddenFromAggregators="state.hiddenFromAggregators"
+            :vals="state.vals"
           />
         </slot>
 
         <VDragAndDropCell
+          classes="pvtAxisContainer pvtHorizList pvtCols"
           cellType="col"
           :attributeNames="colAttrs"
-          classes="pvtAxisContainer pvtHorizList pvtCols"
-          :restrictedFromDragDrop="[]"
-          :disabledFromDragDrop="[]"
-          :zIndices="{}"
-          :openStatus="{}"
-          :valueFilter="{}"
+          :valueFilter="state.valueFilter"
+          :disabledFromDragDrop="state.disabledFromDragDrop"
+          :hideFilterBoxOfUnusedAttrs="state.hideFilterBoxOfUnusedAttrs"
+          @update:zIndexOfFilterBox="onMoveFilterBoxToTop"
+          @update:unselectedFilterValues="onUpdateValueFilter"
+          @update:openStatusOfFilterBox="onUpdateOpenStatus"
+          @update:draggedAttribute="onDraggedAttribute"
         >
           <template v-slot:pvtAttr="props">
             <slot name="pvtAttr" v-bind="props" />
@@ -57,26 +57,32 @@
       </tr>
       <tr>
         <VDragAndDropCell
+          classes="pvtAxisContainer pvtVertList pvtRows"
           cellType="row"
           :attributeNames="rowAttrs"
-          classes="pvtAxisContainer pvtVertList pvtRows"
-          :restrictedFromDragDrop="[]"
-          :disabledFromDragDrop="[]"
-          :zIndices="{}"
-          :openStatus="{}"
-          :valueFilter="{}"
+          :valueFilter="state.valueFilter"
+          :disabledFromDragDrop="state.disabledFromDragDrop"
+          :hideFilterBoxOfUnusedAttrs="state.hideFilterBoxOfUnusedAttrs"
+          @update:zIndexOfFilterBox="onMoveFilterBoxToTop"
+          @update:unselectedFilterValues="onUpdateValueFilter"
+          @update:openStatusOfFilterBox="onUpdateOpenStatus"
+          @update:draggedAttribute="onDraggedAttribute"
         >
           <template v-slot:pvtAttr="props">
             <slot v-bind="props" name="pvtAttr" />
           </template>
-          <!-- <slot name="pvtAttr" v-bind="$props"></slot> -->
         </VDragAndDropCell>
         <td class="pvtOutput">
           <slot name="outputSlot" :outputSlot="{ pivotData }">
-            <VPivottable v-bind="newProps" />
+            <VPivottable v-bind="state" />
           </slot>
         </td>
       </tr>
+      <tr>
+        <td colspan="2">
+          {{ state.rows }}
+        </td>
+      </tr>
     </tbody>
   </table>
 </template>
@@ -86,64 +92,51 @@ import {
   defaultProps,
   PivotData,
   aggregators,
-  sortAs,
-  getSort
-} from '../../helper'
+  sortAs
+} from '@/helper'
 import VRendererCell from './VRendererCell.vue'
 import VAggregatorCell from './VAggregatorCell.vue'
 import VDragAndDropCell from './VDragAndDropCell.vue'
-import { VPivottable } from '../'
-import { computed, ref, watch } from 'vue'
-import { usePropsData } from '../../composables'
+import { VPivottable } from '@/'
+import { computed, ref, toRefs, watch } from 'vue'
+import { usePropsState } from '@/composables'
 import TableRenderer from '../pivottable/renderer'
 const props = defineProps({
   ...defaultProps,
-  async: {
-    type: Boolean,
-    default: false
-  },
   hiddenAttributes: {
     type: Array,
-    default: function () {
-      return []
-    }
+    default: () => []
   },
   hiddenFromAggregators: {
     type: Array,
-    default: function () {
-      return []
-    }
+    default: () => []
   },
   hiddenFromDragDrop: {
     type: Array,
-    default: function () {
-      return []
-    }
+    default: () => []
   },
-  sortonlyFromDragDrop: {
+  restrictedFromDragDrop: {
     type: Array,
-    default: function () {
-      return []
-    }
+    default: () => []
   },
   disabledFromDragDrop: {
     type: Array,
-    default: function () {
-      return []
-    }
+    default: () => []
   },
   menuLimit: {
     type: Number,
     default: 500
   },
-  config: {
+  pivotModel: {
     type: Object,
-    default: function () {
-      return {}
-    }
+    default: () => ({})
+  },
+  hideFilterBoxOfUnusedAttrs: {
+    type: Boolean,
+    default: false
   }
 })
-const state = ref({
+const pivotUiState = ref({
   unusedOrder: props.unusedAttrs,
   zIndices: {},
   maxZIndex: 1000,
@@ -152,41 +145,37 @@ const state = ref({
   attrValues: {},
   materializedInput: []
 })
-const rendererItems = computed(() => props.renderers || TableRenderer)
-const { newProps, setProps, propUpdater } = usePropsData(props)
+const propsRefs = toRefs(props)
+
+const { state, updateState, updateMultiple } = usePropsState(propsRefs)
+const rendererItems = computed(() => state.value.renderers || TableRenderer)
+const aggregatorItems = computed(() => state.value.aggregators || aggregators)
 const rowAttrs = computed(() => {
-  return newProps.value.rows.filter(
+  return state.value.rows.filter(
     e =>
-      !newProps.value.hiddenAttributes.includes(e) &&
-      !newProps.value.hiddenFromDragDrop.includes(e)
+      !state.value.hiddenAttributes.includes(e) &&
+      !state.value.hiddenFromDragDrop.includes(e)
   )
 })
-
 const colAttrs = computed(() => {
-  return newProps.value.cols.filter(
+  return state.value.cols.filter(
     e =>
-      !newProps.value.hiddenAttributes.includes(e) &&
-      !newProps.value.hiddenFromDragDrop.includes(e)
+      !state.value.hiddenAttributes.includes(e) &&
+      !state.value.hiddenFromDragDrop.includes(e)
   )
 })
 const unusedAttrs = computed(() => {
-  return newProps.value.attributes
+  return state.value.attributes
     .filter(
       e =>
-        !newProps.rows.includes(e) &&
-        !newProps.value.cols.includes(e) &&
-        !newProps.value.hiddenAttributes.includes(e) &&
-        !newProps.value.hiddenFromDragDrop.includes(e)
+        !state.value.rows.includes(e) &&
+        !state.value.cols.includes(e) &&
+        !state.value.hiddenAttributes.includes(e) &&
+        !state.value.hiddenFromDragDrop.includes(e)
     )
-    .sort(sortAs(newProps.value.unusedOrder))
+    .sort(sortAs(state.value.unusedOrder))
 })
-const aggregatorItems = computed(
-  () => newProps.value.aggregators || aggregators
-)
-const numValsAllowed = computed(
-  () =>
-    aggregatorItems.value[newProps.value.aggregatorName]([])().numInputs || 0
-)
+
 const materializeInput = nextData => {
   if (props.data === nextData) {
     return
@@ -221,39 +210,55 @@ const materializeInput = nextData => {
       recordsProcessed++
     }
   )
-  state.value = newState
-  setProps({
-    ...newProps.value,
-    ...state.value
+
+  updateMultiple({
+    ...state.value,
+    ...newState,
+    ...pivotUiState.value
+  })
+}
+
+const onMoveFilterBoxToTop = ({ attribute }) => {
+  updateState('maxZIndex', state.value.maxZIndex++)
+  updateState('zIndices', {
+    ...state.value.zIndices,
+    [attribute]: state.value.maxZIndex + 1
   })
 }
 const onUpdateValueFilter = ({ attribute, valueFilter }) => {
-  newProps.value.valueFilter[attribute] = valueFilter
+  updateState('valueFilter', {
+    ...state.value.valueFilter,
+    [attribute]: valueFilter
+  })
 }
-const onMoveFilterBoxToTop = ({ attribute }) => {
-  newProps.value.maxZIndex += 1
-  newProps.value.zIndices[attribute] = newProps.value.maxZIndex + 1
+const onUpdateRendererName = (rendererName) => {
+  updateState('rendererName', rendererName)
 }
-const onNoFilterBox = () => this.$emit('no:filterbox')
-const onValSlice = (e, i) => newProps.value.vals.splice(i, 1, e.target.value)
 
-const pivotData = new PivotData(newProps.value)
+const onDraggedAttribute = ({ cellType, attributes }) => {
+  updateState(cellType, attributes)
+}
+const onUpdateOpenStatus = ({ attribute, status }) => {
+  updateState('openStatus', {
+    ...state.value.openStatus,
+    [attribute]: status
+  })
+}
+const pivotData = computed(() => new PivotData(state.value))
 
-watch(
-  () => props.data,
-  value => {
-    state.value.unusedOrder = props.unusedAttrs
-    materializeInput(value)
-  },
-  {
-    immediate: false
-  }
-)
+watch(() => props.data, value => {
+  updateState('unusedOrder', props.unusedAttrs)
+  materializeInput(value)
+}, {
+  immediate: false
+})
+
+watch(() => state.value.rows, newState => {
+  console.log(newState, 'newState')
+}, {
+  deep: true
+})
 
-const updateFilters = ({ cellType, filters }) => {
-  console.log('updated cell type', cellType)
-  console.log('updated filter items', filters)
-}
 </script>
 
 <style>
diff --git a/src/components/pivottable/renderer/TableRenderer.vue b/src/components/pivottable/renderer/TableRenderer.vue
index 172d072..30a0166 100644
--- a/src/components/pivottable/renderer/TableRenderer.vue
+++ b/src/components/pivottable/renderer/TableRenderer.vue
@@ -1,11 +1,11 @@
 <template>
   <table class='pvtTable'>
     <VPivottableHeader
-      :rowTotal="props.rowTotal"
+      :rowTotal="props.showRowTotal"
       :localeStrings="props.localeStrings"
     />
     <VPivottableBody
-      :rowTotal="props.rowTotal"
+      :rowTotal="props.showRowTotal"
       :tableOptions="props.tableOptions"
     />
   </table>
diff --git a/src/composables/index.js b/src/composables/index.js
index 6cf3cad..3c5f459 100644
--- a/src/composables/index.js
+++ b/src/composables/index.js
@@ -1,2 +1,2 @@
 export { usePivotData, providePivotData } from './pivotData'
-export { usePropsData } from './propData'
+export { usePropsState } from './usePropsState'
diff --git a/src/composables/propData.js b/src/composables/propData.js
deleted file mode 100644
index 1c07c63..0000000
--- a/src/composables/propData.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ref } from 'vue'
-
-const newProps = ref({})
-
-export function usePropsData ($props) {
-  newProps.value = $props
-  const propUpdater = ({ key, value }) => {
-    newProps[key] = value
-  }
-  const setProps = ($props) => (newProps.value = $props)
-  return {
-    newProps,
-    setProps,
-    propUpdater
-  }
-}
diff --git a/src/composables/usePropsState.js b/src/composables/usePropsState.js
new file mode 100644
index 0000000..01e1b54
--- /dev/null
+++ b/src/composables/usePropsState.js
@@ -0,0 +1,73 @@
+import { ref, watch } from 'vue'
+
+export function usePropsState (initialProps) {
+  const state = ref({ ...initialProps })
+
+  watch(() => initialProps, (newProps) => {
+    console.log('props 변경 감지:', newProps)
+    state.value = { ...newProps }
+  }, {
+    deep: true,
+    immediate: true
+  })
+
+  const logStateChange = (key, oldVal, newVal) => {
+    console.log(`상태 변경: ${key}`, { 이전: oldVal, 새값: newVal })
+  }
+
+  const updateState = (key, value) => {
+    if (key in state.value) {
+      const oldVal = state.value[key]
+
+      if (typeof value === 'object' && value !== null) {
+        if (Array.isArray(value)) {
+          state.value[key] = [...value]
+        } else {
+          state.value[key] = { ...value }
+        }
+      } else {
+        state.value[key] = value
+      }
+
+      logStateChange(key, oldVal, state.value[key])
+      state.value = { ...state.value }
+    }
+  }
+
+  const updateMultiple = (updates) => {
+    const oldState = { ...state.value }
+    let changed = false
+
+    Object.entries(updates).forEach(([key, value]) => {
+      if (key in state.value) {
+        if (typeof value === 'object' && value !== null) {
+          if (Array.isArray(value)) {
+            state.value[key] = [...value]
+          } else {
+            state.value[key] = { ...value }
+          }
+        } else {
+          state.value[key] = value
+        }
+        changed = true
+      }
+    })
+
+    if (changed) {
+      console.log('여러 상태 동시 업데이트:', { 이전: oldState, 새값: state.value })
+      state.value = { ...state.value }
+    }
+  }
+
+  const resetState = () => {
+    console.log('상태 초기화')
+    state.value = { ...initialProps }
+  }
+
+  return {
+    state,
+    updateState,
+    updateMultiple,
+    resetState
+  }
+}
diff --git a/src/helper/defaultProps.js b/src/helper/defaultProps.js
index 23f6f14..9f3f855 100644
--- a/src/helper/defaultProps.js
+++ b/src/helper/defaultProps.js
@@ -6,9 +6,7 @@ export default {
   },
   aggregators: {
     type: Object,
-    default: function () {
-      return aggregators
-    }
+    default: () => aggregators
   },
   aggregatorName: {
     type: String,
@@ -20,11 +18,12 @@ export default {
   },
   tableOptions: {
     type: Object,
-    default: function () {
-      return {}
-    }
+    default: () => ({})
+  },
+  renderers: {
+    type: Object,
+    default: () => ({})
   },
-  renderers: Object,
   rendererName: {
     type: String,
     default: 'Table'
@@ -33,89 +32,59 @@ export default {
     type: String,
     default: 'en'
   },
-  locales: {
+  languagePack: {
     type: Object,
-    default: function () {
-      return locales
-    }
+    default: () => locales
   },
-  rowTotal: {
+  showRowTotal: {
     type: Boolean,
     default: true
   },
-  colTotal: {
+  showColTotal: {
     type: Boolean,
     default: true
   },
   cols: {
     type: Array,
-    default: function () {
-      return []
-    }
+    default: () => []
   },
   rows: {
     type: Array,
-    default: function () {
-      return []
-    }
+    default: () => []
   },
   vals: {
     type: Array,
-    default: function () {
-      return []
-    }
+    default: () => []
   },
   attributes: {
     type: Array,
-    default: function () {
-      return []
-    }
+    default: () => []
   },
   valueFilter: {
     type: Object,
-    default: function () {
-      return {}
-    }
+    default: () => ({})
   },
   sorters: {
     type: [Function, Object],
-    default: function () {
-      return {}
-    }
+    default: () => ({})
   },
   derivedAttributes: {
     type: [Function, Object],
-    default: function () {
-      return {}
-    }
+    default: () => ({})
   },
   rowOrder: {
     type: String,
     default: 'key_a_to_z',
-    validator: function (value) {
-      return ['key_a_to_z', 'value_a_to_z', 'value_z_to_a'].indexOf(value) !== -1
-    }
+    validator: (value) => ['key_a_to_z', 'value_a_to_z', 'value_z_to_a'].indexOf(value) !== -1
   },
   colOrder: {
     type: String,
     default: 'key_a_to_z',
-    validator: function (value) {
-      return ['key_a_to_z', 'value_a_to_z', 'value_z_to_a'].indexOf(value) !== -1
-    }
+    validator: value => ['key_a_to_z', 'value_a_to_z', 'value_z_to_a'].indexOf(value) !== -1
   },
   tableMaxWidth: {
     type: Number,
     default: 0,
-    validator: function (value) {
-      return value >= 0
-    }
-  },
-  colLimit: {
-    type: Number,
-    default: 100
-  },
-  rowLimit: {
-    type: Number,
-    default: 100
+    validator: value => value >= 0
   }
 }

From fbbcff3cce4bce891cf905391ad35e157373d5c7 Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Thu, 10 Apr 2025 16:21:15 +0900
Subject: [PATCH 05/12] feat: update ui props

---
 src/components/pivottable-ui/VPivottableUi.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/pivottable-ui/VPivottableUi.vue b/src/components/pivottable-ui/VPivottableUi.vue
index 3d6dd98..daa2666 100644
--- a/src/components/pivottable-ui/VPivottableUi.vue
+++ b/src/components/pivottable-ui/VPivottableUi.vue
@@ -5,7 +5,7 @@
       <tr>
         <VRendererCell
           :rendererItems="rendererItems"
-          :rendererName="rendererName"
+          :rendererName="state.rendererName"
           :update:rendererName="onUpdateRendererName"
         />
         <VDragAndDropCell
@@ -40,7 +40,7 @@
 
         <VDragAndDropCell
           classes="pvtAxisContainer pvtHorizList pvtCols"
-          cellType="col"
+          cellType="cols"
           :attributeNames="colAttrs"
           :valueFilter="state.valueFilter"
           :disabledFromDragDrop="state.disabledFromDragDrop"
@@ -58,7 +58,7 @@
       <tr>
         <VDragAndDropCell
           classes="pvtAxisContainer pvtVertList pvtRows"
-          cellType="row"
+          cellType="rows"
           :attributeNames="rowAttrs"
           :valueFilter="state.valueFilter"
           :disabledFromDragDrop="state.disabledFromDragDrop"
@@ -80,7 +80,9 @@
       </tr>
       <tr>
         <td colspan="2">
+          (test) <br>
           {{ state.rows }}
+          {{ state.rendererName }}
         </td>
       </tr>
     </tbody>
@@ -91,7 +93,6 @@
 import {
   defaultProps,
   PivotData,
-  aggregators,
   sortAs
 } from '@/helper'
 import VRendererCell from './VRendererCell.vue'
@@ -100,7 +101,8 @@ import VDragAndDropCell from './VDragAndDropCell.vue'
 import { VPivottable } from '@/'
 import { computed, ref, toRefs, watch } from 'vue'
 import { usePropsState } from '@/composables'
-import TableRenderer from '../pivottable/renderer'
+import TableRenderer from '../pivottable/renderer/index'
+
 const props = defineProps({
   ...defaultProps,
   hiddenAttributes: {
@@ -148,8 +150,8 @@ const pivotUiState = ref({
 const propsRefs = toRefs(props)
 
 const { state, updateState, updateMultiple } = usePropsState(propsRefs)
-const rendererItems = computed(() => state.value.renderers || TableRenderer)
-const aggregatorItems = computed(() => state.value.aggregators || aggregators)
+const rendererItems = computed(() => Object.keys(state.value.renderers).length ? state.value.renderers : TableRenderer)
+const aggregatorItems = computed(() => state.value.aggregators)
 const rowAttrs = computed(() => {
   return state.value.rows.filter(
     e =>

From 5e55b333b08868a8191f558ccfdd88e5942534c4 Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Thu, 10 Apr 2025 16:41:06 +0900
Subject: [PATCH 06/12] fix: add missing event

---
 src/components/pivottable-ui/VPivottableUi.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/pivottable-ui/VPivottableUi.vue b/src/components/pivottable-ui/VPivottableUi.vue
index daa2666..40082ee 100644
--- a/src/components/pivottable-ui/VPivottableUi.vue
+++ b/src/components/pivottable-ui/VPivottableUi.vue
@@ -6,7 +6,7 @@
         <VRendererCell
           :rendererItems="rendererItems"
           :rendererName="state.rendererName"
-          :update:rendererName="onUpdateRendererName"
+          @update:rendererName="onUpdateRendererName"
         />
         <VDragAndDropCell
           classes="pvtAxisContainer pvtUnused pvtHorizList"
@@ -35,6 +35,7 @@
             :attributeNames="state.attributeNames"
             :hiddenFromAggregators="state.hiddenFromAggregators"
             :vals="state.vals"
+            @update:aggregatorName="onUpdateAggregatorName"
           />
         </slot>
 
@@ -80,9 +81,12 @@
       </tr>
       <tr>
         <td colspan="2">
-          (test) <br>
-          {{ state.rows }}
-          {{ state.rendererName }}
+          <h4>State</h4>
+          rows: {{ state.rows }} <br>
+          cols: {{ state.cols }} <br>
+          aggregatorName: {{ state.aggregatorName }} <br>
+          rendererName: {{ state.rendererName }} <br>
+          vals: {{ state.vals }}
         </td>
       </tr>
     </tbody>
@@ -236,7 +240,10 @@ const onUpdateValueFilter = ({ attribute, valueFilter }) => {
 const onUpdateRendererName = (rendererName) => {
   updateState('rendererName', rendererName)
 }
-
+const onUpdateAggregatorName = (aggregatorName) => {
+  console.log(aggregatorName)
+  updateState('aggregatorName', aggregatorName)
+}
 const onDraggedAttribute = ({ cellType, attributes }) => {
   updateState(cellType, attributes)
 }

From f8cba1e90a29d3a31315f0d2bf9f536d02d10054 Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Thu, 10 Apr 2025 16:44:58 +0900
Subject: [PATCH 07/12] chore: remove test code

---
 src/components/pivottable-ui/VPivottableUi.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/pivottable-ui/VPivottableUi.vue b/src/components/pivottable-ui/VPivottableUi.vue
index 40082ee..efdd814 100644
--- a/src/components/pivottable-ui/VPivottableUi.vue
+++ b/src/components/pivottable-ui/VPivottableUi.vue
@@ -241,7 +241,6 @@ const onUpdateRendererName = (rendererName) => {
   updateState('rendererName', rendererName)
 }
 const onUpdateAggregatorName = (aggregatorName) => {
-  console.log(aggregatorName)
   updateState('aggregatorName', aggregatorName)
 }
 const onDraggedAttribute = ({ cellType, attributes }) => {
@@ -261,13 +260,6 @@ watch(() => props.data, value => {
 }, {
   immediate: false
 })
-
-watch(() => state.value.rows, newState => {
-  console.log(newState, 'newState')
-}, {
-  deep: true
-})
-
 </script>
 
 <style>

From 0c4e407b2aacba6a066e88150776de3047697e91 Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Thu, 10 Apr 2025 16:57:58 +0900
Subject: [PATCH 08/12] fix: update responsive table data

---
 src/composables/usePivotData.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/composables/usePivotData.js b/src/composables/usePivotData.js
index 7c8a307..b8f8655 100644
--- a/src/composables/usePivotData.js
+++ b/src/composables/usePivotData.js
@@ -4,15 +4,17 @@ import { PivotData } from '@/helper/utilities.js'
 const pivotDataKey = Symbol('pivotData')
 
 export function providePivotData (props) {
-  const pivotData = ref(null)
   const error = ref(null)
-  try {
-    pivotData.value = new PivotData(props)
-  } catch (error) {
-    if (console && console.error(error.stack)) {
+
+  const pivotData = computed(() => {
+    try {
+      return new PivotData(props)
+    } catch (err) {
+      console.error(err.stack)
       error.value = 'An error occurred computing the PivotTable results.'
+      return null
     }
-  }
+  })
 
   const rowKeys = computed(() => pivotData.value?.getRowKeys() || [])
   const colKeys = computed(() => pivotData.value?.getColKeys() || [])
@@ -21,6 +23,7 @@ export function providePivotData (props) {
 
   const getAggregator = (rowKey, colKey) => pivotData.value?.getAggregator(rowKey, colKey)
   const grandTotalAggregator = () => pivotData.value.getAggregator([], [])
+
   provide(pivotDataKey, {
     pivotData,
     rowKeys,

From b75010ce773b64074abe3f26efb5420ea6598cc8 Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Fri, 11 Apr 2025 16:07:22 +0900
Subject: [PATCH 09/12] feat: remove console

---
 src/composables/usePropsState.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/composables/usePropsState.js b/src/composables/usePropsState.js
index 01e1b54..4021d6e 100644
--- a/src/composables/usePropsState.js
+++ b/src/composables/usePropsState.js
@@ -4,7 +4,7 @@ export function usePropsState (initialProps) {
   const state = ref({ ...initialProps })
 
   watch(() => initialProps, (newProps) => {
-    console.log('props 변경 감지:', newProps)
+    // console.log('props 변경 감지:', newProps)
     state.value = { ...newProps }
   }, {
     deep: true,
@@ -12,7 +12,7 @@ export function usePropsState (initialProps) {
   })
 
   const logStateChange = (key, oldVal, newVal) => {
-    console.log(`상태 변경: ${key}`, { 이전: oldVal, 새값: newVal })
+    // console.log(`상태 변경: ${key}`, { 이전: oldVal, 새값: newVal })
   }
 
   const updateState = (key, value) => {
@@ -54,13 +54,13 @@ export function usePropsState (initialProps) {
     })
 
     if (changed) {
-      console.log('여러 상태 동시 업데이트:', { 이전: oldState, 새값: state.value })
+      // console.log('여러 상태 동시 업데이트:', { 이전: oldState, 새값: state.value })
       state.value = { ...state.value }
     }
   }
 
   const resetState = () => {
-    console.log('상태 초기화')
+    // console.log('상태 초기화')
     state.value = { ...initialProps }
   }
 

From d3f5813fadb2f21b0b86a0d87117baba811edc20 Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Fri, 11 Apr 2025 16:55:44 +0900
Subject: [PATCH 10/12] fix: fix feedback

---
 src/components/pivottable-ui/VPivottableUi.vue   |  2 --
 .../pivottable/renderer/TableRenderer.vue        | 16 ++++++----------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/pivottable-ui/VPivottableUi.vue b/src/components/pivottable-ui/VPivottableUi.vue
index efdd814..ce355a0 100644
--- a/src/components/pivottable-ui/VPivottableUi.vue
+++ b/src/components/pivottable-ui/VPivottableUi.vue
@@ -257,8 +257,6 @@ const pivotData = computed(() => new PivotData(state.value))
 watch(() => props.data, value => {
   updateState('unusedOrder', props.unusedAttrs)
   materializeInput(value)
-}, {
-  immediate: false
 })
 </script>
 
diff --git a/src/components/pivottable/renderer/TableRenderer.vue b/src/components/pivottable/renderer/TableRenderer.vue
index 30a0166..7e2c38d 100644
--- a/src/components/pivottable/renderer/TableRenderer.vue
+++ b/src/components/pivottable/renderer/TableRenderer.vue
@@ -21,19 +21,15 @@ const props = defineProps({
   ...defaultProps,
   localeStrings: {
     type: Object,
-    default: function () {
-      return {
-        totals: 'Totals'
-      }
-    }
+    default: () => ({
+      totals: 'Totals'
+    })
   },
   tableOptions: {
     type: Object,
-    default: function () {
-      return {
-        clickCallback: null
-      }
-    }
+    default: () => ({
+      clickCallback: null
+    })
   }
 })
 providePivotData(props)

From c4c77146e092f941cdd216872ea7355263969f64 Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Fri, 11 Apr 2025 17:42:19 +0900
Subject: [PATCH 11/12] fix: duplicate maxZIndex increment in
 onMoveFilterBoxToTop (PR #12, comment #r2039059426)

---
 src/components/pivottable-ui/VPivottableUi.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pivottable-ui/VPivottableUi.vue b/src/components/pivottable-ui/VPivottableUi.vue
index ce355a0..7316920 100644
--- a/src/components/pivottable-ui/VPivottableUi.vue
+++ b/src/components/pivottable-ui/VPivottableUi.vue
@@ -228,7 +228,7 @@ const onMoveFilterBoxToTop = ({ attribute }) => {
   updateState('maxZIndex', state.value.maxZIndex++)
   updateState('zIndices', {
     ...state.value.zIndices,
-    [attribute]: state.value.maxZIndex + 1
+    [attribute]: state.value.maxZIndex
   })
 }
 const onUpdateValueFilter = ({ attribute, valueFilter }) => {

From a02ebffdee174d35f45dff05d9edc6dbcb5dcbbe Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Mon, 14 Apr 2025 10:30:32 +0900
Subject: [PATCH 12/12] fix: add missing methods (PR #12, comment #r2041281526)

---
 src/components/pivottable-ui/VPivottableUi.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/pivottable-ui/VPivottableUi.vue b/src/components/pivottable-ui/VPivottableUi.vue
index 7316920..ac936e3 100644
--- a/src/components/pivottable-ui/VPivottableUi.vue
+++ b/src/components/pivottable-ui/VPivottableUi.vue
@@ -36,6 +36,9 @@
             :hiddenFromAggregators="state.hiddenFromAggregators"
             :vals="state.vals"
             @update:aggregatorName="onUpdateAggregatorName"
+            @update:rowOrder="onUpdateRowOrder"
+            @update:colOrder="onUpdateColOrder"
+            @update:vals="onUpdateVals"
           />
         </slot>
 
@@ -243,6 +246,15 @@ const onUpdateRendererName = (rendererName) => {
 const onUpdateAggregatorName = (aggregatorName) => {
   updateState('aggregatorName', aggregatorName)
 }
+const onUpdateRowOrder = (rowOrder) => {
+  updateState('rowOrder', rowOrder)
+}
+const onUpdateColOrder = (colOrder) => {
+  updateState('colOrder', colOrder)
+}
+const onUpdateVals = (vals) => {
+  updateState('vals', vals)
+}
 const onDraggedAttribute = ({ cellType, attributes }) => {
   updateState(cellType, attributes)
 }