Interatividade do Dash AG Grid

Construindo Dashboards com Dash e Plotly

Alex Scriven

Data Scientist

Estilizando todas as células do AG Grid

Não use style ❌
Use cellStyle em vez disso ✅

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

As duas primeiras colunas da tabela da lição anterior. Os cabeçalhos são "Major Category" e "Total Sales ($)", com quatro linhas de dados. Todo o conteúdo das células está alinhado à direita.

Estilizando algumas células do AG Grid

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

É a mesma tabela do slide anterior; porém, a primeira coluna "Major Category" está com texto centralizado e a segunda "Total Sales ($)" com texto alinhado à direita.

Mais exemplos de estilização

Use outras propriedades CSS para estilizar ✨

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

É a mesma tabela do slide anterior; porém, as células têm fundo preto e texto branco

Selecionando células

Use a propriedade cellClicked
Callback para imprimir as informações da célula clicada

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

Um gif da mesma tabela vista até agora no slideshow. Abaixo da tabela, um dicionário é atualizado com os detalhes da célula após o clique.

Selecionando linhas

Defina rowSelection como "single" ou "multiple"

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

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

Um gif da mesma tabela vista até agora no slideshow. Abaixo da tabela há uma área de texto cinza que é atualizada com um dicionário de toda a linha quando selecionada

Vamos praticar!

Construindo Dashboards com Dash e Plotly