st-datatables 0.0.1__tar.gz

st_datatables-0.0.1/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 junmae
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

st_datatables-0.0.1/MANIFEST.in

@@ -0,0 +1,2 @@
+recursive-include st_datatables/frontend/build *
+global-exclude *.py[cod] __pycache__ *.DS_Store

st_datatables-0.0.1/PKG-INFO

@@ -0,0 +1,49 @@
+Metadata-Version: 2.4
+Name: st-datatables
+Version: 0.0.1
+Summary: Streamlit custom component: DataTables (React) wrapper
+Author: junmae
+License: MIT
+Project-URL: Homepage, https://github.com/junmae/streamlit-datatables-actions
+Project-URL: Source, https://github.com/junmae/streamlit-datatables-actions
+Project-URL: Issues, https://github.com/junmae/streamlit-datatables-actions/issues
+Keywords: streamlit,component,datatable,react
+Classifier: Programming Language :: Python :: 3
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Operating System :: OS Independent
+Classifier: Development Status :: 3 - Alpha
+Classifier: Topic :: Software Development :: Libraries
+Requires-Python: >=3.7
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: streamlit>=0.63
+Provides-Extra: devel
+Requires-Dist: wheel; extra == "devel"
+Requires-Dist: pytest==7.4.0; extra == "devel"
+Requires-Dist: playwright==1.48.0; extra == "devel"
+Requires-Dist: requests==2.31.0; extra == "devel"
+Requires-Dist: pytest-playwright-snapshot==1.0; extra == "devel"
+Requires-Dist: pytest-rerunfailures==12.0; extra == "devel"
+Dynamic: license-file
+
+# streamlit-custom-component
+
+Streamlit component that allows you to do X
+
+## Installation instructions
+
+```sh
+pip install streamlit-custom-component
+```
+
+## Usage instructions
+
+```python
+import streamlit as st
+
+from my_component import my_component
+
+value = my_component()
+
+st.write(value)
+```

st_datatables-0.0.1/README.md

@@ -0,0 +1,21 @@
+# streamlit-custom-component
+
+Streamlit component that allows you to do X
+
+## Installation instructions
+
+```sh
+pip install streamlit-custom-component
+```
+
+## Usage instructions
+
+```python
+import streamlit as st
+
+from my_component import my_component
+
+value = my_component()
+
+st.write(value)
+```

st_datatables-0.0.1/pyproject.toml

@@ -0,0 +1,50 @@
+[project]
+name = "st-datatables"
+version = "0.0.1"
+description = "Streamlit custom component: DataTables (React) wrapper"
+readme = "README.md"
+requires-python = ">=3.7"
+license = { text = "MIT" }
+authors = [
+    { name = "junmae" }
+]
+keywords = ["streamlit", "component", "datatable", "react"]
+dependencies = [
+    "streamlit>=0.63"
+]
+
+classifiers = [
+    "Programming Language :: Python :: 3",
+    "License :: OSI Approved :: MIT License",
+    "Operating System :: OS Independent",
+    "Development Status :: 3 - Alpha",
+    "Topic :: Software Development :: Libraries"
+]
+
+[project.urls]
+Homepage = "https://github.com/junmae/streamlit-datatables-actions"
+Source = "https://github.com/junmae/streamlit-datatables-actions"
+Issues = "https://github.com/junmae/streamlit-datatables-actions/issues"
+
+[project.optional-dependencies]
+devel = [
+    "wheel",
+    "pytest==7.4.0",
+    "playwright==1.48.0",
+    "requests==2.31.0",
+    "pytest-playwright-snapshot==1.0",
+    "pytest-rerunfailures==12.0"
+]
+
+[build-system]
+requires = ["setuptools>=64", "wheel"]
+build-backend = "setuptools.build_meta"
+
+[tool.setuptools]
+
+[tool.setuptools.packages.find]
+where = ["."]
+exclude = ["examples", "tests", "e2e"]
+
+[tool.setuptools.package-data]
+"st_datatables" = ["frontend/build/**/*"]

st_datatables-0.0.1/setup.cfg

@@ -0,0 +1,4 @@
+[egg_info]
+tag_build = 
+tag_date = 0
+

st_datatables-0.0.1/st_datatables/__init__.py

