Add toolbar with fullscreen button to `gr.Dataframe` #10377
add toolbar with full screen and copy button
🪼 branch checks and previews
| • | Name | Status | URL |
|---|---|---|---|
 |
Spaces |  ready! |
Spaces preview |
  |
Website |  building... |
|
 |
Storybook | ready! |
Storybook preview |
| 🦄 | Changes | detected! |
Details |
Install Gradio from this PR
pip install https://gradio-pypi-previews.s3.amazonaws.com/435757b2341628a816dc6fd694ed300f4c7cf585/gradio-5.12.0-py3-none-any.whlInstall Gradio Python Client from this PR
pip install "gradio-client @ git+https://github.com/gradio-app/gradio@435757b2341628a816dc6fd694ed300f4c7cf585#subdirectory=client/python"Install Gradio JS Client from this PR
npm install https://gradio-npm-previews.s3.amazonaws.com/435757b2341628a816dc6fd694ed300f4c7cf585/gradio-client-1.10.0.tgzUse Lite from this PR
<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/435757b2341628a816dc6fd694ed300f4c7cf585/dist/lite.js""></script>
add changeset
🦄 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.
Add toolbar with fullscreen button to
gr.Dataframe
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.
add params and move toolbar to new file
Merge branch 'df-toolbar' of github.com:gradio-app/gradio into df-too…
remove copy button for now
hannahblair
changed the title
Merge branch 'main' into df-toolbar
add story
Merge branch 'df-toolbar' of github.com:gradio-app/gradio into df-too…
add changeset
test
Merge branch 'df-toolbar' of github.com:gradio-app/gradio into df-too…
tweak
@hannahblair does this PR add the copy button or not? I see the full screen button but not the copy values button:
import numpy as np
import gradio as gr
def transpose(matrix):
return matrix.T
demo = gr.Interface(
transpose,
gr.Dataframe(type="numpy", datatype="number", row_count=5, col_count=3, show_fullscreen_button=True),
"numpy",
examples=[
[np.zeros((3, 3)).tolist()],
[np.ones((2, 2)).tolist()],
[np.random.randint(0, 10, (3, 10)).tolist()],
[np.random.randint(0, 10, (10, 3)).tolist()],
[np.random.randint(0, 10, (10, 10)).tolist()],
],
cache_examples=False
)
if __name__ == "__main__":
demo.launch()
Also I would have expected the full screen icon to be at the same level as the label but its appearing a bit below it^
Merge branch 'main' into df-toolbar
tweak
story fix
Merge branch 'main' into df-toolbar
test
actually do we think it makes sense to add this show_fullscreen_button param to a new toolbar_options dict so it's less cluttered down the line?
actually do we think it makes sense to add this show_fullscreen_button param to a new toolbar_options dict so it's less cluttered down the line?
I was thinking the same, although it'd be inconsistent with other components (e.g. Image has show_download_button and show_fullscreen_button). My thinking is that we have individual parameters for now, but we can refactor this across all of our components in 6.0 with a cleaner api.
tweak
I was thinking the same, although it'd be inconsistent with other components (e.g. Image has show_download_button and show_fullscreen_button). My thinking is that we have individual parameters for now, but we can refactor this across all of our components in 6.0 with a cleaner api.
oki sounds good!
does this PR add the copy button or not? I see the full screen button but not the copy values button:
oop i should've updated the description - i wanted to move the copy button to a new PR
oop i should've updated the description - i wanted to move the copy button to a new PR
sounds good. maybe we should even consider replacing the copy button with a download-as-csv button and instead support much nicer copying of any range of cells directly using cmd-c or through the context menu
Ok then besides the positioning issue above, everything looks as expected
changes
Merge branch 'main' into df-toolbar
changes
Merge branch 'df-toolbar' of github.com:gradio-app/gradio into df-too…
I pushed a change to fix the style tweak as @hannahblair is ooo. I think everything looks good now, but perhaps @pngwn or @aliabid94 can give the fe changes a lookover:
lgtm! Although I feel like the show_fullscreen_button flag should be True by default
Thanks @dawoodkhan82! I considered that but since the button takes up vertical space above the component, that could displace the layouts of Gradio apps that have a dataframe without a label. We could make this change in 6.0 though
Login to write a write a comment.
Description
Closes: #7423
🎯 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
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.shPlease 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