When I focus a cell in an editable Streamlit table, I want the name of the logged in user to appear

Custom Components
,
1

Hi! I’m new to this community and what I saw delighted me
I have an editable Streamlit table, but I need to display the logged-in user at the top of the selected cell. I found some great code, but I don’t know how to implement it in my table.
Here I show the code that I want to implement in my editable table


    usuario = st.session_state.get("Usuario", "desconocido")

    #st.write(f"👤 Usuario actual: `{usuario}`")
    components.html(
        f"""
        <style>
            table {{
                border-collapse: collapse;
                margin-top: 10px;
            }}
            td {{
                border: 1px solid #aaa;
                padding: 4px;
                position: relative;
            }}
            input {{
                width: 60px;
                text-align: center;
            }}
            .overlay {{
                position: absolute;
                top: -20px;
                left: 0;
                font-size: 12px;
                color: #28a745; /* Verde */
                background-color: #e6ffe6;
                padding: 2px 5px;
                border-radius: 4px;
                display: none;
            }}
            td:focus-within .overlay {{
                display: inline-block;
            }}
        </style>

        <table>
            {''.join([
                '<tr>' + ''.join([
                    f'''
                    <td>
                        <div class="overlay">{usuario}</div>
                        <input id="R{r+1}C{c+1}" onfocus="highlightUser(this)" />
                    </td>
                    '''
                    for c in range(5)
                ]) + '</tr>'
                for r in range(5)
            ])}
        </table>

        <script>
            function highlightUser(el) {{
                // Simple para activar overlay: no necesita nada, CSS se encarga
                // Aquí lógica para desactivar otros overlays
            }}
        </script>
        """,
        height=350
    )

image
image536×215 1.4 KB

And this is my editable table, it should be noted that all the data in this table comes from the SQL database


    df_data = st.data_editor(stylerd, column_config={'id': None,'Guardar': st.column_config.CheckboxColumn("Guardar",),'Incidente': st.column_config.TextColumn("Incidente", max_chars=7), 'Solucion_Ejecutada': st.column_config.TextColumn("Solución Ejecutada"),'Causa_Raiz': st.column_config.TextColumn("Causa_Raiz"),'Solucion2': st.column_config.TextColumn("Solucion2"),'Resumen_OT': st.column_config.TextColumn("Resumen_OT"),'Plantilla_OT': st.column_config.TextColumn("Plantilla_OT"), 'Avance' : st.column_config.TextColumn("Avance"),'HORA_INICIO': st.column_config.DatetimeColumn("HORA_INICIO", format="YYYY-MM-DD HH:mm:00"),'HORA_RECUPERACION': st.column_config.DatetimeColumn("HORA_RECUPERACION", format="YYYY-MM-DD HH:mm:00"),'Version': st.column_config.NumberColumn("Versión", disabled=True)}, disabled=["id","TMR","Tiempo_Efectivo", "Solo_CONTRATISTAS","Tiempo_Decimal","Tiempo_Efectivo_Decimal","Solucion_Ejecutada","Causa_Raiz","Solucion2","Resumen_OT", "Avance", "Estado_avance"], num_rows= "dynamic")

I would greatly appreciate any help.