diff --git a/web-console/src/views/datasource-view.tsx b/web-console/src/views/datasource-view.tsx
index 2b13b965207..a9061a0769d 100644
--- a/web-console/src/views/datasource-view.tsx
+++ b/web-console/src/views/datasource-view.tsx
@@ -386,7 +386,12 @@ GROUP BY 1`);
             Header: 'Availability',
             id: 'availability',
             filterable: false,
-            accessor: (row) => row.num_available_segments / row.num_segments,
+            accessor: (row) => {
+              return {
+                num_available: row.num_available_segments,
+                num_total: row.num_segments
+              };
+            },
             Cell: (row) => {
               const { datasource, num_available_segments, num_segments, disabled } = row.original;
 
@@ -415,6 +420,11 @@ GROUP BY 1`);
 
               }
             },
+            sortMethod: (d1, d2) => {
+              const percentAvailable1 = d1.num_available / d1.num_total;
+              const percentAvailable2 = d2.num_available / d2.num_total;
+              return (percentAvailable1 - percentAvailable2) || (d1.num_total - d2.num_total);
+            },
             show: tableColumnSelectionHandler.showColumn('Availability')
           },
           {