Implement multiple cell selection

[hannahblair]

Description

Allows you to select multiple cells in a dataframe. You can also press delete to clear their values.

• If multiple cells are selected, you won't see the cell menu button. It doesn't look great when all the selected cells have the cell menu button visible (see screenshot) and I think it's redundant anyway.

• Shift click to select a group of cells and span the row or column to meet it

• Cmd click to select multiple cells without expanding to the row or column to meet it

• Press delete to clear all the values of the selected cells (see above)

• This prefaces the select all cells in a column/row behaviour which will be in a separate PR.

Closes: #3283

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Testing and Formatting Your Code

1. PRs will only be merged if tests pass on CI. We recommend at least running the backend tests locally, please set up your Gradio environment locally and run the backed tests: bash scripts/run_backend_tests.sh

2. Please run these bash scripts to automatically format your code: bash scripts/format_backend.sh, and (if you made any changes to non-Python files) bash scripts/format_frontend.sh

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/193188eca4d750aaff16ac24ff2ed081c002b476/gradio-5.14.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@193188eca4d750aaff16ac24ff2ed081c002b476#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/193188eca4d750aaff16ac24ff2ed081c002b476/gradio-client-1.10.0.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/193188eca4d750aaff16ac24ff2ed081c002b476/dist/lite.js""></script>

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/dataframe	minor
gradio	minor

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Implement multiple cell selection

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[hannahblair]

Idk why those recordings are slow I am actually clicking faster than that

[abidlabs]

Nice UX improvement @hannahblair! I tested this, and had a few comments:

• I think the multiple selection should also work with the keyboard. i.e. pressing shift+right arrow to also select the next cell on the right
• Speaking of keyboard, I'm pretty certain you could previously navigate between cells in a dataframe using the arrow keys. However, I can't do it in this PR
• After selecting a group of cells, pressing delete has no effect for me. I was testing the matrix_transpose demo:

Screen.Recording.2025-01-29.at.12.05.09.PM.mov

• For me the biggest QoL improvement related to this PR would be if this allowed me to cmd+c copy a range of cells. Right now, we don't support cmd+c copying even a single cell, but if we could allow this as part of this PR or a follow-up PR, that'd be huge!

[hannahblair]

Thanks for reviewing @abidlabs!

• cell selection with shift+arrow keys now works
• navigating between cells using the arrow keys (and checking the text boundaries so as to avoid preventing a clash with the logic to edit text) is quite complicated so I'd prefer to do this in a separate PR so I can isolate the testing for it
• the delete is now fixed - I was actually I actually added logic for backspace instead of the delete button but now I've updated it to apply to both keys
• you can now select cells and cmd+c those values to copy them :)

[abidlabs]

Beautiful! Works great @hannahblair

[Hellwz]

Appreciate for the great work! With this new feature, I'm wondering if I can get which cells are currently selected by the user in Python? For example, implement such a function: the user selects some cells, clicks a button, and the values of these selected cells are increased by 1.