Interactividad de Dash AG Grid

Creación de paneles con Dash y Plotly

Alex Scriven

Data Scientist

Estilo para todas las celdas de AG Grid

No se puede usar style ❌
Usa cellStyle ✅

grid = AgGrid(
defaultColDef={
    "cellStyle": 
    {"textAlign": "right"}}
)

Las dos primeras columnas de la tabla de la lección anterior. Encabezados: "Major Category" y "Total Sales ($)" con cuatro filas. Todo el contenido de las celdas está alineado a la derecha.

Estilo para algunas celdas de AG Grid

column_defs = [
{"field": "Major Category"
, "cellStyle": {"textAlign": "center"}},
{"field": "Total Sales ($)"
, "valueFormatter": money_fmt
, "cellStyle": {"textAlign": "right"}}
]

Misma tabla que en la diapositiva anterior; la primera columna "Major Category" está centrada y la segunda "Total Sales ($)" alineada a la derecha.

Más ejemplos de estilo

Usa otras reglas CSS para el estilo ✨

grid = AgGrid(
# Other setup
defaultColDef={
"cellStyle": {
  "backgroundColor": "black",
   "color": "white"}
})

Misma tabla que en la diapositiva anterior; las celdas tienen fondo negro y texto blanco.

Seleccionar celdas

Usa la propiedad cellClicked
Callback para mostrar la info de la celda clicada

@callback(
    Output("test_text", "children"),
    Input("my_grid", "cellClicked")
)
def show_cell_info(cell_data):
    return str(cell_data)

Un gif de la misma tabla vista hasta ahora. Bajo la tabla aparece un diccionario que se actualiza con los detalles de la celda al hacer clic.

Seleccionar filas

Define rowSelection como "single" o "multiple"

grid = AgGrid(
# Other parts
dashGridOptions={
"rowSelection": "single"}
)

@callback(
Output("test_text", "children"),
Input("my_grid", "selectedRows")
)

Un gif de la misma tabla vista hasta ahora. Bajo la tabla hay un área de texto gris que se actualiza con un diccionario de toda la fila al seleccionarla.

¡Vamos a practicar!

Creación de paneles con Dash y Plotly