Select and delete row in st.data_editor using native checkbox

This post is similar to this one:

I’m having a a st.data_editor where I have data pulled from SQL table:

The code below works like a charm if I use the right column:

The Delete button appears, I can click it and the rows will be removed both from the dataframe and SQL table. What I would like to achieve is to get rid of this right column and use the native table checkboxes in order to select the rows and delete them .

Has anyone achieved this already?

The code looks like this:

        # Editable table
        st.header("Database")
        edited_df = st.data_editor(
            df,
            num_rows="dynamic",
            use_container_width=False,
            column_config={
                "id": st.column_config.NumberColumn("ID", disabled=True),
                "name": st.column_config.TextColumn("Product Name"),
                "Select": st.column_config.CheckboxColumn("Select")
            },
            hide_index=True,
            key="skills_editor"
        )
        
        # Proper handling of the Select column
        edited_df['Select'] = edited_df['Select'].fillna(False)
        edited_df = edited_df.infer_objects(copy=False)
        edited_df['Select'] = edited_df['Select'].astype(bool)
        
        # Check if there are rows to delete
        rows_to_delete = edited_df[edited_df['Select']]['id'].tolist()
        if rows_to_delete and st.button("Delete"):
            for id in rows_to_delete:
                product_table_crud_ops.delete(id)
            st.success("Selected rows deleted successfully!")
            time.sleep(1)
            st.rerun()```

From the docs:

  • To delete rows, select one or more rows using the checkboxes on the left. Click the delete icon (delete) or press the delete key on your keyboard.