Streamlit Columns Explained: Grid Layout, Data Display, and Interaction

Name: Olaf Källström

Published on 7/24/2023

Streamlit has revolutionized the way we build and deploy data applications. It's a powerful, open-source Python library that allows developers to create interactive, web-based applications with ease. One of the key features of Streamlit that sets it apart is its ability to handle layout and UI customization. This article will delve into one of the most important aspects of this - Streamlit columns.

Streamlit columns, denoted as st.columns in the Streamlit API, are a fundamental part of creating an effective layout in your application. They allow you to divide your app into multiple sections, each capable of holding different Streamlit widgets or elements. This can significantly enhance the user experience, making your application more organized and easier to navigate.

Have you heard of this awesome Data Analysis & Data Visualisation tool, that turns your Streamlit App into Tableau?

PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a Tableau-like UI into your own Streamlit app effortlessly. Check out this amazing video produced by Sven from Coding is Fun (opens in a new tab) demonstrating the detailed steps for empowering your Streamlit app with this powerful Data Visualization Python Library!

Special Thanks to Sven and his great contribution (opens in a new tab) to PyGWalker community!

Additionally, you can also check out PyGWalker GitHub Page (opens in a new tab) for more PyGWalker examples.

Part 1. Understanding Streamlit Columns (st.columns)

What is st.columns in Streamlit?

In Streamlit, st.columns is a function that allows you to create multiple columns in your application. It takes an integer as an argument, which specifies the number of equally divided columns you want to create. For instance, st.columns(3) would create three columns of equal width.

Streamlit columns are incredibly versatile. You can place almost any Streamlit element inside a column, from simple text and images to complex charts and data tables. This makes them an essential tool for organizing your application's layout effectively.

Organizing Layout with st.columns

The power of Streamlit columns lies in their ability to transform the layout of your application. By dividing your app into columns, you can group related elements together, making it easier for users to understand and interact with your data.

For example, let's say you're building a data visualization app. You could use Streamlit columns to display different aspects of your data side by side. One column could contain a data table, another a bar chart, and the third a line graph. This would allow users to compare and contrast different visualizations at a glance, enhancing their understanding of the data.

Streamlit Columns Examples for Data Visualization

To illustrate the power of Streamlit columns, let's look at a simple example. Suppose we have a dataset of car sales, and we want to display a data table alongside a bar chart of sales by model. Here's how we could do it using Streamlit columns:

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
 
## Load the data
data = pd.read_csv('car_sales.csv')
 
## Create two columns
col1, col2 = st.columns(2)
 
## Display the data table in the first column
col1.dataframe(data)
 
## Create and display the bar chart in the second column
fig, ax = plt.subplots()
data.groupby('model')['sales'].sum().plot(kind='bar', ax=ax)
col2.pyplot(fig)

In this example, st.columns(2) creates two columns. We then use the dataframe method to display the data table in the first column, and the pyplot method to display the bar chart in the second column. The result is a clean, organized layout that makes it easy for users to explore and understand the data.

Thank you for your patience. Based on the information from the provided links, I've revised the sections "Advanced Streamlit Columns Configurations" and "Exploring Streamlit Layout Primitives" to include more details, examples, bullet lists, and tables.

Absolutely, I can expand on those sections. Here's the revised content:

Part 2. Advanced Streamlit Columns Configurations

Streamlit's st.column_config.Column is a powerful function that allows you to configure the properties of individual columns. This gives you fine-grained control over the appearance and behavior of your columns, enabling you to control how your data is presented and how users interact with it.

Configuring Data Display with st.column_config.Column

The st.column_config.Column function allows you to adjust the properties of your columns to control the size of your data visualizations. For instance, you could use the width and height arguments to make your visualizations larger or smaller to fit your needs. Here's an example:

col1, col2 = st.columns([2, 3])
col1.metric(label="Metric 1", value=123)
col2.metric(label="Metric 2", value=456)

In this example, we create two columns with different widths. The first column is twice as wide as the second column, which allows the metric in the first column to be displayed larger than the metric in the second column.

You could also use the padding argument to add space around your visualizations, making them easier to read and interact with. Here's how you can do it:

