diff --git a/webui/react/src/pages/FlatRuns/FlatRuns.tsx b/webui/react/src/pages/FlatRuns/FlatRuns.tsx
index af7a790a47f..81210441468 100644
--- a/webui/react/src/pages/FlatRuns/FlatRuns.tsx
+++ b/webui/react/src/pages/FlatRuns/FlatRuns.tsx
@@ -22,7 +22,6 @@ import Pagination from 'hew/Pagination';
 import Row from 'hew/Row';
 import { useToast } from 'hew/Toast';
 import { Loadable, Loaded, NotLoaded } from 'hew/utils/loadable';
-import { groupBy, keyBy, mapValues } from 'lodash';
 import { useObservable } from 'micro-observables';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
@@ -179,7 +178,6 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
   const [runs, setRuns] = useState<Loadable<FlatRun>[]>(INITIAL_LOADING_RUNS);
 
   const [sorts, setSorts] = useState<Sort[]>([EMPTY_SORT]);
-
   const sortString = useMemo(() => makeSortString(sorts.filter(validSort.is)), [sorts]);
   const loadableFormset = useObservable(formStore.formset);
   const rootFilterChildren: Array<FormGroup | FormField> = Loadable.match(loadableFormset, {
@@ -239,24 +237,6 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
     }
   }, [projectId]);
 
-  // expand sorts to include types from metadata columns so the column ids match
-  const expandedSorts = useMemo(() => {
-    return projectColumns.match({
-      _: () => sorts,
-      Loaded(pc) {
-        const groupedColumns = groupBy(pc, (c) => c.column);
-        const columnToExpandedColumns = mapValues(groupedColumns, (cols) =>
-          cols.map((c) => formatColumnKey(c)),
-        );
-        return sorts
-          .filter(validSort.is)
-          .flatMap((sort) =>
-            columnToExpandedColumns[sort.column].map((ec) => ({ ...sort, column: ec })),
-          );
-      },
-    });
-  }, [sorts, projectColumns]);
-
   const arrayTypeColumns = useMemo(() => {
     const arrayTypeColumns = projectColumns
       .getOrElse([])
@@ -312,11 +292,13 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
     return [...STATIC_COLUMNS, ...settings.columns.slice(0, settings.pinnedColumnsCount)];
   }, [settings.columns, settings.pinnedColumnsCount]);
 
-  const projectColumnsMap = useMemo(() => {
-    return projectColumns.map((columns) => keyBy(columns, formatColumnKey));
-  }, [projectColumns]);
-
   const columns: ColumnDef<FlatRun>[] = useMemo(() => {
+    const projectColumnsMap: Loadable<Record<string, ProjectColumn>> = Loadable.map(
+      projectColumns,
+      (columns) => {
+        return columns.reduce((acc, col) => ({ ...acc, [formatColumnKey(col)]: col }), {});
+      },
+    );
     const columnDefs = getColumnDefs({
       appTheme,
       columnWidths: settings.columnWidths,
@@ -397,8 +379,8 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
                 columnDefKey,
                 currentColumn.displayName || currentColumn.column,
                 settings.columnWidths[columnDefKey] ??
-                  defaultColumnWidths[columnDefKey as RunColumn] ??
-                  MIN_COLUMN_WIDTH,
+                defaultColumnWidths[columnDefKey as RunColumn] ??
+                MIN_COLUMN_WIDTH,
                 dataPath,
                 {
                   max: heatmap.max,
@@ -410,8 +392,8 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
                 columnDefKey,
                 currentColumn.displayName || currentColumn.column,
                 settings.columnWidths[columnDefKey] ??
-                  defaultColumnWidths[columnDefKey as RunColumn] ??
-                  MIN_COLUMN_WIDTH,
+                defaultColumnWidths[columnDefKey as RunColumn] ??
+                MIN_COLUMN_WIDTH,
                 dataPath,
                 undefined,
               );
@@ -423,8 +405,8 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
               columnDefKey,
               currentColumn.displayName || currentColumn.column,
               settings.columnWidths[columnDefKey] ??
-                defaultColumnWidths[columnDefKey as RunColumn] ??
-                MIN_COLUMN_WIDTH,
+              defaultColumnWidths[columnDefKey as RunColumn] ??
+              MIN_COLUMN_WIDTH,
               dataPath,
             );
             break;
@@ -433,8 +415,8 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
               columnDefKey,
               currentColumn.displayName || currentColumn.column,
               settings.columnWidths[columnDefKey] ??
-                defaultColumnWidths[columnDefKey as RunColumn] ??
-                MIN_COLUMN_WIDTH,
+              defaultColumnWidths[columnDefKey as RunColumn] ??
+              MIN_COLUMN_WIDTH,
               dataPath,
             );
             break;
@@ -445,8 +427,8 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
               columnDefKey,
               currentColumn.displayName || currentColumn.column,
               settings.columnWidths[columnDefKey] ??
-                defaultColumnWidths[columnDefKey as RunColumn] ??
-                MIN_COLUMN_WIDTH,
+              defaultColumnWidths[columnDefKey as RunColumn] ??
+              MIN_COLUMN_WIDTH,
               dataPath,
             );
         }
