Streamlit Part 2: Mastering Data Elements for Interactive Dashboards

In this installment of our Streamlit tutorial series, we dive into the core data elements that make Streamlit a powerful tool for building interactive data dashboards. We'll explore how to display and manipulate data using st.dataframe, st.table, st.json, and other key components. This guide will walk you through practical examples to help you seamlessly integrate these elements into your own Streamlit applications.

Code can be found here: GitHub - jamesbmour/blog_tutorials:

Video version of blog can be found here: YouTube Playlist

Setting Up the Title

Every good app starts with a clear and descriptive title. In Streamlit, we use st.title() to set the main heading of our application. This not only helps in structuring the app but also provides a context for users.

import streamlit as st

st.title("Streamlit Part 3: Data Elements")

Displaying DataFrames with st.dataframe

The st.dataframe element allows you to display pandas DataFrames interactively. Users can sort, scroll, and explore the data within the app, making it an excellent tool for data exploration.

Let's create a simple DataFrame and display it using st.dataframe.

import pandas as pd

df = pd.DataFrame({
    "Column 1": [1, 2, 3, 4],
    "Column 2": [10, 20, 30, 40],
    "Column 3": [100, 200, 300, 400]
})

st.header("st.dataframe")
st.write("Dataframe using st.dataframe()")
st.dataframe(df, width=500, height=200)

In this example, the DataFrame is displayed with a specified width and height, allowing users to interact with the data directly within the app.

Presenting Data with st.table

While st.dataframe is interactive, st.table offers a static view of your data. This element is perfect for showing a clean, non-interactive snapshot of your DataFrame.

st.header("st.table")
st.write("Table using st.table()")
st.table(df)

Here, the DataFrame is displayed as a static table. This is particularly useful when you want to present data without the need for interaction.

Visualizing JSON Data with st.json

Streamlit’s st.json is a handy tool for displaying JSON data in a formatted and readable manner. Whether you’re working with APIs or need to show raw JSON data, this element will make your life easier.

st.header("st.json")
st.write("JSON using st.json()")
st.json({
    "Column 1": [1, 2, 3, 4],
    "Column 2": [10, 20, 30, 40],
    "Column 3": [100, 200, 300, 400]
}, expanded=True)

In this example, the JSON object is displayed with an option to expand or collapse sections, giving users a clear view of the data structure.

Configuring Columns (Conceptual Example)

While Streamlit doesn’t directly support st.column_config, this placeholder introduces the concept of customizing column layouts. Normally, you’d use st.columns() for layout adjustments, but this serves as a conceptual demonstration.

st.header("st.column_config")
st.write("Column Configuration using st.column_config()")
st.write("This is a wide column")
st.write("This is a narrow column")
st.column_config = {"wideMode": True}  # Placeholder example

This section is more about thinking ahead to how Streamlit might evolve in handling column configurations.

Displaying Metrics with st.metric

Finally, st.metric is designed for displaying single numbers, such as Key Performance Indicators (KPIs) or summary statistics. You can also compare metrics using delta values.

st.header("st.metric")
st.write("Metric using st.metric()")
st.metric("Metric 1", 100)
st.metric("Metric 2", 200)

In this example, st.metric displays the current value of a metric, making it easy to convey important information at a glance.

Conclusion

In this post, we covered a variety of data elements in Streamlit that you can use to build interactive and user-friendly dashboards. By mastering these components, you can create rich, data-driven applications that cater to a wide range of use cases, from data exploration to real-time monitoring. Experiment with these elements in your own projects to see how they can enhance your Streamlit applications.

Stay tuned for the next part of this series, where we’ll dive into more advanced features and customizations in Streamlit!

If you'd like to support my writing or treat me to a beer: https://buymeacoffee.com/bmours