Introductie tot Dash AG Grid

Dashboards bouwen met Dash en Plotly

Alex Scriven

Data Scientist

Wat is Dash AG Grid?

HTML-tabeltag (beschikbaar in Dash)
html.Table statisch → beperkt

Dash AG Grid - dynamisch en interactief
- Filteren, verbergen, exporteren, stijlen

De basistabel

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]

Een tabel met 3 kolommen en vier rijen met gegevens uit de bekende e-commercedataset. De kolomkoppen zijn "Major Category" met tekst eronder, "Total Sales ($)" met waarden eronder en "Sales Volume" met gehele getallen eronder

Getallen opmaken

Probleem: opmaak van financiële getallen
- Oplossing: gebruik valueFormatter
- JavaScript-opmaakfunctie

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"}
]
# Voeg toe aan layout zoals eerder

Uitvoer van getallen opmaken

Mooi opgemaakt ✨

Dezelfde tabel als op de vorige slide. De kolom Total Sales heeft nu waarden met een dollarteken ervoor en afgerond op 2 decimalen. De volledige tabel heeft 3 kolommen en vier rijen met gegevens uit de bekende e-commercedataset. De kolomkoppen zijn "Major Category", "Total Sales ($)" en "Sales Volume" met gehele getallen eronder

Sorteren toevoegen

Sorteren standaard aan ⭐

# Globaal uitschakelen
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# Per kolom instellen
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # Aan
{"field": "Sales Volume"
 , "sortable": False} # Uit
]

$$ Een gif van de basistabel uit de eerste slides. Wanneer op de kolomkoppen wordt geklikt, worden de rijen gesorteerd

Filteren toevoegen

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

Ondersteunt waarde- en voorwaardefilters

Een gif van de basistabel uit de eerste slides. Er staat nu een rij onder de header met een leeg invoervak. De gif filtert eerst de eerste kolom op Cloth en daarna de tweede met de optie Greater than, waardoor de tabel wordt gefilterd.

Paginering

Gebruik paginering voor lange tabellen 💡

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

Een gif van dezelfde basistabel als eerder, maar nu met slechts twee rijen. Rechtsonder staat een pagineringsbalk met pijlen en een teller met het aantal pagina's (2) en de huidige pagina.

Sorteren en filteren gelden voor de hele tabel 📌

Laten we oefenen!

Dashboards bouwen met Dash en Plotly