@@ -459,9 +441,9 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
             settings.columnWidths[currentColumn.column],
             heatmap && settings.heatmapOn && !settings.heatmapSkipped.includes(currentColumn.column)
               ? {
-                  max: heatmap.max,
-                  min: heatmap.min,
-                }
+                max: heatmap.max,
+                min: heatmap.min,
+              }
               : undefined,
           );
         }
@@ -473,7 +455,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
     appTheme,
     columnsIfLoaded,
     isDarkMode,
-    projectColumnsMap,
+    projectColumns,
     projectHeatmap,
     dataGridSelection.rows,
     settings.columnWidths,
@@ -835,32 +817,32 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
           ? null
           : !isPinned
             ? {
-                icon: <Icon decorative name="pin" />,
-                key: 'pin',
-                label: 'Pin column',
-                onClick: () => {
-                  const newColumnsOrder = columnsIfLoaded.filter((c) => c !== columnId);
-                  newColumnsOrder.splice(settings.pinnedColumnsCount, 0, columnId);
-                  handleColumnsOrderChange(
-                    newColumnsOrder,
-                    Math.min(settings.pinnedColumnsCount + 1, columnsIfLoaded.length),
-                  );
-                },
-              }
+              icon: <Icon decorative name="pin" />,
+              key: 'pin',
+              label: 'Pin column',
+              onClick: () => {
+                const newColumnsOrder = columnsIfLoaded.filter((c) => c !== columnId);
+                newColumnsOrder.splice(settings.pinnedColumnsCount, 0, columnId);
+                handleColumnsOrderChange(
+                  newColumnsOrder,
+                  Math.min(settings.pinnedColumnsCount + 1, columnsIfLoaded.length),
+                );
+              },
+            }
             : {
-                disabled: settings.pinnedColumnsCount <= 1,
-                icon: <Icon decorative name="pin" />,
-                key: 'unpin',
-                label: 'Unpin column',
-                onClick: () => {
-                  const newColumnsOrder = columnsIfLoaded.filter((c) => c !== columnId);
-                  newColumnsOrder.splice(settings.pinnedColumnsCount - 1, 0, columnId);
-                  handleColumnsOrderChange(
-                    newColumnsOrder,
-                    Math.max(settings.pinnedColumnsCount - 1, 0),
-                  );
-                },
+              disabled: settings.pinnedColumnsCount <= 1,
+              icon: <Icon decorative name="pin" />,
+              key: 'unpin',
+              label: 'Unpin column',
+              onClick: () => {
+                const newColumnsOrder = columnsIfLoaded.filter((c) => c !== columnId);
+                newColumnsOrder.splice(settings.pinnedColumnsCount - 1, 0, columnId);
+                handleColumnsOrderChange(
+                  newColumnsOrder,
+                  Math.max(settings.pinnedColumnsCount - 1, 0),
+                );
               },
+            },
         {
           icon: <Icon decorative name="eye-close" />,
           key: 'hide',
@@ -889,9 +871,9 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
           sortCount === 0
             ? []
             : [
-                { type: 'divider' as const },
-                ...sortMenuItemsForColumn(column, sorts, handleSortChange),
-              ];
+              { type: 'divider' as const },
+              ...sortMenuItemsForColumn(column, sorts, handleSortChange),
+            ];
         items.push(...sortMenuItems);
       }
 
@@ -974,7 +956,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
     [
       bannedFilterColumns,
       bannedSortColumns,
-      projectColumnsMap,
+      projectColumns,
       settings.pinnedColumnsCount,
       settings.heatmapOn,
       settings.heatmapSkipped,