diff --git a/esp/src/src-react/components/SourceFiles.tsx b/esp/src/src-react/components/SourceFiles.tsx
index ed1e083edfb..cda748e8845 100644
--- a/esp/src/src-react/components/SourceFiles.tsx
+++ b/esp/src/src-react/components/SourceFiles.tsx
@@ -25,7 +25,7 @@ interface SourceFilesProps {
 }
 
 const emptyFilter: { [id: string]: any } = {};
-const defaultSort = { attribute: "Name", descending: false };
+const defaultSort = { attribute: undefined, descending: false };
 
 export const SourceFiles: React.FunctionComponent<SourceFilesProps> = ({
     wuid,
@@ -52,7 +52,7 @@ export const SourceFiles: React.FunctionComponent<SourceFilesProps> = ({
                 selectorType: "checkbox"
             },
             Name: {
-                label: "Name", sortable: true,
+                label: "Name", width: 400, sortable: true,
                 formatter: (Name, row) => {
                     let fileUrl = `#/files/${Name}`;
                     if (row?.FileCluster) {
@@ -65,11 +65,8 @@ export const SourceFiles: React.FunctionComponent<SourceFilesProps> = ({
                     </>;
                 }
             },
-            FileCluster: { label: nlsHPCC.FileCluster, width: 300, sortable: false },
-            Count: {
-                label: nlsHPCC.Usage, width: 72, sortable: true,
-                justify: "right"
-            }
+            FileCluster: { label: nlsHPCC.FileCluster, width: 200, sortable: false },
+            Count: { label: nlsHPCC.Usage, width: 72, sortable: true, justify: "right" }
         };
     }, []);
 
diff --git a/esp/src/src-react/hooks/workunit.ts b/esp/src/src-react/hooks/workunit.ts
index 662b44dccdb..3bc1c22314a 100644
--- a/esp/src/src-react/hooks/workunit.ts
+++ b/esp/src/src-react/hooks/workunit.ts
@@ -132,6 +132,21 @@ export function useWorkunitSourceFiles(wuid: string): [SourceFile[], Workunit, W
     const [sourceFiles, setSourceFiles] = React.useState<SourceFile[]>([]);
     const [count, inc] = useCounter();
 
+    // sorts the WU source files alphabetically by parent name, then name
+    // with children immediately following parents
+    const sortFiles = React.useCallback(files => {
+        const sortedFiles = [];
+        const temp = files.sort((a, b) => a.Name.localeCompare(b.Name));
+
+        temp.filter(item => item.__hpcc_parentName === "").forEach(parent => {
+            sortedFiles.push(parent);
+            const relatedChildren = temp.filter(child => child.__hpcc_parentName === parent.Name);
+            sortedFiles.push(...relatedChildren);
+        });
+
+        return sortedFiles;
+    }, []);
+
     React.useEffect(() => {
         if (workunit) {
             const fetchInfo = singletonDebounce(workunit, "fetchInfo");
@@ -151,10 +166,10 @@ export function useWorkunitSourceFiles(wuid: string): [SourceFile[], Workunit, W
                         });
                     });
                 });
-                setSourceFiles(sourceFiles);
+                setSourceFiles(sortFiles(sourceFiles));
             }).catch(err => logger.error(err));
         }
-    }, [workunit, state, count]);
+    }, [count, sortFiles, state, workunit]);
 
     return [sourceFiles, workunit, state, inc];
 }