sort tags and selects

Author: RafaelGB

src/components/portals/PopperSelectPortal.tsx

@@ -142,19 +142,21 @@ const PopperSelectPortal = (popperProps: CellComponentProps) => {
               className="d-flex flex-wrap-wrap"
               style={{ marginTop: "-0.5rem" }}
             >
-              {tableColumn.options.map((option: any) => (
-                <div
-                  key={option.label}
-                  className="cursor-pointer"
-                  style={{ marginRight: "0.5rem", marginTop: "0.5rem" }}
-                  onClick={() => handleOptionClick(option)}
-                >
-                  <Relationship
-                    value={option.label}
-                    backgroundColor={option.backgroundColor}
-                  />
-                </div>
-              ))}
+              {tableColumn.options
+                .sort((a, b) => a.label.localeCompare(b.label))
+                .map((option) => (
+                  <div
+                    key={option.label}
+                    className="cursor-pointer"
+                    style={{ marginRight: "0.5rem", marginTop: "0.5rem" }}
+                    onClick={() => handleOptionClick(option)}
+                  >
+                    <Relationship
+                      value={option.label}
+                      backgroundColor={option.backgroundColor}
+                    />
+                  </div>
+                ))}
               {showAdd && (
                 <div
                   style={{

src/components/portals/TagsPortal.tsx

@@ -61,11 +61,14 @@ const TagsPortal = (tagsProps: CellComponentProps) => {
     color: getColor(tag),
   }));
 
-  const multiOptions = tableColumn.options.map((option: RowSelectOption) => ({
-    value: option.label,
-    label: option.label,
-    color: option.backgroundColor,
-  }));
+  const multiOptions = tableColumn.options
+    .sort((a, b) => a.label.localeCompare(b.label))
+    .map((option: RowSelectOption) => ({
+      value: option.label,
+      label: option.label,
+      color: option.backgroundColor,
+    }));
+
   const handleOnChange = (
     newValue: OnChangeValue<any, true>,
     actionMeta: ActionMeta<RowSelectOption>
@@ -125,15 +128,17 @@ const TagsPortal = (tagsProps: CellComponentProps) => {
               onClick={() => setShowSelectTags(true)}
               style={{ width: column.getSize() }}
             >
-              {tagsState.map((tag: string) => (
-                <div key={`key-${tag}`}>
-                  <Relationship
-                    key={`key-Relationship-${tag}`}
-                    value={tag}
-                    backgroundColor={getColor(tag)}
-                  />
-                </div>
-              ))}
+              {tagsState
+                .sort((a: string, b: string) => a.localeCompare(b))
+                .map((tag: string) => (
+                  <div key={`key-${tag}`}>
+                    <Relationship
+                      key={`key-Relationship-${tag}`}
+                      value={tag}
+                      backgroundColor={getColor(tag)}
+                    />
+                  </div>
+                ))}
             </div>
           )}
     </>