@@ -0,0 +1,139 @@
+import os
+
+import streamlit as st
+import streamlit.components.v1 as components
+
+_RELEASE = True
+
+if not _RELEASE:
+    _component_func = components.declare_component(
+        "st_datatables",
+        url="http://localhost:3001",
+    )
+else:
+    parent_dir = os.path.dirname(os.path.abspath(__file__))
+    build_dir = os.path.join(parent_dir, "frontend/build")
+    _component_func = components.declare_component("st_datatables", path=build_dir)
+
+
+def st_datatables(
+    df = None,
+    id_col="ID",
+    pageLength=25, 
+    lengthMenu = [10, 25, 50, 100], 
+    orderable_cols=[],
+    hidden_cols = [],
+    searchable_cols=[],
+    select="single",
+    scrollX=False, 
+    scrollY=False,
+    deferRender=True,
+    layout=None,
+    actions=None,
+    key=None
+    ):
+    
+    
+    """
+    Create a new instance of the `st_datatables` Streamlit component.
+
+    This component wraps DataTables v2 with support for selection, custom
+    action buttons, scrolling, and the modern `layout` API (e.g. colvis/csv
+    buttons). It accepts a pandas DataFrame or explicit column/data arguments.
+
+    Parameters
+    ----------
+    df : pandas.DataFrame
+    pageLength : int, default 25
+        Number of rows per page initially.
+    lengthMenu : list[int], default [10, 25, 50, 100]
+        Available options for rows per page.
+    orderable_cols : list[str], default []
+        Column names that can be sorted.
+    hidden_cols : list[str], default []
+        Column names to hide.
+    searchable_cols : list[str], default []
+        Column names that should be included in search.
+    select : {"single", "multi", False}, default "single"
+        Row selection mode: single row, multiple rows, or disabled.
+    scrollX : bool or str, default False
+        Enable horizontal scrolling, or specify a CSS width.
+    scrollY : bool or str, default False
+        Enable vertical scrolling, or specify a CSS height (e.g. "480px").
+    deferRender : bool, default True
+        Only render rows as they are displayed (improves performance with
+        images/SVGs and larger datasets).
+    layout : dict, optional
+        DataTables v2 layout configuration, passed through directly.
+        Example:
+            {
+              "top1End": { "buttons": ["colvis"] },
+              "top2End": { "buttons": ["csv"] }
+            }
+    actions : dict, optional
+        Configuration for a custom actions column. Example:
+            {
+              "insertIndex": 0,
+              "btndirection": "horizontal",
+              "buttons": [
+                 {"id": "view", "title": "View", "text": "View"},
+                 {"id": "delete", "title": "Delete", "svg": "<svg .../>"}
+              ]
+            }
+        If used, the component will return row data with an `action` field
+        when a button is clicked.
+        "insertIndex": column number that actions column to be inserted,
+        "btndirection": Direction of action buttons. "horizontal" or "vertical",
+
+    key : str, optional
+        Streamlit widget key.
+
+    Returns
+    -------
+    dict or None
+        - On row selection:
+            {"rows": [...], "indexes": [...], "count": int}
+        - On action button click:
+            {<row data...>, "action": str, "_rowIndex": int}
+        - None if no interaction.
+
+    """
+    columns = df.columns.tolist()
+    data = df.to_dict(orient="records")
+
+    reset_nonce = None
+    if key:
+        reset_nonce = st.session_state.get(f"{key}__reset_nonce", 0)
+    
+    component_value = _component_func(
+        columns=columns,
+        data=data,
+        id_col=id_col,
+        pageLength=pageLength,
+        lengthMenu=lengthMenu,
+        orderable=orderable_cols,
+        hidden=hidden_cols,
+        searchable=searchable_cols,
+        select=select,
+        scrollX=scrollX,
+        scrollY=scrollY,
+        deferRender=deferRender,
+        layout=layout,
+        actions=actions,
+        key=key,
+        default={'rows': [], 'indexes': [], 'count': 0},
+        reset_nonce=reset_nonce,
+        )
+
+    return component_value
+
+
+def reset_selection(key: str, *, rerun: bool = True) -> None:
+    """
+    Signal the front-end table with given key to clear its selection.
+    This increments a nonce in session_state and (optionally) reruns immediately.
+    """
+    nonce_key = f"{key}__reset_nonce"
+    st.session_state[nonce_key] = st.session_state.get(nonce_key, 0) + 1
+    if rerun:
+        st.rerun()

