migrate dataframe to svelte 5

[pngwn]

Description

• Migrates Dataframe component to svelte 5 syntax
• migrates to a third party table and virtualisation library to ease maintenance
• adds a whole load of tests

Closes #12264. Closes #13069.

AI Disclosure

We encourage the use of AI tooling in creating PRs, but the any non-trivial use of AI needs be disclosed. E.g. if you used Claude to write a first draft, you should mention that. Trivial tab-completion doesn't need to be disclosed. You should self-review all PRs, especially if they were generated with AI.

• I fought with claude in a bitter battle to the death for two whole days.
• I did not use AI

[gradio-pr-bot]

🪼 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://huggingface.co/buckets/gradio/pypi-previews/resolve/823aff5a7934d9454d284eb6c9897e3c36e6ecf8/gradio-6.10.0-py3-none-any.whl

Install Gradio Python Client from this PR

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

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/823aff5a7934d9454d284eb6c9897e3c36e6ecf8/gradio-client-2.1.0.tgz

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/dataframe	minor
@self/spa	minor
gradio	minor

---

• migrate dataframe to svelte 5

---

✅ Changeset approved by @pngwn

• Maintainers can remove approval by unchecking this checkbox.

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.

[Copilot]

Pull request overview

Migrates the Dataframe component to Svelte 5 and replaces the prior interim/legacy implementation with a TanStack Table + TanStack Virtual-based implementation, alongside substantial test updates to reflect the new DOM structure and interaction model.

Changes:

• Replace the prior dataframe implementation (and remove @gradio/dataframe-interim) with a new Svelte 5-based dataframe built around TanStack Table + virtualization.
• Add/expand unit and E2E tests for selection, filtering, clipboard, events, and virtualization-driven rendering.
• Introduce new shared utilities/types (filter function, tanstack Svelte adapters, column measurement) and remove now-obsolete legacy utilities/context.

Reviewed changes

