Sorted filters & handling All value filter

Signed-off-by: Omkar Phansopkar <[email protected]>

Author: OmkarPh

src/pages/TableView/CustomFilterComponent.tsx

@@ -1,10 +1,7 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-} from "react";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { IFloatingFilterParams, TextFilterModel } from "ag-grid-community";
-import { DEFAULT_EMPTY_VALUES } from "./columnGroups";
+
+import { PLACEHOLDER_EMPTY_VALUES } from "./columnGroups";
 import { parseProbableStringifiedArray } from "../../utils/text";
 
 export interface CustomParams extends IFloatingFilterParams {
@@ -52,7 +49,6 @@ const CustomFilterComponent = forwardRef((props: CustomParams, ref) => {
     });
   }
 
-
   return (
     <select
       ref={selectRef}
@@ -70,7 +66,9 @@ const CustomFilterComponent = forwardRef((props: CustomParams, ref) => {
             value={parsedOptionValue || optionValue}
             key={optionValue + idx}
           >
-            {DEFAULT_EMPTY_VALUES.has(optionValue) ? "All" : parsedOptionValue}
+            {PLACEHOLDER_EMPTY_VALUES.has(optionValue)
+              ? "All"
+              : parsedOptionValue}
           </option>
         );
       })}

src/pages/TableView/TableView.tsx

@@ -9,7 +9,7 @@ import CustomFilterComponent from "./CustomFilterComponent";
 import { ALL_COLUMNS } from "./columnDefs";
 import {
   COLUMN_GROUPS,
-  DEFAULT_EMPTY_VALUES,
+  PLACEHOLDER_EMPTY_VALUES,
   SET_FILTERED_COLUMNS,
 } from "./columnGroups";
 
@@ -129,10 +129,19 @@ const TableView = () => {
             },
           }
         ).then((uniqueValues: { DISTINCT: string }[]) => {
-          const parsedUniqueValues = uniqueValues.map((val) => val.DISTINCT);
+          const parsedUniqueValues = uniqueValues
+            .map((val) => val.DISTINCT)
+            .sort((a, b) =>
+              a === "[[]]" || !a
+                ? -1
+                : b === "[[]]" || !b
+                ? 1
+                : a.localeCompare(b)
+            );
+
           if (!parsedUniqueValues[0]) parsedUniqueValues[0] = "";
 
-          if (!DEFAULT_EMPTY_VALUES.has(parsedUniqueValues[0]))
+          if (!PLACEHOLDER_EMPTY_VALUES.has(parsedUniqueValues[0]))
             parsedUniqueValues.unshift("");
 
           // console.log(

src/pages/TableView/columnGroups.ts

@@ -2,7 +2,7 @@ import { ColDef } from "ag-grid-community";
 
 import { ALL_COLUMNS } from "./columnDefs";
 
-export const DEFAULT_EMPTY_VALUES = new Set<string | null>([
+export const PLACEHOLDER_EMPTY_VALUES = new Set<string | null>([
   "",
   null,
   "[]",