feat(raw-table): add sorting to table header items (#310)

cloudforet-io · Feb 23, 2023 · 19d9052 · 19d9052
1 parent bb724c4
commit 19d9052
Showing 1 changed file with 8 additions and 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
@@ -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 [];
             }),