Introdução ao Dash AG Grid

Construindo Dashboards com Dash e Plotly

Alex Scriven

Data Scientist

O que é o Dash AG Grid?

Tag de tabela HTML (disponível no Dash)
html.Table estática → limitada

Dash AG Grid — dinâmica e interativa
- Filtro, ocultar, exportar, estilizar

A tabela 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]

Uma tabela com 3 colunas e quatro linhas contendo dados do conjunto de dados de e-commerce familiar. Os cabeçalhos são "Major Category", que contém texto nas células abaixo, "Total Sales ($)", que tem valores abaixo, e "Sales Volume", com valores inteiros abaixo

Formatar números

Problema: formatação de números financeiros
- Solução: use valueFormatter
- Função de formatação em 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"}
]
# Add to layout as before

Formatar a saída numérica

Bem formatado ✨

A mesma tabela do slide anterior. Porém, a coluna Total Sales agora tem valores com cifrão e arredondados para 2 casas decimais. A tabela tem 3 colunas e quatro linhas do conjunto de dados de e-commerce. Os cabeçalhos são "Major Category", com texto abaixo, "Total Sales ($)" e "Sales Volume", com valores inteiros abaixo

Adicionar ordenação

Ordenação ativada por padrão ⭐

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

# Especificar por coluna
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # Ativar
{"field": "Sales Volume"
 , "sortable": False} # Desativar
]

$$ Um gif da tabela básica dos primeiros slides; ao clicar nos cabeçalhos, as linhas são ordenadas

Adicionar filtragem

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

Suporta filtros de valor e de condição

Um gif da tabela básica dos primeiros slides; agora há uma linha abaixo do cabeçalho com uma caixa em branco. O gif filtra a primeira coluna por Cloth e depois a segunda usando o menu Greater than, filtrando a tabela.

Paginação

Use paginação para tabelas longas 💡

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

Um gif da mesma tabela básica dos slides anteriores; agora há apenas duas linhas e, no canto inferior direito, um controle de paginação com setas e um contador indicando 2 páginas e a página atual.

Ordenar e filtrar valem para a tabela toda 📌

Vamos praticar!

Construindo Dashboards com Dash e Plotly