Add `border` parameter to `st.table` by jrieke · Pull Request #11796 · streamlit/streamlit

jrieke · 2025-06-27T13:00:58Z

Describe your changes

Adds a border parameter to st.table, which allows creating different table styles:

Demo app to show it in combination with other st.table features:

GitHub Issue Link (if applicable)

Closes #11795

Testing Plan

Unit Tests (JS and/or Python) ✅
E2E Tests ✅

Contribution License Agreement

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

snyk-io · 2025-06-27T13:01:14Z

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

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

github-actions · 2025-06-27T13:01:17Z

✅ PR preview is ready!

Name	Link
📦 Wheel file	https://core-previews.s3-us-west-2.amazonaws.com/pr-11796/streamlit-1.48.1-py3-none-any.whl
🕹️ Preview app	pr-11796.streamlit.app (☁️ Deploy here if not accessible)

frontend/lib/src/components/elements/ArrowTable/ArrowTable.test.tsx

lukasmasuch · 2025-06-27T13:40:26Z

proto/streamlit/proto/Arrow.proto

+  // Whether to show borders around the table and between cells
+  bool border = 14;


It's very annoying/confusing that dataframe, data editor, table, charts, etc, are all reusing this arrow proto message. I think we need to get to a better solution here before adding a lot of new parameters...

Have been planning to think about a good solution for this. But the main problem is the backwards compatibility that makes it nearly impossible to do any reasonable change here.

But I'm hoping that we can soon scrape the backwards compatibility (with SiS vnext) and finally do a real refactoring of our protos.

Hm damn. So no way to move forward with this PR before we do that refactoring?

Hmm, yeah I think we can move forward. But maybe add some comments that its table only prop.

jrieke · 2025-06-27T21:18:33Z

frontend/lib/src/components/elements/ArrowTable/ArrowTable.test.tsx

    ).toBeInTheDocument()
  })
