Allow navigating down from header cells, as well as support cmd/ctrl + arrow keys (#10777)

* keyboard

* add changeset

* format

* changes

* s

* changes

* changes

* format

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

Author: abidlabs

.changeset/sharp-teams-start.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": minor
+"gradio": minor
+---
+
+feat:Allow navigating down from header cells, as well as support cmd/ctrl + arrow keys

js/dataframe/shared/context/keyboard_context.ts

@@ -37,7 +37,7 @@ export type KeyboardContext = {
 		end: CellCoordinate
 	) => CellCoordinate[];
 	move_cursor: (
-		key: "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp",
+		event: KeyboardEvent,
 		current_coords: CellCoordinate,
 		data: CellData[][]
 	) => false | CellCoordinate;

js/dataframe/shared/selection_utils.ts

@@ -151,19 +151,39 @@ export function get_next_cell_coordinates(
 }
 
 export function move_cursor(
-	key: "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp",
+	event: KeyboardEvent,
 	current_coords: CellCoordinate,
 	data: CellData[][]
 ): CellCoordinate | false {
+	const key = event.key as "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp";
 	const dir = {
 		ArrowRight: [0, 1],
 		ArrowLeft: [0, -1],
 		ArrowDown: [1, 0],
 		ArrowUp: [-1, 0]
 	}[key];
 
-	const i = current_coords[0] + dir[0];
-	const j = current_coords[1] + dir[1];
+	let i, j;
+	if (event.metaKey || event.ctrlKey) {
+		if (key === "ArrowRight") {
+			i = current_coords[0];
+			j = data[0].length - 1;
+		} else if (key === "ArrowLeft") {
+			i = current_coords[0];
+			j = 0;
+		} else if (key === "ArrowDown") {
+			i = data.length - 1;
+			j = current_coords[1];
+		} else if (key === "ArrowUp") {
+			i = 0;
+			j = current_coords[1];
+		} else {
+			return false;
+		}
+	} else {
+		i = current_coords[0] + dir[0];
+		j = current_coords[1] + dir[1];
+	}
 
 	if (i < 0 && j <= 0) {
 		return false;

js/dataframe/shared/utils/keyboard_utils.ts

@@ -9,12 +9,11 @@ function handle_header_navigation(
 	ctx: KeyboardContext
 ): boolean {
 	if (ctx.selected_header === false || ctx.header_edit !== false) return false;
-
 	switch (event.key) {
 		case "ArrowDown":
+			ctx.df_actions.set_selected_header(false);
 			ctx.df_actions.set_selected([0, ctx.selected_header]);
 			ctx.df_actions.set_selected_cells([[0, ctx.selected_header]]);
-			ctx.df_actions.set_selected_header(false);
 			return true;
 		case "ArrowLeft":
 			ctx.df_actions.set_selected_header(
@@ -88,11 +87,7 @@ function handle_arrow_keys(
 	if (ctx.editing) return false;
 	event.preventDefault();
 
-	const next_coords = ctx.move_cursor(
-		event.key as "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp",
-		[i, j],
-		ctx.data
-	);
+	const next_coords = ctx.move_cursor(event, [i, j], ctx.data);
 	if (next_coords) {
 		if (event.shiftKey) {
 			ctx.df_actions.set_selected_cells(
@@ -195,7 +190,6 @@ async function handle_cell_navigation(
 	ctx: KeyboardContext
 ): Promise<boolean> {
 	if (!ctx.selected) return false;
-
 	if (event.key === "c" && (event.metaKey || event.ctrlKey)) {
 		event.preventDefault();
 		if (ctx.selected_cells.length > 0) {