Text Rendering with Word Wrapping

[Ankit_Srivastava]

Building Streamlit App within Snowflake.
Version of Streamlit Available -: 1.22

I am trying to display a report in a tabular format. The table contains Text and Number Fields.
The text columns can have carriange return, newline and can be quite lengthy.

I have tried various display option but not get the right text wrapping similar to what is available in excel for example.

I need to get to a point where the report in streamlit looks as a excel like word wrap format.

def get_view_dataset():
    selected_columns = ["ID", "COL1", "COL2", "COL3", "COL4", "COL5"]
    df = session.table("TABLE_TEST").select(selected_columns).to_pandas()
    return df
dataset = get_view_dataset()

st.text("Using st.table. No formatting available")
st.table(dataset)

st.text("Using st.dataframe")
st.dataframe(dataset)

st.text("Using st.dataframe-Adjustable Column Width,height")
st.dataframe(dataset,width=100,height=100)

st.text("Using st.write")
st.write(dataset)

App snippet,

Excel Wrapping snippet,

st.table is very close but it doesn’t handle the example 2 wherein a newline was entered.
Also it displays NA for null values.

Any ideas how to bring it close to excel way of word wrapping?

[sahirmaharaj]

Hello @Ankit_Srivastava,

You can define custom CSS to control the word wrapping within table cells and provide a more visually appealing way to display null values

custom_css = """
<style>
    .dataframe th, .dataframe td {
        white-space: pre-wrap;
        vertical-align: top;
        font-size: 14px;
    }
    .dataframe .blank, .dataframe .nan {
        color: #ccc;
    }
</style>
"""

Before displaying your DataFrame, inject the custom CSS using st.markdown with the unsafe_allow_html=True parameter

import streamlit as st

st.markdown(custom_css, unsafe_allow_html=True)

def get_view_dataset():
    selected_columns = ["ID", "COL1", "COL2", "COL3", "COL4", "COL5"]
    df = session.table("TABLE_TEST").select(selected_columns).to_pandas()
    df = df.fillna('')
    return df

dataset = get_view_dataset()

st.dataframe(dataset, width=None, height=None) 

Hope this helps!

Kind Regards,
Sahir Maharaj
Data Scientist | AI Engineer

P.S. Lets connect on LinkedIn!

➤ Want me to build your solution? Lets chat about how I can assist!
➤ Quick, practical management advice to leverage data and AI: Subscribe on LinkedIn
➤ Join my Medium community of 30k readers! Sharing my knowledge about data science and AI
➤ Website: https://sahirmaharaj.com
➤ Email: sahir@sahirmaharaj.com
➤ 100+ FREE Power BI Themes: Download Now

[edsaac]

@sahirmaharaj

You can apply custom CSS to st.dataframe to control text wrapping, cell spacing, and handling of newlines.

bad LLM

[Ankit_Srivastava]

@sahirmaharaj

st.dataframe(dataset, width=None, height=None)

Thanks Sahir. I tried this out but unfortunately it doesn’t work for me.

import streamlit as st
import pandas as pd
import time


def get_dataset():
    selected_columns = ["ID", "COL1", "COL2","COL3","COL4","COL5"]
    data = {
    "Column1": ["First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line First line\nSecond line ", "Data 1\nData 2", "Entry one\nEntry two", "Text A\nText B"],
    "Column2": ["Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 Example 1\nExample 2 ", "Sample 1\nSample 2", "Info A\nInfo B", "Detail 1\nDetail 2"],
    "Column3": ["Line one\nLine two", "Record 1\nRecord 2", "Note A\nNote B", "Item 1\nItem 2"],
    "Column4": ["Value A\nValue B", "Number 1\nNumber 2", "Content A\nContent B", "Piece 1\nPiece 2"]
}

    df = pd.DataFrame(data)
    return df

dataset = get_dataset()

custom_css = """
<style>
    .dataframe th, .dataframe td {
        white-space: pre-wrap;
        vertical-align: top;
        font-size: 20px;
    }
    .dataframe .blank, .dataframe .nan {
        color: #ccc;
    }
</style>
"""
st.markdown(custom_css, unsafe_allow_html=True)

st.dataframe(dataset, width=None, height=None)