+
+  it("renders with all borders when border=true", () => {


Not sure if we need so many frontend tests here or if it's better to just have the e2e snapshot tests...

My personal preference is to have e2e tests for style aspects. But probably fine to leave those in.

jrieke · 2025-06-27T23:29:07Z

lib/streamlit/elements/arrow.py

        Examples
        --------
-        **Example 1: Display a simple dataframe as a static table**
+        **Example 1: Display a confusion matrix**


Note that I updated the two examples here to show some more real-world use cases for st.table. I think this is important so we differentiate it from st.dataframe. @sfc-gh-dmatthews your call whether we should edit something here. We also need to update the demo apps.

I'd also love to add a 3rd example with border=None that shows how you can use a borderless table for "layout" purposes (e.g. to show some metric names on the left and values on the right side), but I think we first need hide_index and hide_header to make that look good (and ideally hide both by default if there's no information in the index/header), so I left it out for now.

This is what the 2 examples look like:

lib/streamlit/elements/arrow.py

lukasmasuch · 2025-07-01T00:04:37Z

frontend/lib/src/dataframes/Quiver.ts

+  /** Whether to show borders around the table and between cells. */
+  private readonly _border: Arrow.BorderMode
+


I don't think we want to pass this info through quiver, since quiver should only deal with the arrow data. Instead, it would be better to pass in the full element the same way as its done with the dataframe here:

streamlit/frontend/lib/src/components/core/Block/ElementNodeRenderer.tsx

Lines 417 to 418 in 2360acc

element={arrowProto}

data={node.quiverElement}

which needs a bit refactoring by moving the current element prop to data and adding a new element prop that has the full proto message.

✅ Done, I refactored it so it doesn't use Quiver anymore. I also cross-checked with the dataframe implementation that the refactored part uses the same structure but would be great if you could give this another quick look.

lukasmasuch · 2025-07-01T00:17:29Z

frontend/lib/src/components/elements/ArrowTable/styled-components.ts

-  borderRadius: theme.radii.default,
-  overflow: "auto",
-}))
+export const StyledTableBorder = styled.div<{ $border: Arrow.BorderMode }>(


Was there a specific reason why you used $ as a prefix? Did the browser complain? I believe it's to prevent the property from being forwarded to an HTML property with the same name.

✅ I don't remember anymore but I changed everything to use borderMode / border_mode now (except for the public Python API), then we don't run into these conflicts + it's more consistent with the ArrowProto.BorderMode type + it's more similar to what we do for selection mode / editing mode.

lukasmasuch

Overall LGTM, but the aspect with how the border info is passed in needs a change.

lib/streamlit/elements/arrow.py

Copilot

Pull Request Overview

This PR adds a border parameter to st.table that allows users to control how table borders are displayed. The parameter accepts True (all borders), False (no borders), or "horizontal" (only horizontal borders between rows).

Adds new BorderMode enum to the Arrow protobuf with three values: ALL, NONE, and HORIZONTAL
Implements border parsing and validation logic in the Python backend
Updates frontend components to conditionally render borders and adjust padding/alignment based on the border mode

Reviewed Changes

Copilot reviewed 9 out of 15 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
proto/streamlit/proto/Arrow.proto	Adds BorderMode enum and border_mode field to Arrow message
lib/streamlit/elements/arrow.py	Implements border parameter parsing and adds it to st.table function
lib/tests/streamlit/elements/arrow_table_test.py	Adds unit tests for border parameter validation and proto mapping
frontend/lib/src/components/elements/ArrowTable/ArrowTable.tsx	Updates component to accept and use border mode for rendering logic
frontend/lib/src/components/elements/ArrowTable/ArrowTable.test.tsx	Adds frontend tests for different border modes
frontend/lib/src/components/elements/ArrowTable/styled-components.ts	Implements conditional CSS styling based on border mode
frontend/lib/src/components/core/Block/ElementNodeRenderer.tsx	Updates element renderer to pass Arrow proto to ArrowTable component
e2e_playwright/st_table.py	Adds examples showcasing the new border parameter
e2e_playwright/st_table_test.py	Updates test to account for additional table elements

proto/streamlit/proto/Arrow.proto

lukasmasuch

LGTM 👍 a couple of comments

lib/streamlit/elements/arrow.py

lib/tests/streamlit/elements/arrow_table_test.py

frontend/lib/src/components/elements/ArrowTable/styled-components.ts

lib/streamlit/elements/arrow.py

Add border parameter to st.table

44a5897

Add tests

e8a8e58

github-advanced-security bot found potential problems Jun 27, 2025

View reviewed changes

frontend/lib/src/components/elements/ArrowTable/ArrowTable.test.tsx Fixed Show fixed Hide fixed

jrieke requested a review from Copilot June 27, 2025 13:18

This comment was marked as outdated.

Sign in to view

Remove unused variable

9e91be7

jrieke added security-assessment-completed impact:users PR changes affect end users change:other PR contains other type of change change:feature PR contains new feature or enhancement implementation and removed change:other PR contains other type of change labels Jun 27, 2025

Simplify e2e test

f22eafb

lukasmasuch reviewed Jun 27, 2025

View reviewed changes

jrieke added 14 commits June 27, 2025 15:45

Add horizontal border

c8a72f6

Do not show border below last row

2d56953

Align table headers with cell values if there are no vertical borders

84edfe7

Add extra space between columns

40861e1

Update spacing to lg

31c6617

Adapt paddings

18a218e

Typing

d047c19

Make border mode an enum

3b08183

Update e2e test

05de01b

Update Python test

45ccfb2

Update frontend tests

91200f5

Make frontend tests more robust

852aad7

Comments

2e04879

Comment

c3edb80

jrieke commented Jun 27, 2025

View reviewed changes

This comment was marked as outdated.

Sign in to view

jrieke added 3 commits June 28, 2025 00:34

Add python test for border=true

33a289e

Comment

38ea6b9

Update docstring examples

20f5f29

jrieke commented Jun 27, 2025

View reviewed changes

jrieke marked this pull request as ready for review June 27, 2025 23:31

jrieke requested a review from a team as a code owner June 27, 2025 23:31

graphite-app bot reviewed Jun 27, 2025

View reviewed changes

lib/streamlit/elements/arrow.py Show resolved Hide resolved

jrieke mentioned this pull request Jun 30, 2025

Borderless st.table #11795

Closed

2 tasks

lukasmasuch reviewed Jul 1, 2025

View reviewed changes

jrieke added 2 commits August 26, 2025 22:47

Merge branch 'develop' into feature/borderless-table

09ad13e

Don't pass border through quiver

30ae685

graphite-app bot reviewed Aug 26, 2025

View reviewed changes

lib/streamlit/elements/arrow.py Show resolved Hide resolved

Change border to border_mode/borderMode internally

24173db

jrieke requested a review from Copilot August 26, 2025 21:38

Copilot AI reviewed Aug 26, 2025

View reviewed changes

proto/streamlit/proto/Arrow.proto Show resolved Hide resolved

lukasmasuch approved these changes Aug 26, 2025

View reviewed changes

Use StreamlitValueError

852acd0

graphite-app bot reviewed Aug 27, 2025

View reviewed changes

lib/streamlit/elements/arrow.py Show resolved Hide resolved

jrieke added 4 commits August 27, 2025 19:03

Fix tests

fc19109

Make test parameterized

1e8578d

Use first-of-type instead of first-child

ab9ea20

Fix test parametrization

c965019

graphite-app bot reviewed Aug 27, 2025

View reviewed changes

lib/streamlit/elements/arrow.py Show resolved Hide resolved

jrieke enabled auto-merge (squash) August 27, 2025 17:52

sfc-gh-lmasuch approved these changes Aug 27, 2025

View reviewed changes

jrieke merged commit 2087ea1 into develop Aug 27, 2025
37 checks passed

jrieke deleted the feature/borderless-table branch August 27, 2025 19:29

		// Whether to show borders around the table and between cells
		bool border = 14;

		/** Whether to show borders around the table and between cells. */
		private readonly _border: Arrow.BorderMode

Conversation

jrieke commented Jun 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

GitHub Issue Link (if applicable)

Testing Plan

Uh oh!

snyk-io bot commented Jun 27, 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!

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

Uh oh!

✅ PR preview is ready!

Uh oh!

Uh oh!

This comment was marked as outdated.

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!

This comment was marked as outdated.

Uh oh!

jrieke Jun 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

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!

lukasmasuch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

lukasmasuch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jrieke commented Jun 27, 2025 •

edited

Loading

snyk-io bot commented Jun 27, 2025 •

edited

Loading

github-actions bot commented Jun 27, 2025 •

edited

Loading

jrieke Jun 27, 2025 •

edited

Loading