Table (or grid) with multiple inputs

[ferdy]

There is a sample code to add checkboxes in the column.

I tried experimenting it and it worked.

streamlit==1.17.0
streamlit-aggrid==0.3.3

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


data = {
    'Name': ['a', 'b', 'c'],
    'Paid': [True, False, True],
    'Attended': [False, True, True]
}

checkbox_renderer = JsCode("""
class CheckboxRenderer{

    init(params) {
        this.params = params;

        this.eGui = document.createElement('input');
        this.eGui.type = 'checkbox';
        this.eGui.checked = params.value;

        this.checkedHandler = this.checkedHandler.bind(this);
        this.eGui.addEventListener('click', this.checkedHandler);
    }

    checkedHandler(e) {
        let checked = e.target.checked;
        let colId = this.params.column.colId;
        this.params.node.setDataValue(colId, checked);
    }

    getGui(params) {
        return this.eGui;
    }

    destroy(params) {
    this.eGui.removeEventListener('click', this.checkedHandler);
    }
}//end class
""")

df = pd.DataFrame(data)

st.write('#### init data')
st.dataframe(df)

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_column('Paid', editable=True, cellRenderer=checkbox_renderer)
gb.configure_column('Attended', editable=True, cellRenderer=checkbox_renderer)

st.write('#### interface')
ag = AgGrid(
    df, 
    gridOptions=gb.build(),
    allow_unsafe_jscode=True,
    enable_enterprise_modules=False
)

new_data = ag['data']

st.write('#### updated data')
st.dataframe(new_data)

You can do whatever you want with the new_data.

Output