I want to change a tabulated table html output in python

Question

I am using streamlit and loading data that I would like to put into a table with more customization than is currently offered by st.dataframe and st.table.

Below I use the tabulate package to change my data (after manipulating it with pandas) into an html table. My data is large so not something that I would like to type out. This is shown below with random data.

I then would like to add to the basic html template that is produced with my data things like a custom header and a larger font and a height for the table, however I can't seem to find a way to access the html stored in test2. I can wrap things around it (shown below) but can't get into the which is stored in test2.

Any thoughts on how to add to a tabulated tables output html would be helpful

import tabulate as tb
import streamlit as st
import pandas as pd
import numpy as np

np.random.seed(42)

data = {
    'A': np.random.rand(100),
    'B': np.random.randint(1, 100, size=100),
    'C': np.random.choice(['X', 'Y', 'Z'], size=100)
}

df = pd.DataFrame(data)

test2=tb.tabulate(data, tablefmt='html')

test3 = f'<div style="height: 150; overflow: auto">{test2}</div>'

st.markdown(test3, unsafe_allow_html=True)

tabulate has a headers parameter, and font/height can be changed by outputting custom CSS. Have you considered these options? — Sébastien Vercammen
– Sébastien Vercammen, Commented Nov 21, 2023 at 22:37
first: you can always use CSS to format elements in HTML. Second: df.to_html() generates HTML with table without using tabulate. And df.style has functions to format table before to_html(). — furas
– furas, Commented Nov 22, 2023 at 0:59

furas · Accepted Answer · 2023-11-22 01:56:42Z

tabulate has options headers and showindex

table = tb.tabulate(data, tablefmt='html', headers=df.columns, showindex=True)

st.markdown(table, unsafe_allow_html=True)

Source code: tabulate

You can also add CSS to change it

table = tb.tabulate(data, tablefmt='html', headers=df.columns, showindex=True)

st.write('<style>table th {font-size: 30px; color: red} table tr:nth-child(odd) td {background-color: #eee}</style>', unsafe_allow_html=True)

st.markdown(table, unsafe_allow_html=True)

But you may also use DataFrame to generate HTML without tabulate.
And it may use df.style with many functions to format every cell.

This example changes background for maximal and minimal value in columns A and B

df = pd.DataFrame(data)

def highlight_max(x, props):
    return np.where(x == np.nanmax(x.to_numpy()), props, None)
def highlight_min(x, props):
    return np.where(x == np.nanmin(x.to_numpy()), props, None)

df = df.style \
        .apply(highlight_max, props='background-color: #fed', subset=['A','B'], axis=0) \
        .apply(highlight_min, props='background-color: #afa', subset=['A','B'], axis=0)

html = df.to_html()

st.write(html, unsafe_allow_html=True)

Full code:

import tabulate as tb
import streamlit as st
import pandas as pd
import numpy as np

np.random.seed(42)

data = {
    'A': np.random.rand(5),
    'B': np.random.randint(1, 100, size=5),
    'C': np.random.choice(['X', 'Y', 'Z'], size=5)
}

df = pd.DataFrame(data)

def highlight_max(x, props):
    return np.where(x == np.nanmax(x.to_numpy()), props, None)
def highlight_min(x, props):
    return np.where(x == np.nanmin(x.to_numpy()), props, None)

df = df.style \
        .apply(highlight_max, props='background-color: #fed', subset=['A','B'], axis=0) \
        .apply(highlight_min, props='background-color: #afa', subset=['A','B'], axis=0)

html = df.to_html()

st.write(html, unsafe_allow_html=True)

table = tb.tabulate(data, tablefmt='html', headers=df.columns, showindex=True)
st.write('<style>table th {font-size: 30px; color: red} table tr:nth-child(odd) td {background-color: #eee}</style>', unsafe_allow_html=True)
st.markdown(table, unsafe_allow_html=True)

Collectives™ on Stack Overflow

I want to change a tabulated table html output in python

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related