st_datatables-0.0.1/st_datatables/example.py

@@ -0,0 +1,237 @@
+import streamlit as st
+
+from st_datatables import st_datatables, reset_selection
+import pandas as pd
+
+st.set_page_config(layout="wide")
+
+@st.cache_data()
+def load_data():
+    print("Data loaded")
+    df = pd.read_csv("./st_datatables/frontend/public/sample_data.csv")
+    return df
+
+@st.cache_data
+def load_svg():
+    print("SVG data loaded")
+    eyeSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Z"/></svg>'
+    editSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M120-120v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm584-528 56-56-56-56-56 56 56 56Z"/></svg>'
+    delsvg  ='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/></svg>'
+    return eyeSvg, editSvg, delsvg
+
+def on_detail_dismiss():
+    reset_selection("table1", rerun=False)
+
+def on_detail_dismiss2():
+    print("on_detail_dismiss2 is running")
+    st.session_state["detail_open"] = False
+    st.session_state["detail_row"] = None
+    st.session_state["edit_open"] = False
+    st.session_state["edit_row"] = None
+
+    reset_selection("buttons_table", rerun=False)
+    if "buttons_table" in st.session_state:
+        del st.session_state["buttons_table"]
+
+@st.dialog("Detail Dialog",width="large", on_dismiss=on_detail_dismiss)
+def show_detail_dialog(row: dict):
+    st.image(row.get("structure_svg"), width=200)
+    st.write(row.get("ID"))
+    st.write(row.get("NAME"))
+    st.write(row.get("shape"))
+    st.write(row.get("person"))
+    st.write(row.get("created_at"))
+    del st.session_state["table1"]
+
+@st.dialog("Detail Dialog",width="large", on_dismiss=on_detail_dismiss2)
+def show_detail_dialog2(row: dict):
+    st.image(row.get("structure_svg"), width=200)
+    st.write(row.get("ID"))
+    st.write(row.get("NAME"))
+    st.write(row.get("shape"))
+    st.write(row.get("person"))
+    st.write(row.get("created_at"))
+    
+@st.dialog("Edit Dialog",width="large", on_dismiss=on_detail_dismiss2)
+def show_edit_dialog(row: dict):
+    with st.form("form"):
+        st.text_input("ID",value=row.get("ID"))
+        st.text_input("Name",value=row.get("NAME"))
+        st.text_input("Shape",value=row.get("shape"))
+        st.text_input("Person",value=row.get("person"))
+        st.date_input("Date",value=row.get("created_at"))
+        submit = st.form_submit_button("submit")
+    if submit:
+        print("submitted")
+        # st.success("Updated")
+        st.session_state["edit_open"] = False
+        st.session_state["edit_row"] = None
+        # return
+        # st.rerun()
+        st.stop()
+
+df = load_data()
+eyeSvg, editSvg,delsvg = load_svg()
+
+TABS = ["SingleSelectTable", "MultiSelectTable", "TableWithButtons"]
+active = st.segmented_control(
+    "Menu",
+    options=TABS,
+    selection_mode="single",
+    default=TABS[0],
+    key="active_tab",
+)
+st.divider()
+print("Edit Dialog:",(st.session_state.get("edit_open") and st.session_state.get("edit_row")))
+
+if "table1" not in st.session_state:
+    st.session_state.table1 = {'rows': [], 'indexes': [], 'count': 0}
+if "selected" not in st.session_state:
+    st.session_state.selected = {'rows': [], 'indexes': [], 'count': 0}
+if st.session_state.get("detail_open") and st.session_state.get("detail_row"):
+    show_detail_dialog2(st.session_state["detail_row"])
+elif st.session_state.get("edit_open") and st.session_state.get("edit_row"):
+    show_edit_dialog(st.session_state["edit_row"])
+
+# --------------------------Single Row Select Table 
+if active == "SingleSelectTable":
+    st.subheader("Single select Table")
+    selected_row = st_datatables(
+        df=df, 
+        pageLength=10, 
+        lengthMenu=[10,25,50,100],
+        orderable_cols=["ID","NAME","created_at","person"],
+        searchable_cols=["ID","NAME","person"],
+        select="single",
+        scrollX=False,
+        scrollY="500",
+        deferRender=True,
+        layout= {
+            "top1End": {"buttons": ["colvis"],},
+            },
+        key="table1"
+        )
+
+    st.write(selected_row)
+    if selected_row["count"] > 0:
+        show_detail_dialog(selected_row["rows"][0])
+
+# --------------------------Multi Row Select Table 
+elif active == "MultiSelectTable":
+    st.subheader("Multiselect Table")
+
+    if st.button("Reset Row Selection"):
+        reset_selection("multiselect_table")
+
+    selected_row2 = st_datatables(
+        df=df, 
+        pageLength=10, 
+        lengthMenu=[10,25,50,100],
+        orderable_cols=["ID","NAME"],
+        searchable_cols=["ID","NAME"],
+        select="multi",
+        scrollX=False,
+        scrollY="500",
+        deferRender=True,
+        layout= {
+            "top1End": {"buttons": ["colvis","copy","csv"],},
+            },
+        key="multiselect_table"
+        )
+
+    if selected_row2 != 0 and selected_row2["count"] > 0:
+        indexes = selected_row2['indexes']
+        st.write(f"Selected rows : {indexes}")
+
+    st.write(selected_row2)
+
+# --------------------------Table With Action Buttons
+elif active == "TableWithButtons":
+    st.subheader("Table with Action button")
+
+    actions = {
+        "insertIndex": 0,
+        "btndirection": "vertical", 
+        "buttons": [
+            {"id": "detail", "title": "Detail", "text": "Detail","className": "detail-btn", "svg": eyeSvg},
+            {"id": "edit", "title": "Edit", "text": "Edit","className": "edit-btn", "svg": editSvg},
+            {"id": "delete", "title": "Delete", "text": "Delete", "className": "delete-btn", "svg": delsvg},
+        ],
+    }
+
+    selected_row3 = st_datatables(
+        df=df,
+        pageLength=10,
+        lengthMenu=[10,25,50,100],
+        orderable_cols=["ID","NAME"],
+        searchable_cols=["ID","NAME"],
+        select=False,
+        scrollX=False,
+        scrollY="500",
+        deferRender=True,
+        layout= {
+            "top1End": {"buttons": ["colvis"],},
+            },
+        actions=actions,
+        key="buttons_table"
+        )
+    
+    print("------------------------")
+    print(not st.session_state.get("detail_open"))
+    print(not st.session_state.get("edit_open"))
+    print(selected_row3)
+    print(isinstance(selected_row3, dict))
+    print("action" in selected_row3)
+    print("------------------------")
+    
+    if (not st.session_state.get("detail_open")) and (not st.session_state.get("edit_open")) \
+    and selected_row3 and isinstance(selected_row3, dict) \
+    and ("action" in selected_row3):
+        action = selected_row3["action"]
+        row_index = selected_row3.get("_rowIndex")
+        st.write(f"{action} button of row {row_index} clicked!")
+
+        if action == "detail":
+            st.session_state["detail_row"] = selected_row3
+            st.session_state["detail_open"] = True
+            st.rerun()
+
+        elif action == "edit":
+            # show_edit_dialog(selected_row3)
+            st.session_state["edit_row"] = selected_row3
+            st.session_state["edit_open"] = True
+            st.rerun()
+
+
+    st.write(selected_row3) 
+
+    st.divider()
+    st.subheader("Horizontal Button Layout")
+    actions_without_text = {
+        "insertIndex": 6,
+        "btndirection": "horizontal", 
+        "buttons": [
+            {"id": "detail", "title": "Detail","className": "detail-btn", "svg":eyeSvg},
+            {"id": "edit",   "title": "Edit", "className": "edit-btn", "svg": editSvg},
+            {"id": "delete",    "title": "Delete", "className": "delete-btn", "svg": delsvg},
+        ],
+    }
+    
+    selected_row4 = st_datatables(
+        df=df, 
+        pageLength=10, 
+        lengthMenu=[10,25,50,100],
+        orderable_cols=["ID","NAME"],
+        searchable_cols=["ID","NAME"],
+        select=False,
+        scrollX=False,
+        scrollY="500",
+        deferRender=True,
+        layout= {
+            "top1End": {"buttons": ["colvis"],},
+            },
+        actions=actions_without_text,
+        key="buttons_table_without_text"
+        )
+
+    st.write(selected_row4)