From b94098fea6ecd201d4c4b9457d308584df25395d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=2E=20Mert=20Y=C4=B1ld=C4=B1ran?= <mehmet@up9.com>
Date: Sat, 15 Jan 2022 20:43:22 +0300
Subject: [PATCH] Sort key-value pairs on client-side in `EntryTableSection`
 (#645)

---
 .../components/EntryDetailed/EntrySections.tsx   | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/EntryDetailed/EntrySections.tsx b/ui/src/components/EntryDetailed/EntrySections.tsx
index 9a777705f..ec06de46b 100644
--- a/ui/src/components/EntryDetailed/EntrySections.tsx
+++ b/ui/src/components/EntryDetailed/EntrySections.tsx
@@ -205,13 +205,27 @@ interface EntrySectionProps {
 }
 
 export const EntryTableSection: React.FC<EntrySectionProps> = ({title, color, arrayToIterate, updateQuery}) => {
+    let arrayToIterateSorted: any[];
+    if (arrayToIterate) {
+        arrayToIterateSorted = arrayToIterate.sort((a, b) => {
+            if (a.name > b.name) {
+                return 1;
+            }
+
+            if (a.name < b.name) {
+                return -1;
+            }
+
+            return 0;
+        });
+    }
     return <React.Fragment>
         {
             arrayToIterate && arrayToIterate.length > 0 ?
                 <EntrySectionContainer title={title} color={color}>
                     <table>
                         <tbody>
-                            {arrayToIterate.map(({name, value, selector}, index) => <EntryViewLine
+                            {arrayToIterateSorted.map(({name, value, selector}, index) => <EntryViewLine
                                 key={index}
                                 label={name}
                                 value={value}