Allow freezing columns in `gr.Dataframe` #10561

hannahblair · 2025-02-10T18:34:09Z

Description

Adds a frozen_cols param which freezes up to X number of columns in the dataframe.

Note, It'd be cool to be able to freeze columns at runtime but some design considerations need to be made first.

Closes: #2407

🎯 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.sh
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 · 2025-02-10T18:34:50Z

🪼 branch checks and previews

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

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/215445f3795567f5f23dcdfbdaaf6ff8ff6cc4ca/gradio-5.15.0-py3-none-any.whl

Install Gradio Python Client from this PR

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

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/215445f3795567f5f23dcdfbdaaf6ff8ff6cc4ca/gradio-client-1.11.0.tgz

Use Lite from this PR

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

gradio-pr-bot · 2025-02-10T18:35:01Z

🦄 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.

Allow freezing columns in 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.

…-frozen-cols

hannahblair · 2025-02-10T21:44:53Z

js/dataframe/shared/selection_utils.ts

 	}

 	const cell_rect = cell_el.getBoundingClientRect();
 	const table_rect = table.getBoundingClientRect();
+
+	const col_pos = `${cell_rect.left - table_rect.left + cell_rect.width / 2}px`;


Use the actual cell position from the DOM instead of trying to calculate it from CSS variables. I've changed this logic because when using custom column widths via column_widths, I noticed that the column selection button wasn't positioned properly

hannahblair · 2025-02-10T21:50:46Z

js/dataframe/shared/Table.svelte

@@ -67,6 +67,13 @@
 	export let show_copy_button = false;
 	export let value_is_output = false;
 	export let max_chars: number | undefined = undefined;
+	export let frozen_cols = 0;


main changes here are adding some frozen CSS classes and always freezing the row number column if it's present

…-frozen-cols

abidlabs · 2025-02-10T22:12:42Z

Nice @hannahblair looks really good to me! Just two small issues:

(1) The frozen columns don't have the alternating row shading:

(2) It looks like the width logic has been affected, you'll notice that the first three columns are much wider than the other columns.

Repro:

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, frozen_cols=4),
    "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()

hannahblair · 2025-02-10T22:50:04Z

@abidlabs both issues addressed! the non alternating background was intentional for frozen columns but I think it's fine without the design change actually. I may readdress the UX when I implement custom frozen cols set by users

edit: actually the widths still arent working ⌛

This reverts commit 4fb9328.

pngwn · 2025-02-11T21:14:19Z

Two quick things. Can we change this to 'static' or 'pinned' or 'fixed', frozen doesn't really make much sense to me.

Another thing is the API, do we need to limit this to the first x columns. Someone might want to pin the second column or the 2nd and 4th, or the last. I think that should be possible. Even if we don't support this right now, if we think we might want to we should use an api that allows for it. A list of column indices for example.

hannahblair · 2025-02-11T21:33:47Z

@pngwn

Two quick things. Can we change this to 'static' or 'pinned' or 'fixed', frozen doesn't really make much sense to me.

Not against this, pinned makes most sense to me.

Someone might want to pin the second column or the 2nd and 4th, or the last. I think that should be possible.

Hmm good point. We could plan to allow for either a number (to indicate up to X cols) or an array of ints which represent the col indices? Should be fairly straightforward but needs a bit more time.

abidlabs · 2025-02-11T21:39:45Z

Not against this, pinned makes most sense to me

+1

Hmm good point. We could plan to allow for either a number (to indicate up to X cols) or an array of ints which represent the col indices? Should be fairly straightforward but needs a bit more time.

Yeah we can support an int for now to represent the first n columns and then allow support for a list when we add support for pinning arbitrary columns

aliabid94 · 2025-02-11T21:39:46Z

Two quick things. Can we change this to 'static' or 'pinned' or 'fixed', frozen doesn't really make much sense to me

FYI "frozen" is actually the term google sheets and excel use.

we need to limit this to the first x columns. Someone might want to pin the second column or the 2nd and 4th, or the last. I think that should be possible.

I've never seen this before, google sheets and excel don't support this either. If we really want to add this, we could support a list of indices later, but I think the current way of just an integer representing the first n columns should be preserved.

freddyaboulton · 2025-02-11T22:01:31Z

Yes I think I prefer frozen as well since that's the term I'm familiar with.

The API looks good and works as I would expect. One thing I noticed (possibly not related to this PR though) is that column_widths prevents you from horizontally scrolling a dataframe at all. See the mini_leaderboard demo.

hannahblair · 2025-02-11T22:06:36Z

@freddyaboulton thanks for testing! yeah column_widths are broken completely atm, I can see what you're seeing in main. we've got issue #8099 open to fix it but I'll note in the issue that you can't even scroll when they're set 😅

This reverts commit a37616d.

This reverts commit f16964d.

aliabid94

LGTM!

hannahblair added 2 commits February 9, 2025 23:36

