diff --git a/src/Explorer/Tables/DataTable/DataTableBindingManager.ts b/src/Explorer/Tables/DataTable/DataTableBindingManager.ts
index 799bb1b70..aaaea7a57 100644
--- a/src/Explorer/Tables/DataTable/DataTableBindingManager.ts
+++ b/src/Explorer/Tables/DataTable/DataTableBindingManager.ts
@@ -1,15 +1,14 @@
 import * as ko from "knockout";
 import * as _ from "underscore";
 
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import * as Constants from "../Constants";
-import * as ViewModels from "../../../Contracts/ViewModels";
+import * as Entities from "../Entities";
+import * as Utilities from "../Utilities";
 import * as DataTableBuilder from "./DataTableBuilder";
 import DataTableOperationManager from "./DataTableOperationManager";
 import * as DataTableOperations from "./DataTableOperations";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import TableEntityListViewModel from "./TableEntityListViewModel";
-import * as Utilities from "../Utilities";
-import * as Entities from "../Entities";
 
 /**
  * Custom binding manager of datatable
@@ -42,6 +41,10 @@ function bindDataTable(element: any, valueAccessor: any, allBindings: any, viewM
   createDataTable(0, tableEntityListViewModel, queryTablesTab); // Fake a DataTable to start.
   $(window).resize(updateTableScrollableRegionMetrics);
   operationManager.focusTable(); // Also selects the first row if needed.
+  // Attach the arrow key event handler to the table element
+  $dataTable.on("keydown", (event: JQueryEventObject) => {
+    handlearrowkey(element, valueAccessor, allBindings, viewModel, bindingContext, event);
+  });
 }
 
 function onTableColumnChange(enablePrompt: boolean = true, queryTablesTab: QueryTablesTab) {
@@ -210,6 +213,39 @@ function selectionChanged(element: any, valueAccessor: any, allBindings: any, vi
     });
   //selected = bindingContext.$data.selected();
 }
+function handlearrowkey(
+  element: any,
+  valueAccessor: any,
+  allBindings: any,
+  viewModel: any,
+  bindingContext: any,
+  event: JQueryEventObject
+) {
+  let isUpArrowKey: boolean = event.keyCode === Constants.keyCodes.UpArrow;
+  let isDownArrowKey: boolean = event.keyCode === Constants.keyCodes.DownArrow;
+
+  if (isUpArrowKey || isDownArrowKey) {
+    let $dataTable = $(element);
+    let $selectedRow = $dataTable.find("tr.selected");
+
+    if ($selectedRow.length === 0) {
+      // No row is currently selected, select the first row
+      $selectedRow = $dataTable.find("tr:first");
+      $selectedRow.addClass("selected");
+    } else {
+      let $targetRow = isUpArrowKey ? $selectedRow.prev("tr") : $selectedRow.next("tr");
+
+      if ($targetRow.length > 0) {
+        // Remove the selected class from the current row and add it to the target row
+        $selectedRow.removeClass("selected").attr("tabindex", "-1");
+        $targetRow.addClass("selected").attr("tabindex", "0");
+        $targetRow.focus();
+      }
+    }
+
+    event.preventDefault();
+  }
+}
 
 function dataChanged(element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any) {
   // do nothing for now