Einführung in Dash AG Grid

Dashboards mit Dash und Plotly erstellen

Alex Scriven

Data Scientist

Was ist Dash AG Grid?

HTML-Tabellen-Tag (verfügbar in Dash)
html.Table statisch → eingeschränkt

Dash AG Grid – dynamisch und interaktiv
- Filtern, ausblenden, exportieren, stylen

Die Basistabelle

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]

Eine Tabelle mit 3 Spalten und vier Zeilen mit Daten aus dem bekannten E‑Commerce-Datensatz. Die Spaltenüberschriften sind „Major Category" mit Text darunter, „Total Sales ($)" mit Werten darunter und „Sales Volume" mit ganzzahligen Werten darunter

Zahlen formatieren

Problem: Finanzzahlen formatieren
- Lösung: valueFormatter verwenden
- JavaScript-Formatierungsfunktion

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"}
]
# Wie zuvor zum Layout hinzufügen

Zahlenausgabe formatieren

Schön formatiert ✨

Dieselbe Tabelle wie auf der vorherigen Folie. Die Spalte Total Sales hat nun Werte mit vorangestelltem Dollarzeichen und auf 2 Dezimalstellen gerundet. Die gesamte Tabelle hat 3 Spalten und vier Zeilen mit Daten aus dem bekannten E‑Commerce-Datensatz. Die Spaltenüberschriften sind „Major Category" mit Text darunter, „Total Sales ($)" und „Sales Volume" mit ganzzahligen Werten darunter

Sortieren hinzufügen

Sortieren ist standardmäßig aktiv ⭐

# Global deaktivieren
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# Für eine Spalte festlegen
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # Aktivieren
{"field": "Sales Volume"
 , "sortable": False} # Deaktivieren
]

$$ Ein GIF der Basistabelle von den ersten Folien; beim Klicken auf die Kopfzeilen werden die Zeilen sortiert

Filtern hinzufügen

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

Unterstützt Wert- und Bedingungsfilter

Ein GIF der Basistabelle von den ersten Folien; jetzt gibt es eine Zeile unter dem Header mit einem leeren Feld. Das GIF filtert zuerst die erste Spalte auf Cloth und dann die zweite per Dropdown „Greater than" und filtert so die Tabelle.

Pagination

Nutze Pagination für lange Tabellen 💡

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

Ein GIF derselben Basistabelle wie zuvor; es gibt jedoch nur zwei Datenzeilen und unten rechts eine Pagination-Steuerung mit Pfeilen und einem Zähler für Seitenzahl (2) und aktuelle Seite.

Sortieren und Filtern gelten tabellenweit 📌

Lass uns üben!

Dashboards mit Dash und Plotly erstellen