From 19d9052d2fa6a9bd2ea8c1d4f532497944d1f742 Mon Sep 17 00:00:00 2001
From: sulmo <50662170+sulmoJ@users.noreply.github.com>
Date: Thu, 23 Feb 2023 10:35:47 +0900
Subject: [PATCH] feat(raw-table): add sorting to table header items (#310)

---
 .../dynamic-layout/templates/raw-table/index.vue     | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue b/src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue
index b4e5e44e5..54ae30b5f 100644
--- a/src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue
+++ b/src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue
@@ -12,8 +12,12 @@
                             :field-handler="fieldHandler"
                             v-on="$listeners"
     >
-        <template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
-            <slot :name="slot" v-bind="scope" />
+        <template v-for="(_, slot) of $scopedSlots"
+                  #[slot]="scope"
+        >
+            <slot :name="slot"
+                  v-bind="scope"
+            />
         </template>
     </p-dynamic-layout-table>
 </template>
@@ -24,7 +28,7 @@ import {
     computed, defineComponent, reactive, toRefs,
 } from 'vue';
 
-import { map } from 'lodash';
+import { map, sortBy } from 'lodash';
 
 import type { DynamicFieldHandler } from '@/data-display/dynamic/dynamic-field/type';
 import type { RawTableDynamicLayoutProps } from '@/data-display/dynamic/dynamic-layout/templates/raw-table/type';
@@ -70,7 +74,7 @@ export default defineComponent<RawTableDynamicLayoutProps>({
             fields: computed(() => {
                 if (state.rootData[0]) {
                     const firstItem = state.rootData[0];
-                    return map(firstItem, (d, k) => ({ key: k, name: k }));
+                    return sortBy(map(firstItem, (value, key) => ({ key, name: key })), (item) => item.key);
                 }
                 return [];
             }),