Code Editor for app.py

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

# Create sample data with boolean values
df = pd.DataFrame({
    'task': ['Task A', 'Task B', 'Task C'],
    'active': [True, False, True]
})

toggle_renderer = JsCode("""
class ToggleRenderer {
    init(params) {
        this.params = params;
        this.eGui = document.createElement('div');
        this.value = params.value;
        
        this.eGui.innerHTML = `
            <label class="switch">
                <input type="checkbox" ${this.value ? 'checked' : ''}>
                <span class="slider round"></span>
            </label>
        `;
        
        this.checkbox = this.eGui.querySelector('input');
        this.checkbox.addEventListener('change', this.onChange.bind(this));
    }

    getGui() {
        return this.eGui;
    }

    onChange(event) {
        this.value = event.target.checked;
        this.params.setValue(this.value);
    }

    destroy() {
        this.checkbox.removeEventListener('change', this.onChange.bind(this));
    }
}
""")

# Add custom CSS for the toggle switch
st.markdown("""
<style>
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #2196F3;
}
input:checked + .slider:before {
    transform: translateX(26px);
}
</style>
""", unsafe_allow_html=True)

# Configure grid options
gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_column('active', 
                   cellRenderer=toggle_renderer,
                   editable=True)
grid_options = gb.build()

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

# Display the updated data
st.write("Updated data:", grid_return['data'])