Code Editor for app.py

import streamlit as st
import streamlit.components.v1 as components
import jinja2
import pandas as pd
import numpy as np
from streamlit_js_eval import streamlit_js_eval

st.set_page_config(layout="wide")
st.title("Full screen data frame")

# Generate fake data
n_cols = 10
df = pd.DataFrame(np.random.randn(100, n_cols),
                  columns=("col %d" % i for i in range(n_cols)))


# get width
page_width = streamlit_js_eval(js_expressions='window.innerWidth', key='WIDTH',  want_output = True)
st.write(f"Width: {page_width}")

# Define maximum width as a variable
width = page_width
height = 600 


# Generate HTML table using Jinja2
template = jinja2.Template("""
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

<div style="width: {{width}}px; height: {{height}}px; overflow-y: auto; overflow-x: auto;" class="mx-auto p-4 border border-gray-300 rounded-lg shadow-lg">
    <table class="min-w-full border-collapse">
        <thead>
            <tr class="bg-gray-200">
                {% for column in columns %}
                    <th class="p-2 border border-gray-300 text-left">{{ column }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in rows %}
                <tr class="hover:bg-gray-100">
                    {% for value in row %}
                        <td class="p-2 border border-gray-300">{{ value }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
""")


html_table = template.render(columns=df.columns, rows=df.values.tolist(), width=width, height=height)
components.html(html_table, height=height, width=width)