[AdvancedLayouts] Add stretch height to st.dataframe by sfc-gh-lwilby · Pull Request #12632 · streamlit/streamlit

sfc-gh-lwilby · 2025-09-25T15:28:02Z

Describe your changes

Adds a new height="stretch" option to st.dataframe using the Height type system for consistency with other chart elements.

Changes Made:

Added new height functionality: Added height="stretch" parameter support to existing height parameter
Preserved backward compatibility: Existing height="auto" and integer height values still work
Added native chart height support: When height="stretch", dataframe fills its container height

GitHub Issue Link (if applicable)

Implements #12391

Testing Plan

Unit Tests (Python) - New height="stretch" parameter functionality
E2E Tests - Visual height behavior across different values (height="auto", height="stretch", height=400)
Manual testing completed for all height scenarios

Screenshots/Demos:
(E2E test snapshots will show visual differences for height="auto", height="stretch", and height=400)

Additional Notes:

This extends the AdvancedLayouts initiative by adding height="stretch" support to st.dataframe, bringing it in line with other chart elements that support the Height type system.

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

Adds height='stretch' functionality to st.dataframe, allowing it to stretch to fill its container height.

github-actions · 2025-09-25T15:28:16Z

✅ PR preview is ready!

Name	Link
📦 Wheel file	https://core-previews.s3-us-west-2.amazonaws.com/pr-12632/streamlit-1.50.0-py3-none-any.whl
📦 `@streamlit/component-v2-lib`	Download from artifacts
🕹️ Preview app	pr-12632.streamlit.app (☁️ Deploy here if not accessible)

snyk-io · 2025-09-25T15:28:18Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Licenses	0	0	0	0	0 issues
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

sfc-gh-lwilby · 2025-09-30T18:03:57Z

...right/__snapshots__/linux/st_dataframe_input_data_test/st_dataframe-input_data_8[webkit].png

This was not expected, but the difference is not visible to me so I don't think it indicates a style change that we would consider a regression.

sfc-gh-lwilby · 2025-09-30T18:05:22Z

...layouts_container_directions_fullscreen_elements-dataframe-fullscreen_expanded[chromium].png

This change was not intended, but I think it seems OK cc @lukasmasuch in case having the dataframe in the center is a deliberate style choice.

I saw this while doing some testing locally and it seems strange having the dataframe centered in the page. I think this is a good change.

Yeah, it seems okay. But I'm not sure what I would favour. Do you know why this change happened?

It's because of this change, which we need to make sure the inner dataframe fills the StyledElementContainer in stretch height.

Copilot

Pull Request Overview

This PR adds a new height="stretch" option to st.dataframe that allows dataframes to fill their container height, implementing advanced layouts functionality to bring dataframes in line with other chart elements using the Height type system.

Added height="stretch" parameter support with backward compatibility for existing height values
Implemented flexbox-based height stretching logic that works within containers but falls back to default behavior at root level
Added comprehensive test coverage for the new stretch height functionality

Reviewed Changes

Copilot reviewed 15 out of 25 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
lib/streamlit/elements/arrow.py	Updated dataframe function signatures to accept HeightWithoutContent type and removed allow_stretch=False restriction
lib/tests/streamlit/elements/arrow_dataframe_dimensions_test.py	Added test case for height="stretch" configuration
frontend/lib/src/components/widgets/DataFrame/styled-components.ts	Added minHeight prop and updated styling for stretch height support
frontend/lib/src/components/widgets/DataFrame/hooks/useTableSizer.ts	Added stretch height logic with container measurement and root detection
frontend/lib/src/components/widgets/DataFrame/arrowUtils.ts	Added shouldUseStretchHeight helper function
frontend/lib/src/components/widgets/DataFrame/arrowUtils.test.ts	Added comprehensive tests for shouldUseStretchHeight function
frontend/lib/src/components/widgets/DataFrame/DataFrame.tsx	Integrated container height measurement and root context for stretch behavior
frontend/lib/src/components/core/Layout/FlexContext.tsx	Added isInRoot flag to track root-level positioning
frontend/lib/src/components/core/Block/Block.tsx	Passed isRoot prop to FlexContextProvider
frontend/app/src/components/AppView/AppView.tsx	Set isRoot=true for top-level app container
frontend/lib/src/test_util.tsx	Added isInRoot=false to test context
e2e_playwright/st_dataframe_dimensions.py	Added test scenarios for height="stretch" functionality
e2e_playwright/st_dataframe_dimensions_test.py	Updated test expectations and added stretch height snapshot test
e2e_playwright/st_layouts_container_various_elements.py	Added vertical stretch height container test case
e2e_playwright/st_layouts_container_various_elements_test.py	Added test key to snapshot exclusion list

frontend/lib/src/components/widgets/DataFrame/hooks/useTableSizer.ts

lukasmasuch · 2025-10-07T17:14:46Z

frontend/lib/src/components/widgets/DataFrame/arrowUtils.ts

