Introduktion till Dash AG Grid

Bygg dashboards med Dash och Plotly

Alex Scriven

Data Scientist

Vad är ett Dash AG Grid?

HTML-tabelltagg (tillgänglig i Dash)
html.Table statisk → begränsad

Dash AG Grid – dynamisk och interaktiv
- Filtrering, döljning, export, formatering

Den grundläggande tabellen

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]

En tabell med 3 kolumner och fyra rader med data från det välkända e-handelsdatasettet. Kolumnrubrikerna är "Major Category" med text i cellerna nedan, "Total Sales ($)" med värden nedan och "Sales Volume" med heltalsvärden nedan

Formatera talen

Problem: formatering av finansiella tal
- Lösning: använd valueFormatter
- JavaScript-formateringsfunktion

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

Resultat efter talformatering

Snyggt formaterat ✨

Samma tabell som på föregående slide. Kolumnen Total Sales visar nu värden med ett dollartecken och två decimaler. Tabellen har 3 kolumner och fyra rader med data från e-handelsdatasettet. Kolumnrubrikerna är "Major Category" med text nedan, "Total Sales ($)" och "Sales Volume" med heltalsvärden nedan

Lägg till sortering

Sortering aktiverad som standard ⭐

# 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
]

$$ En gif av den grundläggande tabellen från de första slidesen där raderna sorteras när användaren klickar på kolumnrubrikerna

Lägg till filtrering

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

Stöder värde- och villkorsfilter

En gif av den grundläggande tabellen från de första slidesen, men nu finns det en rad under rubriken med ett tomt sökfält. I gifen filtreras först den första kolumnen på Cloth och sedan den andra med en "Greater than"-rullgardinsmeny.

Paginering

Använd paginering för långa tabeller 💡

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

En gif av samma grundläggande tabell från tidigare slides, men med bara två datarader. Längst ned till höger i tabellen finns en pagineringskontroll med pilar åt vänster och höger samt en räknare som visar antal sidor (2) och aktuell sida.

Sortering och filtrering gäller hela tabellen 📌

Nu kör vi en övning!

Bygg dashboards med Dash och Plotly