Code Editor for app.py

from st_aggrid import AgGrid, GridOptionsBuilder, JsCode
import pandas as pd

# Create a cell renderer component for a progress bar
progress_renderer = JsCode("""
class ProgressRenderer {
    init(params) {
        this.eGui = document.createElement('div');
        const percentage = params.value;
        this.eGui.innerHTML = `
            <div style="width: 100%; height: 20px; background-color: #eee;">
                <div style="width: ${percentage}%; height: 100%; background-color: #4CAF50;">
                    <span style="padding-left: 5px;">${percentage}%</span>
                </div>
            </div>
        `;
    }

    getGui() {
        return this.eGui;
    }
}
""")

# Sample data
df = pd.DataFrame({
    'task': ['Task A', 'Task B', 'Task C'],
    'progress': [25, 75, 100]
})

# Configure grid options
gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_column('progress', 
                   cellRenderer=progress_renderer,
                   width=200)
grid_options = gb.build()

# Display the grid
grid_return = AgGrid(
    df,
    gridOptions=grid_options,
    allow_unsafe_jscode=True
)