Introducción a Dash AG Grid

Creación de paneles con Dash y Plotly

Alex Scriven

Data Scientist

¿Qué es Dash AG Grid?

Etiqueta de tabla HTML (disponible en Dash)
html.Table es estática → limitada

Dash AG Grid: dinámica e interactiva
- Filtrar, ocultar, exportar, dar estilo

La tabla básica

from dash_ag_grid import AgGrid

column_defs = [
    {"field": "Major Category"},
    {"field": "Total Sales ($)"},
    {"field": "Sales Volume"},
]

grid = AgGrid(
columnDefs=column_defs,

rowData=major_cat_tb.to_dict("records"))

app.layout = [grid]

Una tabla con 3 columnas y cuatro filas del conocido dataset de comercio electrónico. Los encabezados son "Major Category" con texto debajo, "Total Sales ($)" con valores debajo y "Sales Volume" con enteros debajo

Da formato a los números

Problema: formateo de números financieros
- Solución: usa valueFormatter
- Función de formateo en JavaScript

money_fmt = {
"function": (
    """params.value.toLocaleString(
    'en-US', {style: 'currency', currency: 'USD'})"""
)}

column_defs = [
    {"field": "Major Category"},
    {"field": "Total Sales ($)", "valueFormatter": money_fmt},
    {"field": "Sales Volume"}
]
# Añádelo al layout como antes

Formatea la salida numérica

Bien formateado ✨

La misma tabla de la diapositiva anterior. Ahora la columna Total Sales tiene valores con signo de dólar y redondeados a 2 decimales. La tabla tiene 3 columnas y cuatro filas del dataset de e-commerce. Encabezados: "Major Category", "Total Sales ($)" y "Sales Volume" con enteros debajo

Añadir ordenación

La ordenación viene activada por defecto ⭐

# Desactivarla globalmente
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# Especificar por columna
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # Activar
{"field": "Sales Volume"
 , "sortable": False} # Desactivar
]

$$ Un gif de la tabla básica de las primeras diapositivas; al hacer clic en los encabezados, las filas se ordenan

Añadir filtrado

grid = AgGrid(
defaultColDef={
  "filter": True
  , "floatingFilter": True}
)

Admite filtros por valor y por condición

Un gif de la tabla básica; ahora hay una fila bajo el encabezado con una caja en blanco. Primero filtra la primera columna por Cloth y luego la segunda con el desplegable Greater than, filtrando la tabla.

Paginación

Usa paginación para tablas largas 💡

grid = AgGrid(
    dashGridOptions={
    "pagination": True,        
    "paginationPageSize": 2
    }

Un gif de la misma tabla básica; solo hay dos filas y abajo a la derecha hay un control de paginación con flechas y un contador (2 páginas y la actual).

Ordenar y filtrar se aplican a toda la tabla 📌

¡Vamos a practicar!

Creación de paneles con Dash y Plotly