add frozen col param

21b31e7

ensure row numbers are frozen

6f1ffe7

add changeset

d4d93ca

hannahblair added 3 commits February 10, 2025 18:37

validate frozen cols value

c841c1f

Merge branch 'df-frozen-cols' of github.com:gradio-app/gradio into df…

f1dfac1

…-frozen-cols

format

7010ac7

abidlabs mentioned this pull request Feb 10, 2025

Prevent scrolling when the dataframe cell menu is open #10553

Merged

hannahblair added 6 commits February 10, 2025 19:37

ensure column widths are properly applied

6266fdb

Merge branch 'main' into df-frozen-cols

86531a5

fix chromatic test

315c57d

tweak

d11aa6e

adjust col selection logic

6516703

Merge branch 'main' into df-frozen-cols

f3be31f

hannahblair commented Feb 10, 2025

View reviewed changes

hannahblair marked this pull request as ready for review February 10, 2025 21:47

hannahblair commented Feb 10, 2025

View reviewed changes

abidlabs and others added 3 commits February 10, 2025 13:54

Merge branch 'main' into df-frozen-cols

3065091

fix test

7309f5a

Merge branch 'df-frozen-cols' of github.com:gradio-app/gradio into df…

d55411b

…-frozen-cols

hannahblair added 3 commits February 10, 2025 22:14

rename frozen_cols to frozen_columns

4abb3cc

restore alternating background

9e67ec8

fix widths

d91cdbe

hannahblair added 4 commits February 11, 2025 12:49

change implementation

4fb9328

ensure first col cells can be selected

d87a08f

fix cell selection in col 1

e85c0c0

Revert "change implementation"

ba6314e

This reverts commit 4fb9328.

hannahblair added 2 commits February 11, 2025 18:03

fix widths

8bd81b5

Merge branch 'main' into df-frozen-cols

880cbd1

frozen => pinned

a37616d

hannahblair added 2 commits February 11, 2025 22:07

Revert "frozen => pinned"

f16964d

This reverts commit a37616d.

Revert "Revert "frozen => pinned""

215445f

This reverts commit f16964d.

aliabid94 approved these changes Feb 11, 2025

View reviewed changes

hannahblair merged commit 26494ce into main Feb 11, 2025
23 checks passed

hannahblair deleted the df-frozen-cols branch February 11, 2025 22:29

gradio-pr-bot mentioned this pull request Feb 11, 2025

chore: update versions #10516

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow freezing columns in `gr.Dataframe` #10561

Allow freezing columns in `gr.Dataframe` #10561

hannahblair commented Feb 10, 2025 •

edited

Loading

gradio-pr-bot commented Feb 10, 2025 •

edited

Loading

gradio-pr-bot commented Feb 10, 2025 •

edited

Loading

Something isn't right?

hannahblair Feb 10, 2025 •

edited

Loading

hannahblair Feb 10, 2025

abidlabs commented Feb 10, 2025

hannahblair commented Feb 10, 2025 •

edited

Loading

pngwn commented Feb 11, 2025

hannahblair commented Feb 11, 2025

abidlabs commented Feb 11, 2025

aliabid94 commented Feb 11, 2025

freddyaboulton commented Feb 11, 2025

hannahblair commented Feb 11, 2025

aliabid94 left a comment

Allow freezing columns in gr.Dataframe #10561

Allow freezing columns in gr.Dataframe #10561

Conversation

hannahblair commented Feb 10, 2025 • edited Loading

Description

🎯 PRs Should Target Issues

Testing and Formatting Your Code

gradio-pr-bot commented Feb 10, 2025 • edited Loading

🪼 branch checks and previews

gradio-pr-bot commented Feb 10, 2025 • edited Loading

🦄 change detected

This Pull Request includes changes to the following packages.

With the following changelog entry.

Something isn't right?

hannahblair Feb 10, 2025 • edited Loading

Choose a reason for hiding this comment

hannahblair Feb 10, 2025

Choose a reason for hiding this comment

abidlabs commented Feb 10, 2025

hannahblair commented Feb 10, 2025 • edited Loading

pngwn commented Feb 11, 2025

hannahblair commented Feb 11, 2025

abidlabs commented Feb 11, 2025

aliabid94 commented Feb 11, 2025

freddyaboulton commented Feb 11, 2025

hannahblair commented Feb 11, 2025

aliabid94 left a comment

Choose a reason for hiding this comment

Allow freezing columns in `gr.Dataframe` #10561

Allow freezing columns in `gr.Dataframe` #10561

hannahblair commented Feb 10, 2025 •

edited

Loading

gradio-pr-bot commented Feb 10, 2025 •

edited

Loading

gradio-pr-bot commented Feb 10, 2025 •

edited

Loading

hannahblair Feb 10, 2025 •

edited

Loading

hannahblair commented Feb 10, 2025 •

edited

Loading