+/**
+ * Helper function to determine if the element is configured to use stretch height.
+ */
+export function shouldUseStretchHeight(


I think the arrowUtils might not be the best place for the width-related utils. It's more intended to focus on everything related to the arrow data format. Since the methods only seem to be used within useTabelSizer, maybe it's better to just move them into the useTabelSizer.ts file.

There are already a few other functions in arrowUtils for dimensions, to keep them all together I have moved them into a dimensionsUtils. Let me know if you don't like this grouping though.

lukasmasuch · 2025-10-07T17:22:42Z

frontend/lib/src/components/widgets/DataFrame/hooks/useTableSizer.ts

+    useStretchHeight &&
+    measuredContainerHeight &&
+    measuredContainerHeight > 0 &&
+    !isInRoot


question: Whats the reason for isInRoot here? Can you add a comment here explaining why it should be ignore in root?

And to simplify a bit, could we just do const useStretchHeight = shouldUseStretchHeight(heightConfig) && !isInRoot above and remove the isInRoot uses below?

Yes, we can simplify this, updated.

I added more details on the !isInRoot. This is because if we add a height=100% here in the main container where there is no fixed height inclosing container, the dataframe ends up collapsed to the minimum height. So we use auto mode instead. Stretch height in the main container doesn't really make sense anyways since there is nothing to stretch to. If they want the dataframe to be full height that would be height="content". There are more details in the slack thread.

And how is the dataframe shown if its wrapped in a basic container:

st.container().dataframe(...)

Also with auto?

Yes, the default for the dataframe height is auto and for st.container the default height is "content" so your example would look the same as dataframe in the root container if the user doesn't configure any height settings.

github-actions · 2025-10-10T15:53:27Z

📈 Frontend coverage change detected

The frontend unit test (vitest) coverage has increased by 0.0200%

Current PR: 84.8000% (48134 lines, 7313 missed)
Latest develop: 84.7800% (48061 lines, 7313 missed)

✅ Coverage change is within normal range.

📊 View detailed coverage comparison

lukasmasuch · 2025-10-15T07:07:47Z

lib/streamlit/elements/arrow.py

        data: Data = None,
        width: Width = "stretch",
-        height: int | Literal["auto"] = "auto",
+        height: HeightWithoutContent | Literal["auto"] = "auto",


"stretch" probably also needs to be added to the docstring? And I think you can directly add this to data_editor API as well since it's using the exact same frontend. implementation

lukasmasuch

LGTM 👍 but I think we can add this to data_editor as well without adding additional e2e tests, just some unit tests (since it uses the exact same frontend component). That's why there is only a dimension test for st.dataframe.

Add height='stretch' support to st.dataframe

8828196

Adds height='stretch' functionality to st.dataframe, allowing it to stretch to fill its container height.

sfc-gh-lwilby added security-assessment-completed change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Sep 25, 2025

sfc-gh-lwilby added 9 commits September 26, 2025 17:55

fix sharing with multiple elements

81cf3fc

update snapshots

d944218

fix types

2127db9

use default auto height when in the root AppView container

a880153

fix count

6bf1dd3

update test_util

33dc998

stretch height in stretch container; fix e2e test

740850e

fix e2e value

fa755ca

update snapshots

0cb20a6

sfc-gh-lwilby commented Sep 30, 2025

View reviewed changes

sfc-gh-lwilby changed the title ~~[WIP][AdvancedLayouts] Add stretch height to st.dataframe~~ [AdvancedLayouts] Add stretch height to st.dataframe Oct 3, 2025

sfc-gh-lwilby marked this pull request as ready for review October 3, 2025 15:03

sfc-gh-lmasuch requested a review from Copilot October 7, 2025 17:09

Copilot AI reviewed Oct 7, 2025

View reviewed changes

lukasmasuch reviewed Oct 7, 2025

View reviewed changes

sfc-gh-lwilby added 3 commits October 9, 2025 17:08

PR feedback

9735abe

update minimum height to 3 rows

4225f75

make minimum height larger for stretch height dataframes

4c52c9f

sfc-gh-lwilby added 2 commits October 10, 2025 18:10

update snapshots

0ba52d0

update test expectation

5318938

sfc-gh-lwilby requested a review from lukasmasuch October 10, 2025 19:18

lukasmasuch reviewed Oct 15, 2025

View reviewed changes

lukasmasuch approved these changes Oct 15, 2025

View reviewed changes

sfc-gh-lwilby added 2 commits October 15, 2025 19:56

Add stretch height support to data_editor

4972a00

Merge branch 'develop' into feature/dataframe-height

adc6b11

sfc-gh-lwilby merged commit bc42152 into develop Oct 16, 2025
38 checks passed

sfc-gh-lwilby deleted the feature/dataframe-height branch October 16, 2025 18:05

Conversation

sfc-gh-lwilby commented Sep 25, 2025

Describe your changes

GitHub Issue Link (if applicable)

Testing Plan

Uh oh!

github-actions bot commented Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR preview is ready!

Uh oh!

snyk-io bot commented Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📈 Frontend coverage change detected

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lukasmasuch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Sep 25, 2025 •

edited

Loading

snyk-io bot commented Sep 25, 2025 •

edited

Loading

github-actions bot commented Oct 10, 2025 •

edited

Loading