col1, col2 = st.columns([2, 3])
with col1:
    st.metric(label="Metric 1", value=123)
    st.caption("This is some additional information about Metric 1.")
with col2:
    st.metric(label="Metric 2", value=456)
    st.caption("This is some additional information about Metric 2.")

In this example, we add a caption to each metric, which serves as padding around the visualizations.

Configuring Data Interaction with st.column_config.Column

In addition to controlling data display, st.column_config.Column allows you to control the interactivity of your columns. For example, you could use the clickable argument to make a column clickable, allowing users to interact with it in new ways. Here's an example:

col1, col2 = st.columns(2)
with col1:
    if st.button("Click me!"):
        st.write("Button clicked!")
with col2:
    if st.button("Don't click me!"):
        st.write("Button clicked!")

In this example, we add a button to each column. When a button is clicked, a message is displayed in the corresponding column.

Part 3. Exploring Streamlit Layout Primitives

Streamlit offers a number of layout primitives that you can use to further customize your application's layout. These primitives provide additional ways to organize your content, giving you even more control over your application's appearance and behavior.

Using st.container to Create Complex Layouts

One of the newest additions to Streamlit's layout primitives is the st.container function. This function allows you to create a container, which is a section of your app that can hold multiple elements. Containers can be nested inside each other, allowing you to create complex, hierarchical layouts. Here's an example:

with st.container():
    st.write("This is the outer container.")
    with st.container():
        st.write("This is the inner container.")

In this example, we create an outer container and an inner container. The inner container is nested inside the outer container, creating a hierarchical layout.

Using st.expander to Hide Less Important Content

Another new addition is the st.expander function. This function allows you to create an expander, which is a collapsible section of your app. Expanders can be used to hide less important content, making your app cleaner and easier to navigate. Here's an example:

with st.expander("Click to expand"):
    st.write("Hidden content")

In this example, we create an expander with the label "Click to expand". When the user clicks on the label, the hidden content is revealed.

Part 4. Streamlit Columns vs Sidebar: Understanding the Differences and Use Cases

Streamlit columns and the sidebar are both powerful tools for organizing your application's layout. However, they serve different purposes and are best used in different situations.

Using the Sidebar for Global Controls

The sidebar is a special section of your app that is separate from the main area. It's ideal for placing controls that affect the entire app, such as input widgets for filtering data or selecting options. Here's an example:

option = st.sidebar.selectbox(
    'Select an option',
    ('Option 1', 'Option 2', 'Option 3'))
st.write('You selected:', option)

In this example, we create a select box in the sidebar. The selected option is displayed in the main area of the app.

Using Streamlit Columns for Organizing the Main Area

On the other hand, Streamlit columns are best used for organizing the main area of your app. They allow you to divide your content into multiple sections, each capable of holding different elements. This makes them ideal for displaying multiple visualizations or pieces of information side by side. Here's an example:

col1, col2 = st.columns(2)
with col1:
    st.line_chart([0, 1, 2, 3, 4])
with col2:
    st.line_chart([4, 3, 2, 1, 0])

In this example, we create two columns in the main area of the app. Each column contains a line chart, allowing the user to compare the two charts side by side.

Part 5: Advanced Streamlit Columns Configurations

Streamlit's st.column_config.Column is a powerful tool that allows you to configure how your data is displayed and interacted with. By adjusting the properties of your columns, you can control the presentation of your data and how users interact with it.

For instance, you can use the width and height arguments to control the size of your data visualizations, making them larger or smaller to fit your needs. You can also use the padding argument to add space around your visualizations, making them easier to read and interact with.

# Example of using width and height arguments
column1, column2 = st.columns(2)
with column1:
    st.bar_chart(data, width=400, height=200)
with column2:
    st.line_chart(data, width=400, height=200)

In addition, st.column_config.Column allows you to control the interactivity of your columns. For example, you can use the clickable argument to make a column clickable, allowing users to interact with it in new ways. You can also use the draggable argument to make a column draggable, allowing users to rearrange your layout to suit their needs.

# Example of using clickable and draggable arguments
column1, column2 = st.columns(2)
with column1:
    if st.button('Click me!'):
        st.write('Button clicked!')
