[Streamlit]_쉽고 예쁘게 웹을 꾸밀 수 있다고!? - All about **Columns**(1)

Streamlit 포스팅은  BOOKK에서 발간한 "Streamlit으로 프로젝트 한방에 끝내기 with 파이썬"이라는 책을 참고하여 저의 공부 내용을 올립니다. 저자님께 감사드립니다. 또한 streamlit doc의 코드도 일부 변형하였습니다. 감사합니다, Streamlit!

 

st.column_config

Column

• st.column_config 클래스는 데이터 표현이나 상호작용을 구성하는 강력한 도구입니다. 
• st.dataframe이나 st.data_editor와 함께 쓰이면서 다양한 데이터 타입으로 컬럼을 조정할 수 있습니다. 

import pandas as pd
import streamlit as st

# column
data_df = pd.DataFrame(
    {
        "widgets" : ["st.selectbox", "st.number_input", "st.text_area", "st.button"]
    }
)

st.data_editor(
    data_df,
    column_config={
        "widgets" : st.column_config.Column(
            "Streamlit Widgets", 
            help = "Streamlit **widget** commands",
            width="medium",
            required=True,
        )
    },
    hide_index=True,
    num_rows="dynamic"
)

TextColumn

• 기본적으로 str타입의 value를 갖는 컬럼을 만듭니다.
• st.data_editor 부분만 바꿔볼까요?

st.data_editor(
    data_df,
    column_config={
        "widgets": st.column_config.TextColumn(
            "Widgets",
            help="Streamlit **widget** commands 🎈",
            width="large",
            default="st.",
            max_chars=50,
            validate="^st\.[a-z_]+$",
        )
    },
    hide_index=True,
)

NumColumn

data_df = pd.DataFrame({
    "price":[20, 950, 250, 500]
})
st.data_editor(
    data_df, 
    column_config={
        "price" : st.column_config.NumberColumn(
            "Price(in USD)",
            help="The price of the product in USD",
            min_value=0,
            max_value=1000,
            step=1,
            format="$%d",
        )
    }, hide_index=True
)

CheckboxColumn

• 이것은 True나 False값에 대한 기본적인 컬럼유형입니다. 

data_df = pd.DataFrame({
    "widgets": ["st.selectbox", "st.number_input", "st.text_area", "st.button"],
    "favorite" : [True, False, True, False],
})
st.data_editor(
    data_df,
    column_config={
        "favorite": st.column_config.CheckboxColumn(
            "Your favorite?",
            help="Select your **favorite** widgets.",
            default=False,
        )
    }, 
    disabled=['widgets'],
    hide_index=True,
)

SelectboxColumn

• Pandas 범주형 value에 대한 기본 컬럼 유형입니다. 

data_df = pd.DataFrame(
    {
        "category": [
            "📊 Data Exploration",
            "📈 Data Visualization",
            "🤖 LLM",
            "📊 Data Exploration",
        ],
    }
)

st.data_editor(
    data_df,
    column_config={
        "category": st.column_config.SelectboxColumn(
            "App Category",
            help="The category of the app",
            width="medium",
            options=[
                "📊 Data Exploration",
                "📈 Data Visualization",
                "🤖 LLM",
            ],
        )
    },
    hide_index=True,
)

이렇게 변경할 수 있다.

DatetimeColumn

• 연, 월, 일, 시, 분, 초를 표시하는 datetime를 나타낼 수 있습니다. 
• datetime을 import하는 것 잊지 마세요!

from datetime import datetime

data_df = pd.DataFrame({
    "appointment": [datetime(2024, 5, 15, 12, 40), 
                    datetime(2023, 11, 15, 4, 0),
                    datetime(2025, 1, 23, 18, 27),
                    datetime(2024, 10, 22, 22, 20)]
}) 
st.data_editor(
    data_df,
    column_config={
        "appointment":st.column_config.DateColumn(
            "Appointment",
            min_value=datetime(2023, 9, 1),
            max_value=datetime(2025, 2, 1),
            format="D MMM YYYY, h:mm a",
            step=60,
        ),
    },
    hide_index=True
)

• Y, M, D, h, m의 갯수로 자릿수를 나타낼 수 있습니다. 각 행을 누르면 달력도 나타납니다. 

DateColumn

• datetime과 마찬가지로 , YYYY-MM-DD로 날짜를 표현합니다. 
• date를 import 하는 것 잊지 마세요!

 

from datetime import date
data_df = pd.DataFrame({
    "birthday" : [date(1979, 3, 2),
                  date(1989, 6, 12),
                  date(2002, 10, 30),
                  date(2020, 12, 31),]
})
st.data_editor(
    data_df,
    column_config={
        "birthday": st.column_config.DateColumn(
            "Birthday",
            min_value=date(1970, 1, 1),
            max_value=date(2021, 1, 1),
            format= "DD.MM.YYYY",
            step=1,
        )
    }, hide_index=True,
)

TimeColumn

• time을 import하고 실행합니다.

from date import time

data_df = pd.DataFrame(
    {
        "appointment": [
            time(12, 30),
            time(18, 0),
            time(9, 10),
            time(16, 25),
        ]
    }
)

st.data_editor(
    data_df,
    column_config={
        "appointment": st.column_config.TimeColumn(
            "Appointment",
            min_value=time(8, 0, 0),
            max_value=time(19, 0, 0),
            format="hh:mm a",
            step=60,
        ),
    },
    hide_index=True,
)

값을 수정할 수도 있다.

다음 시간엔 조금 더 시각적인 자료를 보여줄 수 있는 컬럼을 만들어보겠습니다.

오늘도 수고많으셨습니다.

감사합니다!