Skip to content

Migrate ITables Streamlit component to st.components.v2#521

Merged
mwouts merged 16 commits into
mainfrom
copilot/update-itables-to-streamlit-v2
May 16, 2026
Merged

Migrate ITables Streamlit component to st.components.v2#521
mwouts merged 16 commits into
mainfrom
copilot/update-itables-to-streamlit-v2

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 7, 2026

ITables' Streamlit integration was using the v1 custom component API. This migrates it to st.components.v2, which renders inline (no iframe) and uses a cleaner function-based lifecycle.

Frontend (packages/itables_for_streamlit/)

  • Build: Replaced Create React App with esbuild (matching the anywidget package pattern); CSS extracted to src/index.css
  • Dependency: streamlit-component-lib@streamlit/component-v2-lib (types only — v2 runtime is provided by the Streamlit host)
  • API: Rewrote index.tsx from event-based v1 (RENDER_EVENT / setComponentValue / setFrameHeight) to a v2 FrontendRenderer default export that creates the table on mount and returns a cleanup function
const ITableForStreamlit: FrontendRenderer<ITableState, ITableData> = (component) => {
  const { data, parentElement, setStateValue } = component;
  // ... create DataTable, wire select/deselect → setStateValue('selected_rows', ...)
  return () => { dt.destroy(); span.remove(); };
};
export default ITableForStreamlit;

Python (src/itables/streamlit.py)

  • declare_component(name, path=...)components.v2.component(name, js=..., css=..., isolate_styles=False)
  • JS/CSS loaded as inline strings at import time (avoids Streamlit runtime dependency during manifest discovery)
  • isolate_styles=False keeps styles in the main DOM — required for DataTables popups/fixed-header elements that are appended to document.body
  • Arguments now passed via data={"dt_args": ..., "other_args": ...}; return type is BidiComponentResult (dict-like, backwards-compatible access via result["selected_rows"] or result.selected_rows)

Config & Housekeeping

  • pyproject.toml: Added [tool.streamlit.component] manifest entry; updated ensured-targets for the new output filenames
  • apps/streamlit/itables_app.py: Replaced MarshallComponentException (v1-only) with StreamlitAPIException
  • .github/dependabot.yml: Added Dependabot configuration with grouped updates for pip, each npm package directory, and GitHub Actions
  • src/itables/version.py: Bumped version to 2.8.0.dev0
  • docs/changelog.md: Added 2.8.0 (unreleased) entry for this migration
  • pixi.lock: Updated to reflect the new development version

Note on CSS build: The CSS is built without --minify intentionally. Minified single-line CSS containing * selectors is misclassified as a glob pattern by Streamlit's inline-content heuristic, causing registration to fail.

Original prompt

This section details on the original issue you should resolve

<issue_title>Transition ITables' streamlit component to st.components.v2</issue_title>
<issue_description>ITables currently uses streamlit's v1 component, but v2 has shipped. Can we upgrade our component to v2?</issue_description>

<agent_instructions>Our ITable component for Streamlit was developped using Streamlit's custom component in v1. Now a version 2 is available.

A template for custom v2 components is available here: https://github.com/streamlit/component-template

The options offered by V2 are compared to V1 on this page: https://docs.streamlit.io/develop/api-reference/custom-components</agent_instructions>

Comments on the Issue (you are @copilot in this section)


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Mar 7, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.28%. Comparing base (413bb74) to head (6b998a6).

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #521      +/-   ##
==========================================
+ Coverage   94.26%   94.28%   +0.01%     
==========================================
  Files          47       47              
  Lines        2617     2623       +6     
==========================================
+ Hits         2467     2473       +6     
  Misses        150      150              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 7, 2026

Thank you for making this pull request.

Did you know? You can try it on Binder: Binder:lab.

Also, the version of ITables developed in this PR is available as a wheel artifact 📦 for easy installation.
Download it here, unzip it and then run pip install itables-xxx.whl in the unzipped directory.

A conda package is also available for easy installation:
Download it here, and then run conda install itables-xxx.tar.bz2 in the directory where you downloaded the file.

Copilot AI changed the title [WIP] Transition ITables' streamlit component to st.components.v2 Migrate ITables Streamlit component to st.components.v2 Mar 7, 2026
@mwouts
Copy link
Copy Markdown
Owner

mwouts commented May 14, 2026

@copilot Can you group the dependabot alerts ?

Copy link
Copy Markdown
Contributor Author

Copilot AI commented May 14, 2026

@copilot Can you group the dependabot alerts ?

Added .github/dependabot.yml in commit b531783. It groups updates by ecosystem:

  • pip: all Python dependencies grouped into one PR
  • npm: each package directory (dt_for_itables, itables_anywidget, itables_for_dash, itables_for_streamlit) grouped separately
  • github-actions: all Actions updates grouped into one PR

Copilot AI requested a review from mwouts May 14, 2026 19:54
Copilot finished work on behalf of mwouts May 14, 2026 19:54
@mwouts
Copy link
Copy Markdown
Owner

mwouts commented May 14, 2026

@copilot You should rebase on main. Also, can you start a new development version - bump the version number to 2.8.0.dev0 and add an entry in the changelog ? Finally you need to fix the CI (update the pixi lock file and commit it).

@mwouts
Copy link
Copy Markdown
Owner

mwouts commented May 14, 2026

@copilot the CI failed. It says

 Error:   × lock-file not up-to-date with the workspace

Can you make sure to activate pre-commit before you commit? (Can you add this instruction to an agent file maybe?)

Copy link
Copy Markdown
Contributor Author

Copilot AI commented May 14, 2026

@copilot You should rebase on main. Also, can you start a new development version - bump the version number to 2.8.0.dev0 and add an entry in the changelog ? Finally you need to fix the CI (update the...

Done in commit d450efe:

  • Rebased onto main
  • Bumped version to 2.8.0.dev0 in src/itables/version.py
  • Added a 2.8.0 (unreleased) entry in docs/changelog.md
  • Updated pixi.lock with the new version and sha256 for the local itables package

Note: pixi lock couldn't fully re-solve all platforms in this environment (network restrictions prevented downloading osx-arm64 conda packages), so the version/sha256 in pixi.lock were updated manually. The CI's pytest-pixi-updated job will run pixi update which will regenerate fully.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • pixi.sh
    • Triggering command: /usr/bin/curl curl -fsSL REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Copilot AI and others added 6 commits May 15, 2026 21:28
Co-authored-by: mwouts <29915202+mwouts@users.noreply.github.com>
Co-authored-by: mwouts <29915202+mwouts@users.noreply.github.com>
Agent-Logs-Url: https://github.com/mwouts/itables/sessions/ed1095a0-50a9-4e39-8c26-de4e4d3c9929

Co-authored-by: mwouts <29915202+mwouts@users.noreply.github.com>
@mwouts mwouts force-pushed the copilot/update-itables-to-streamlit-v2 branch from b7ed6a0 to 6694a26 Compare May 15, 2026 20:29
@mwouts mwouts marked this pull request as ready for review May 15, 2026 21:38
@mwouts mwouts merged commit 0144cce into main May 16, 2026
21 checks passed
@mwouts mwouts deleted the copilot/update-itables-to-streamlit-v2 branch May 16, 2026 11:43
@mwouts
Copy link
Copy Markdown
Owner

mwouts commented May 16, 2026

I have reported the issue with pixi install --locked observed on the CI at prefix-dev/pixi#6136

@mwouts mwouts mentioned this pull request May 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Transition ITables' streamlit component to st.components.v2

3 participants