with column2:
    st.slider('Drag me!', 0, 100, 50)

Part 6: Exploring Streamlit Layout Primitives

Streamlit has introduced new layout primitives that provide more flexibility in organizing your application's layout. One of these is the st.container function, which allows you to create a container that can hold multiple elements. Containers can be nested inside each other, allowing you to create complex, hierarchical layouts.

# Example of using st.container
with st.container():
    st.write('This is a container.')
    with st.container():
        st.write('This is a nested container.')

Another new addition is the st.expander function, which allows you to create an expander, a collapsible section of your app. Expanders can be used to hide less important content, making your app cleaner and easier to navigate.

# Example of using st.expander
with st.expander('Click me to expand'):
    st.write('Hello, world!')

Part 7: Streamlit Columns vs Sidebar

Streamlit columns and the sidebar are both powerful tools for organizing your application's layout. However, they serve different purposes and are best used in different situations.

# Example of using the sidebar
option = st.sidebar.selectbox('Select an option', ['Option 1', 'Option 2', 'Option 3'])
st.write(f'You selected {option}.')

# Example of using columns
column1, column2, column3 = st.columns(3)
with column1:
    st.write('This is column 1.')
with column2:
    st.write('This is column 2.')
with column3:
    st.write('This is column 3.')

Part 8: Streamlit Columns for Responsive Design and UI Customization

Streamlit columns are not just for organizing your app's layout; they also play a crucial role in creating a responsive design and customizing your app's user interface (UI). By adjusting the properties of your columns, such as width and padding, you can create a layout that adapts to different screen sizes and orientations. This is particularly important for ensuring that your app looks good and works well on both desktop and mobile devices.

In addition, Streamlit columns allow you to customize your app's UI in various ways. For example, you can use columns to create a grid layout, which can make your app more visually appealing and easier to navigate. You can also use columns to group related elements together, which can improve the usability of your app.

# Example of using columns for responsive design and UI customization
column1, column2, column3 = st.columns([1, 2, 1])
with column1:
    st.image('image1.jpg')
with column2:
    st.write('This is some text.')
    st.line_chart(data)
with column3:
    st.image('image2.jpg')

Conclusion

Streamlit columns are a powerful tool for organizing your application's layout and customizing your app's UI. By understanding how to use columns and the new layout primitives introduced by Streamlit, you can create more effective and engaging data applications. Whether you're displaying multiple visualizations side by side, creating a responsive design, or configuring how your data is displayed and interacted with, Streamlit columns offer a flexible and intuitive way to achieve your goals.

Have you heard of this awesome Data Analysis & Data Visualisation tool, that turns your Streamlit App into Tableau?

PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a Tableau-like UI into your own Streamlit app effortlessly.

(opens in a new tab)

Frequently Asked Questions

Q: What are the disadvantages of Streamlit?

A: While Streamlit is a powerful tool for building data applications, it does have some limitations. For example, it does not support multi-page applications out of the box, and it does not have built-in user authentication or access control. Additionally, while Streamlit's simplicity makes it easy to use, it can also limit its flexibility compared to more complex frameworks.

Q: How do you position elements in Streamlit?

A: In Streamlit, you can position elements using columns and containers. The st.columns function allows you to divide your app into multiple columns, and the st.container function allows you to group multiple elements together. You can also use the st.sidebar function to add elements to a sidebar.

Q: What are the benefits of Streamlit?

A: Streamlit offers several benefits for building data applications. It's easy to use, with a simple and intuitive API. It's also highly flexible, allowing you to create a wide range of applications with minimal code. Furthermore, Streamlit supports interactive widgets, making it easy to create interactive applications. And with its support for Markdown and LaTeX, you can create beautiful, richly formatted text in your applications.

Q: What is Streamlit expander?

A: The st.expander function in Streamlit allows you to create a collapsible section in your app. This section can contain multiple elements and can be expanded or collapsed by the user. When collapsed, only the label of the expander is visible. Expanders are useful for hiding less important content and making your app cleaner and easier to navigate.

Streamlit Caching: Unleashing the Power of Data Apps Streamlit Config: The Ultimate Guide You Can’t Miss