Skip to content

Data Components

Data components are essential for displaying information, metrics, and datasets in your Streamlit applications. st_yled enhances these components with professional styling options for tables, metrics, charts, and data visualization.

Available Elements

  • table - Static table display with enhanced styling
  • metric - Display key performance indicators with custom styling
  • json - Display JSON data with syntax highlighting and styling

Display Components

table

Streamlit equivalent: st.table()

Static table display with enhanced styling.

st_yled.table(df, background_color="#f8f9fa", color="#2c3e50")

Supported Styling Properties:

  • background_color - Table background color
  • color - Text color
  • font_size - Text size in cells
  • font_weight - Font weight (100-900, thin, extra-light, light, normal, medium, semi-bold, bold, extra-bold, black)
  • border_style - Border style (solid, dashed, dotted)
  • border_color - Border color
  • border_width - Border width (px, rem, em, or integer as px)

Metrics and KPIs

metric

Streamlit equivalent: st.metric()

Display key performance indicators with custom styling.

st_yled.metric(
    "Revenue",
    "$12,345",
    "+15%",
    label_color="#666666",
    value_color="#2c3e50",
    value_font_size="24px"
)

Supported Styling Properties:

  • color - Text color for label and value (hex, rgb, named colors)
  • font_size - Text size for label and value (px, rem, em, %, or integer as px)
  • font_weight - Font weight for label and value (100-900, thin, extra-light, light, normal, medium, semi-bold, bold, extra-bold, black)
  • label_color - Text color for label only (hex, rgb, named colors)
  • label_font_size - Text size for label only (px, rem, em, %, or integer as px)
  • label_font_weight - Font weight for label only (100-900, thin, extra-light, light, normal, medium, semi-bold, bold, extra-bold, black)
  • value_color - Text color for metric value only (hex, rgb, named colors)
  • value_font_size - Text size for metric value only (px, rem, em, %, or integer as px)
  • value_font_weight - Font weight for metric value only (100-900, thin, extra-light, light, normal, medium, semi-bold, bold, extra-bold, black)

Data Visualization

json

Streamlit equivalent: st.json()

Display JSON data with syntax highlighting and styling.

data = {"name": "John", "age": 30, "city": "New York"}
st_yled.json(data, color="#2c3e50", font_size="14px")

Supported Styling Properties:

  • color - Text color
  • font_size - Text size
  • font_weight - Font weight (100-900, thin, extra-light, light, normal, medium, semi-bold, bold, extra-bold, black)

Next Steps

Continue exploring st_yled components:

st_yled with ❤️ from EVOBYTE