Copilot reviewed 61 out of 62 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
package.json	Remove dataframe-interim from dev/build scripts
js/spa/vite.config.ts	Suppress ResizeObserver loop log noise
js/spa/test/mini_leaderboard.spec.ts	Update assertions to new cell-testid structure
js/spa/test/dataframe_events.spec.ts	Update selectors + interactions for virtualized table + dblclick edit
js/spa/test/dataframe_colorful.spec.ts	Update row selectors for virtualized rows
js/dataframe/types.ts	Add shared public types for dataframe props/events
js/dataframe/test/table_utils.test.ts	Refactor tests; add delimiter + data URI blob tests
js/dataframe/test/sort_utils.test.ts	Remove tests for deleted legacy sort utils
js/dataframe/test/selection_utils.test.ts	Add comprehensive unit tests for selection utilities
js/dataframe/test/filter.test.ts	Add unit tests for TanStack filter integration function
js/dataframe/standalone/Index.svelte	Migrate standalone entry to Svelte 5 props/derived syntax
js/dataframe/shared/utils/table_utils.ts	Remove legacy sort/filter table mutations; keep copy/import/export helpers
js/dataframe/shared/utils/sort_utils.ts	Remove legacy sorting utilities
js/dataframe/shared/utils/selection_utils.ts	Minor comment tweak in selection utilities
js/dataframe/shared/utils/menu_utils.ts	Remove legacy menu utilities (replaced by new components)
js/dataframe/shared/utils/keyboard_utils.ts	Remove legacy keyboard handling module
js/dataframe/shared/utils/filter_utils.ts	Remove legacy filter utilities
js/dataframe/shared/utils/filter.ts	Add TanStack-compatible Gradio filter function
js/dataframe/shared/utils/drag_utils.ts	Remove legacy drag-selection utilities
js/dataframe/shared/utils/data_processing.ts	Remove legacy data/header processing helpers
js/dataframe/shared/types.ts	Centralize shared SortDirection/FilterDatatype types
js/dataframe/shared/tanstack/virtual.svelte.ts	Add Svelte 5 reactive wrapper for TanStack Virtualizer
js/dataframe/shared/tanstack/table.svelte.ts	Add Svelte 5 reactive wrapper for TanStack Table
js/dataframe/shared/tanstack/index.ts	Re-export tanstack wrappers + types from a single module
js/dataframe/shared/icons/SortIcon.svelte	Migrate sorting icon component to callback-prop eventing
js/dataframe/shared/icons/SortArrowUp.svelte	Remove legacy sort arrow icon
js/dataframe/shared/icons/SortArrowDown.svelte	Remove legacy sort arrow icon
js/dataframe/shared/icons/SelectionButtons.svelte	Migrate selection buttons to Svelte 5 props/derived syntax
js/dataframe/shared/icons/FilterIcon.svelte	Remove legacy filter icon component
js/dataframe/shared/context/dataframe_context.ts	Remove legacy dataframe context/store architecture
js/dataframe/shared/column_measurement.svelte.ts	Add column measurement helper for absolute-positioned body cells
js/dataframe/shared/VirtualTable.svelte	Remove legacy virtual table implementation
js/dataframe/shared/Toolbar.svelte	Migrate toolbar to Svelte 5 props + callback-style events
js/dataframe/shared/TableHeader.svelte	Remove legacy header component
js/dataframe/shared/TableCell.svelte	Remove legacy cell component
js/dataframe/shared/RowNumber.svelte	Migrate row number component to Svelte 5 props style
js/dataframe/shared/HeaderCell.svelte	Add new header cell component for the new table
js/dataframe/shared/FilterMenu.svelte	Migrate filter menu to Svelte 5 props/state style
js/dataframe/shared/EmptyRowButton.svelte	Migrate add-row button to Svelte 5 props style
js/dataframe/shared/EditableCell.svelte	Migrate editable cell to Svelte 5 props + callback events
js/dataframe/shared/DataCell.svelte	Add new body cell component for the new table
js/dataframe/shared/CellMenuIcons.svelte	Migrate menu icons component to Svelte 5 props style
js/dataframe/shared/CellMenuButton.svelte	Migrate menu button component to Svelte 5 props style
js/dataframe/shared/CellMenu.svelte	Migrate cell menu to Svelte 5 props/state/derived style
js/dataframe/shared/BooleanCell.svelte	Migrate boolean cell to Svelte 5 props/bindable pattern
js/dataframe/package.json	Add TanStack dependencies; remove dataframe-interim dev dependency
js/dataframe/Index.svelte	Replace interim wrapper with new Svelte 5 dataframe implementation + wiring
js/dataframe/Dataframe.test.ts	Add extensive unit tests for rendering/editing/selection/sort/filter/events/copy
js/dataframe-interim/vite.config.ts	Delete interim package build config
js/dataframe-interim/package.json	Delete interim package manifest
js/dataframe-interim/Standalone.stories.svelte	Delete interim Storybook stories
js/dataframe-interim/README.md	Delete interim package README
js/dataframe-interim/Index.svelte	Delete interim entry component
js/dataframe-interim/Example.svelte	Delete interim example component
js/dataframe-interim/Dataframe.test.skip.ts	Delete interim skipped test file
demo/dataframe_events/run.py	Expand tall dataframe demo dataset for virtualization testing
demo/dataframe_events/run.ipynb	Sync notebook demo with expanded tall dataset
.changeset/legal-signs-grow.md	Release notes for dataframe migration (minor bump)

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[freddyaboulton]

Full disclosure I did not review every line of the diff lol. I focused on testing the component. This works great based on all of my tests and I think delegating to an external table for the virtualization, sorting, filtering is great. I found some regressions that are mainly visual:

UI looks a bit off

Specifically, the table is wrapped in a container and the cell borders between the header row and the body don't align

This is this PR compared to main on the mini_leaderboard demo

The show_search parameter shows copy + fullscreen button

On main, it just shows the search bar. This is on the dataframe_custom_styling demo. Also, the full screen button does not do anything.

This PR:

Main:

Table Sizing Logic is Off

Check the dataframe_datatype demo. Also when selecting a cell, we've lost the select row/column arrows

This PR:

Main:

Static Columns Use Emoji

The icon on main looks nice. Test with dataframe_events demo

[pngwn]

I think i've addressed everything now @freddyaboulton .

[freddyaboulton]

Awesome work @pngwn ! Much needed. Only thing that stood out to me is that the column dtypes do not react to changes in the columns. For example, in mini_leaderboard demo if you hide the T column, the model name is rendered in plain text instead of as a markdown link

Also, would be nice if there was some feedback when the copy button is clicked. In the chatbot for example, it fades into a checkmark and then back to the copy button.

[pngwn]

Oh that's pretty weird. I'll take a look.

I'll use the chatbot pattern for the copy UX.