st-datatables 0.1.1

Streamlit custom component: DataTables (React) wrapper

st-datatables

Streamlit custom component wrapping DataTables for interactive dataframe display.

It is designed for tables that need row selection, action buttons, column visibility controls, scrolling, and HTML/SVG cells such as RDKit molecule structure drawings.

Installation

pip install st-datatables

Usage

import pandas as pd
import streamlit as st
from st_datatables import st_datatables

df = pd.DataFrame(
    [
        {"ID": "mol-1", "SMILES": "CCO", "MOLWT": 46.07},
        {"ID": "mol-2", "SMILES": "c1ccccc1", "MOLWT": 78.11},
    ]
)

selected = st_datatables(
    df=df,
    id_col="ID",
    orderable_cols=["MOLWT"],
    searchable_cols=["ID", "SMILES"],
    select="single",
    key="molecule_table",
)

st.write(selected)

Molecule Structure Columns

Use html_cols or column_config when a column contains pre-rendered SVG or HTML, for example RDKit SVG drawings.

selected = st_datatables(
    df=df_with_structure_svg,
    id_col="ID",
    html_cols=["structure_svg"],
    column_config={
        "structure_svg": {
            "html": True,
            "width": 220,
            "orderable": False,
            "searchable": False,
        },
        "SMILES": {"mono": True},
        "MOLWT": {"format": ".2f", "orderable": True},
    },
    rowHeight=220,
    structure_img_width=200,
    structure_img_height=200,
    preserve_selection_on_rerun=True,
    preserve_table_state=True,
    key="molecule_table",
)

Returned Value

The component returns a dictionary containing selected rows and stable row IDs.

{
    "rows": [...],
    "indexes": [...],
    "ids": [...],
    "count": 1,
    "event_id": "...",
    "table_state": {...},
}

When an action button is clicked, the row data is returned with an action field and _rowIndex.

Reset Selection

from st_datatables import reset_selection

if st.button("Reset"):
    reset_selection("molecule_table")