From 6c16ecf65f11eb7bdf00fff1cf7d316fd570afde Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 7 Apr 2021 14:28:51 +0100
Subject: [PATCH] TablePanel: Makes sorting case-insensitive (#32435)

* UI/Table: Make sorting case-insensitive
Closes #30476
---
 packages/grafana-ui/src/components/Table/Table.tsx | 5 ++++-
 packages/grafana-ui/src/components/Table/utils.ts  | 6 +++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index d1524669bbc..766089df8f8 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -14,7 +14,7 @@ import {
   useTable,
 } from 'react-table';
 import { FixedSizeList } from 'react-window';
-import { getColumns } from './utils';
+import { getColumns, sortCaseInsensitive } from './utils';
 import { useTheme } from '../../themes';
 import {
   TableColumnResizeActionCallback,
@@ -151,6 +151,9 @@ export const Table: FC<Props> = memo((props: Props) => {
       disableResizing: !resizable,
       stateReducer: stateReducer,
       initialState: getInitialState(initialSortBy, memoizedColumns),
+      sortTypes: {
+        'alphanumeric-insensitive': sortCaseInsensitive,
+      },
     }),
     [initialSortBy, memoizedColumns, memoizedData, resizable, stateReducer]
   );
diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts
index 7b4b9c89d88..16d825099df 100644
--- a/packages/grafana-ui/src/components/Table/utils.ts
+++ b/packages/grafana-ui/src/components/Table/utils.ts
@@ -63,7 +63,7 @@ export function getColumns(data: DataFrame, availableWidth: number, columnMinWid
         case FieldType.time:
           return 'basic';
         default:
-          return 'alphanumeric';
+          return 'alphanumeric-insensitive';
       }
     };
 
@@ -204,3 +204,7 @@ export function getFilteredOptions(options: SelectableValue[], filterValues?: Se
 
   return options.filter((option) => filterValues.some((filtered) => filtered.value === option.value));
 }
+
+export function sortCaseInsensitive(a: Row<any>, b: Row<any>, id: string) {
+  return String(a.values[id]).localeCompare(String(b.values[id]), undefined, { sensitivity: 'base' });
+}