Introducere în Dash AG Grid

Crearea dashboardurilor cu Dash și Plotly

Alex Scriven

Data Scientist

Ce este un Dash AG Grid?

Eticheta HTML table (disponibilă în Dash)
html.Table static → limitat

Dash AG Grid - dinamic și interactiv
- Filtrare, ascundere, export, stilizare

Tabelul de bază

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]

Un tabel cu 3 coloane și patru rânduri cu date din setul de date e-commerce. Anteturile sunt „Major Category" cu text, „Total Sales ($)" cu valori și „Sales Volume" cu valori întregi

Formatați numerele

Problemă: formatarea numerelor financiare
- Soluție: folosiți valueFormatter
- Funcție de formatare 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

Rezultatul formatării numerelor

Formatare corectă ✨

Același tabel din slide-ul anterior. Coloana Total Sales are acum valori formatate cu semn de dolar și rotunjite la 2 zecimale. Tabelul are 3 coloane și patru rânduri cu date din setul de date e-commerce: „Major Category", „Total Sales ($)" și „Sales Volume"

Adăugați sortare

Sortarea activată implicit ⭐

# Turn off globally
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# Specify for a column
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # Turn on
{"field": "Sales Volume"
 , "sortable": False} # Turn off
]

$$ Un gif al tabelului de bază din primele slide-uri; când se face clic pe anteturi, rândurile se sortează

Adăugați filtrare

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

Suportă filtre de valoare și condiție

Un gif al tabelului de bază din primele slide-uri; acum există un rând sub antet cu câmpuri de filtrare. Gif-ul filtrează prima coloană după „Cloth", apoi a doua folosind un filtru „Mai mare decât".

Paginare

Folosiți paginarea pentru tabele lungi 💡

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

Un gif al tabelului de bază din slide-urile anterioare, cu doar două rânduri de date; în dreapta-jos apare un selector de pagini cu săgeți și un contor (2 pagini, pagina curentă).

Sortarea și filtrarea se aplică întregului tabel 📌

Să exersăm!

Crearea dashboardurilor cu Dash și Plotly