New Component: Streamlit-antd allows you to easily integrate beautiful Antd components in streamlit

🧩 Custom Components
1

Hi everyone, as a part of a series on sharing components, I will share a solution for using beautiful Antd components in a Streamlit application called Streamlit-antd. It makes our lives easier when developing complex features.

20240423141943

Install

pip install streamlit-antd

Usage

Tabs

from streamlit_antd.tabs import st_antd_tabs
event = st_antd_tabs([{"Label": op} for op in options], key="labs_tab")
    logger.info(f"event : {event}")

Cascader

from streamlit_antd.cascader import st_antd_cascader
selected = st_antd_cascader(
        options,
        multiple=multiple,
        disabled=disabled,
        key=f"{key}_cascader_machine",
        **{"defaultValue": saved_value, **kwargs},
    )

Table

from streamlit_antd.table import st_antd_table

df = pd.DataFrame(data)
st_antd_table(df, color_backgroud="#f9f6f1", hidden_columns=["Index"])

Breadcrumb

from streamlit_antd.breadcrumb import st_antd_breadcrumb
items = [
    {"Label": "My Applications"},
    {"Label": f"Application({application.name})"},
    {"Label": "Edit Documentation"},
]
clicked_event = st_antd_breadcrumb(items)
if clicked_event:
    if clicked_event["payload"]["Label"] == "My Applications":
        router.redirect(*router.build("show_applications"))
    elif clicked_event["payload"]["Label"].startswith("Application"):
        router.redirect(
            *router.build("show_application", {"name": application.name})
        )

Pager

from streamlit_antd.pager import st_pager
jobs = st_pager(
    lambda page, limit: JobManager.get_jobs(
        application_name=application.name,
        offset=((page - 1) * limit),
        limit=limit,
    )[1],
    job_count,
    page_size=100,
    key="job-pager",
)

Result

from streamlit_antd.result import Action, st_antd_result
title = "Job Created Successfully!"
sub_title = f"job name: {job_name}. The job running takes a few minutes, please wait."
actions = [
    Action("show_job", "Job details", primary=True),
    Action("create", "Create a new job"),
    Action("edit", "Back edit"),
]
clicked_event = st_antd_result(title, sub_title, actions)

Card

from streamlit_antd.cards import Action, Item, st_antd_cards
 items = [
    Item(
        **{
            "id": dataset.name,
            "title": dataset.title,
            "description": dataset.description,
            "email": dataset.creator,
            "cover": dataset.get_image_cover(resize="238x160,s"),
            "actions": [
                Action("config", "SettingOutlined"),
                Action("edit", "EditOutlined"),
                Action("open", "FolderOpenOutlined"),
            ],
        }
    )
    for dataset in datasets
    if (not tag or tag == "All") or tag in dataset.tags
]

event = st_antd_cards(items)
if event and event["action"] in ("detail", "click", "open"):
    router.redirect(
        *router.build("show_dataset", {"dataset_name": event["payload"]["id"]})
    )

Steps

from streamlit_antd.steps import Item, st_antd_steps

items = [
    Item(
        "Initialization",
        "In this stage, the system is being set up and initialized to prepare for the task. This includes configuring the necessary settings, loading any required data, and initializing any resources that will be used during the task.",  # noqa: E501
    ),
    Item(
        "PreProcessing",
        "In this stage, the task is being submitted to the system for processing. This involves sending the task request to the server and waiting for a response to confirm that the task has been accepted.",
    ),
    Item(
        "Running",
        "In this stage, the task is actively being processed by the system. This involves running the necessary algorithms and computations to complete the task, and monitoring the progress to ensure that the task is proceeding as expected.",  # noqa: E501
    ),
    Item(
        "PostProcessing",
        "In this stage, the task has been completed and the results are being retrieved from the system. This involves retrieving the output data generated by the task, saving it to a designated location, and closing any resources that were used during the task.",  # noqa: E501
    ),
]
st_antd_steps(
                items, current, process=process, error=error, direction="vertical"
            )

Another interesting similar project is streamlit-antd-components, which provides a wealth of examples but lacks commonly used components such as Table.

4 Likes