Allow sorting by multiple columns in dataframe

[hannahblair]

Description

Adds the ability to sort by up to three columns.

• Shows the priority sort after more than one is selected
• Also updates the sort buttons for better accessibility
• The location of the priority # was pretty tricky. An alternative is to add another button to the Toolbar above the dataframe and allow you to select the columns to sort by -> logic moved to cell menu

Closes: #4981

🎯 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/f726481dce358d07da18a4223793529a357792fb/gradio-5.20.1-py3-none-any.whl

Install Gradio Python Client from this PR

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

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/f726481dce358d07da18a4223793529a357792fb/gradio-client-1.13.1.tgz

Use Lite from this PR

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

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/atoms	minor
@gradio/core	minor
@gradio/dataframe	minor
gradio	minor

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

With the following changelog entry.

Allow sorting by multiple columns in 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.

[abidlabs]

UI looks good to me! Is this completley ready for review @hannahblair? Perhaps I'm doing something wrong but I'm not seeing the sorting work reliably in demo/matrix_transpose:

Screen.Recording.2025-03-11.at.7.45.26.AM.mov

• I would have expected that clicking on a sort arrow immediately turns it orange. But now it seems you have to click it twice to turn it orange. Is the idea that the orange signifies that the column sort is now locked? I think we should keep the single-click = orange, and then if you click on it again, the "1" icon should appear
• As you can see in the video, sometimes I would click on a column sort twice, get the orange highlighting, but then when I would click on another column, the first column sort would disappear. The behavior was inconsistent. Edit: perhaps this is because I'm missing the sort arrow when clicking on the second column. Perhaps we can increase the target area a bit?
• I believe the numbering is backwards -- the first column that is sorted should retain the "1" icon, the second should have the "2" icon, and so on. Right now, the final column you click has the "1" icon, etc.

[hannahblair]

@abidlabs can you give it another spin? think those points are addressed now.

[abidlabs]

Nice @hannahblair! Yes all of those points are addressed, and the PR overall looks good to me. Just a couple of minor suggestions:

• While I really appreciate that the sort icons are easier to click on now, for dataframes with many columns, the sort icons can appear crowded. What if we only showed the sort icons when a user hovers over the header of a column or if that column has a sort applied?

• It seems that the sorts are not reset anymore when the dataframe value is reset. I think they should be:

Screen.Recording.2025-03-11.at.8.42.23.AM.mov

[abidlabs]

nice @hannahblair lgtm with a couple of minor things mentioned above!

[abidlabs]

Nice @hannahblair the UI looks really great!