Fixes cell-selection logic in Table.svelte
#10646
Conversation
🪼 branch checks and previews
Install Gradio from this PR pip install https://gradio-pypi-previews.s3.amazonaws.com/179482e343bf0b77edb8357285ccdf8adc7a8e25/gradio-5.17.0-py3-none-any.whlInstall Gradio Python Client from this PR pip install "gradio-client @ git+https://github.com/gradio-app/gradio@179482e343bf0b77edb8357285ccdf8adc7a8e25#subdirectory=client/python"Install Gradio JS Client from this PR npm install https://gradio-npm-previews.s3.amazonaws.com/179482e343bf0b77edb8357285ccdf8adc7a8e25/gradio-client-1.12.0.tgzUse Lite from this PR <script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/179482e343bf0b77edb8357285ccdf8adc7a8e25/dist/lite.js""></script> |
🦄 change detectedThis Pull Request includes changes to the following packages.
With the following changelog entry.
Maintainers or the PR author can modify the PR title to modify this entry.
|
| @@ -1,5 +1,5 @@ | |||
| --- | |||
| "gradio": minor | |||
| "gradio": patch | |||
There was a problem hiding this comment.
Unrelated changeset fix
| @@ -263,6 +263,7 @@ | |||
| switch (event.key) { | |||
| case "ArrowDown": | |||
| selected = [0, selected_header]; | |||
| selected_cells = [[0, selected_header]]; | |||
There was a problem hiding this comment.
There was an issue where if you were in the topmost row and you pressed the up key, it would keep the topmost cell selected while also selecting the header cell. These arrow-related changes fix that while also allowing you to go "back down" from the header cell to the cell value.
Screen.Recording.2025-02-20.at.10.51.57.PM.mov
There was a problem hiding this comment.
thanks for the extra context!
| function handle_header_click(event: MouseEvent, col: number): void { | ||
| if (event.target instanceof HTMLAnchorElement) { | ||
| return; | ||
| } | ||
|
|
||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
|
|
||
| if (!editable) return; | ||
|
|
||
| clear_on_focus = false; | ||
| active_cell_menu = null; | ||
| active_header_menu = null; | ||
| selected = false; | ||
| selected_cells = []; | ||
| selected_header = col; | ||
| header_edit = col; | ||
|
|
||
| parent.focus(); | ||
| } | ||
| </script> |
There was a problem hiding this comment.
At some point, we lost the ability to edit the header of cells.
There was a problem hiding this comment.
dang. i guess we didn't have a story for that
| <SortIcon | ||
| direction={sort_by === i ? sort_direction : null} | ||
| on:sort={({ detail }) => handle_sort(i, detail)} | ||
| {i18n} | ||
| /> |
There was a problem hiding this comment.
Hides the sort icon a when header cell is being edited
|
One change I made was that when you use the arrow keys to navigate, the cell you navigate to is not automatically editable now. This allows you to quickly navigate through many cells using your keyboard: Screen.Recording.2025-02-20.at.10.56.12.PM.mov |
nooooo |
this makes sense! feels like a better UX.
tested and looks good to me! |
|
Thanks @hannahblair! I'll go ahead and merge this in. I believe our plan should restart in a couple of days, right? If not, we can upgrade |
Makes a few small fixes to cell-selection logic, see inline comments below: