Skip to content

Commit ffe3d52

Browse files
hannahblairabidlabs
hannahblair
and
abidlabs
authored
[Blog post] - Gradio’s dataframe has been upgraded! (#2769)
* add gradio-dataframe-update.md * Update gradio-dataframe-update.md * Create thumbnail.png * Update and rename gradio-dataframe-update.md to gradio-dataframe-upgrade.md * Update _blog.yml * Delete assets/gradio-dataframe-update directory * Create thumbnail.png * Delete assets/gradio-dataframe-upgrade directory * Create gradio-dataframe-upgrade * add thumbnail * Update _blog.yml * Update mp4s with hf repo links * Update gradio-dataframe-upgrade.md * Update gradio-dataframe-upgrade.md * Update gradio-dataframe-upgrade.md * Update gradio-dataframe-upgrade.md * Update gradio-dataframe-upgrade.md * Apply suggestions from code review Co-authored-by: Abubakar Abid <[email protected]> * Update gradio-dataframe-upgrade.md * Update gradio-dataframe-upgrade.md * Update _blog.yml --------- Co-authored-by: Abubakar Abid <[email protected]>
1 parent a4176ba commit ffe3d52

File tree

3 files changed

+156
-0
lines changed

3 files changed

+156
-0
lines changed

‎_blog.yml

+11
Original file line numberDiff line numberDiff line change
@@ -5739,3 +5739,14 @@
57395739
- guide
57405740
- cloud
57415741
- inference
5742+
5743+
- local: gradio-dataframe-upgrade
5744+
title: "Introducing Gradio's new Dataframe!"
5745+
author: hmb
5746+
thumbnail: /blog/assets/gradio-dataframe-upgrade/thumbnail.png
5747+
date: March 24, 2025
5748+
tags:
5749+
- gradio
5750+
- open-source
5751+
- guide
5752+

‎assets/gradio-dataframe-update/thumbnail.png

72.5 KB
Loading

‎gradio-dataframe-upgrade.md

+145
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
---
2+
title: "Introducing Gradio's new Dataframe!"
3+
thumbnail: /blog/assets/gradio-dataframe-upgrade/thumbnail.png
4+
authors:
5+
- user: hmb
6+
- user: abidlabs
7+
---
8+
9+
# Introducing Gradio's new Dataframe!
10+
11+
Gradio’s `gr.Dataframe` component is one of our most popular components, we've seen it used in a variety of awesome apps, like leaderboards, dashboards, and interactive visualisations. Although we hadn't made any changes to the dataframe in quite some time, our backlog of issues had been growing, and some improvements had been in demand for a while.
12+
13+
Well — we’re now super excited to release a host of new updates to Gradio’s dataframe component. Over the last 6 weeks, we’ve closed over 70 dataframe issues - including bugs, improvements and enhancements.
14+
15+
### **1. Multi-Cell Selection**
16+
17+
You can select multiple cells at once! Copy or delete values across your selection with ease.
18+
19+
<video width="600" controls autoplay loop>
20+
<source src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-dataframe-upgrade/multicell.mp4">
21+
</video>
22+
23+
### 2. Row Numbers & **Column Pinning**
24+
25+
Add row number columns and keep critical columns in view while navigating wide datasets using the `pinned_columns` parameter. No more losing track of what you're looking at!
26+
27+
<video width="600" controls autoplay loop>
28+
<source src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-dataframe-upgrade/rownumbers.mp4">
29+
</video>
30+
31+
### **3. Copy Button and Full Screen Button**
32+
33+
Easily copy cell values into a comma-separated format with our new copy button. Need a better view? The full screen button gives you interactivity without distractions and can be enabled with the `show_full_screen` parameter.
34+
35+
<video width="600" controls autoplay loop>
36+
<source src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-dataframe-upgrade/buttons.mp4">
37+
</video>
38+
39+
<video width="600" controls autoplay loop>
40+
<source src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-dataframe-upgrade/buttons2.mp4">
41+
</video>
42+
43+
44+
### 4. Scroll to Top Button
45+
46+
Look at all that data! Now we can just scroll to the top.
47+
48+
<video width="600" controls autoplay loop>
49+
<source src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-dataframe-upgrade/scrolltop.mp4">
50+
</video>
51+
52+
### **5. Accessibility Upgrade and Enhanced Styling**
53+
54+
Improved keyboard navigation makes gr.Dataframe more accessible than ever. You can also take control of your dataframe’s look with a dedicated styler parameter and enhance the user experience of your app.
55+
56+
<video width="600" controls autoplay loop>
57+
<source src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-dataframe-upgrade/a11y.mp4">
58+
</video>
59+
60+
### **6. Row and Column Selection**
61+
62+
Access entire row data in select events for more intuitive interactivity and data manipulation.
63+
64+
<video width="600" controls autoplay loop>
65+
<source src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-dataframe-upgrade/rowcol.mp4">
66+
</video>
67+
68+
### 7. Static Columns
69+
70+
Customise the interactivity of your dataframe by specifying non-editable columns using the `static_columns` parameter.
71+
72+
<video width="600" controls autoplay loop>
73+
<source src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-dataframe-upgrade/static.mp4">
74+
</video>
75+
76+
### **8. Search functionality**
77+
78+
Quickly find the data you need with our powerful search feature by setting the `show_search` parameter to `"search"`.
79+
80+
<video width="600" controls autoplay loop>
81+
<source src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-dataframe-upgrade/searchfun.mp4">
82+
</video>
83+
84+
### **9. Filter functionality**
85+
86+
Narrow down your dataset to focus on exactly what you need with flexible filtering options with `show_search` set to `"filter"`.
87+
88+
<video width="600" controls autoplay loop>
89+
<source src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-dataframe-upgrade/filter.mp4">
90+
</video>
91+
92+
### **10. Improved cell selection**
93+
94+
Experience smoother, more intuitive cell selection that behaves the way you expect.
95+
96+
<video width="600" controls autoplay loop>
97+
<source src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-dataframe-upgrade/cellselect.mp4">
98+
</video>
99+
100+
## What’s next?
101+
102+
With over 70 issues closed, we’ve made huge improvements, but there’s always more for us to work on. Looking ahead, we still have more ideas to implement and we’re excited to keep refining accessibility, performance, and integration. Look out for some cool demos on our socials using the dataframe on Gradio’s [X](https://x.com/gradio).
103+
104+
## Try it yourself!
105+
106+
The updated dataframe is live in the latest Gradio release. Update your installation with `pip install --upgrade gradio`.
107+
108+
<script
109+
type="module"
110+
src="https://gradio.s3-us-west-2.amazonaws.com/5.22.0/gradio.js"
111+
></script>
112+
113+
<gradio-app theme_mode="light" space="hmb/basic-dataframe"></gradio-app>
114+
115+
```python
116+
import gradio as gr
117+
118+
df_headers = ["Name", "Population", "Size (min cm)", "Size (max cm)", "Weight (min kg)", "Weight (max kg)", "Lifespan (min years)", "Lifespan (max years)"]
119+
df_data = [
120+
["Irish Red Fox", 185000, 48, 92, 4.2, 6.8, 3, 5],
121+
["Irish Badger", 95000, 62, 88, 8.5, 13.5, 6, 8],
122+
["Irish Otter", 13500, 58, 98, 5.5, 11.5, 9, 13]
123+
]
124+
125+
with gr.Blocks() as demo:
126+
df = gr.Dataframe(
127+
label="Irish Wildlife",
128+
value=df_data,
129+
headers=df_headers,
130+
interactive=True,
131+
show_search="search",
132+
show_copy_button=True,
133+
show_fullscreen_button=True,
134+
show_row_numbers=True,
135+
pinned_columns=1,
136+
static_columns=[0],
137+
column_widths=["300px"]
138+
)
139+
140+
demo.launch()
141+
```
142+
143+
Check out the [Gradio documentation](https://www.gradio.app/docs/gradio/dataframe) for examples and tutorials to get started with these new features. We’re eager to see what you create! Got thoughts or suggestions? Share them by raising an issue in our [GitHub](https://github.com/gradio-app/gradio) repo.
144+
145+
Happy building!

0 commit comments

Comments
 (0)