Úvod do Dash AG Grid

Tvorba dashboardů s Dash a Plotly

Alex Scriven

Data Scientist

Co je Dash AG Grid?

HTML tag table (dostupný v Dash)
html.Table statický → omezený

Dash AG Grid – dynamický a interaktivní
- Filtrování, skrývání, export, stylování

Základní tabulka

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]

Tabulka se 3 sloupci a čtyřmi řádky dat z e-commerce datasetu. Záhlaví sloupců jsou „Major Category" (text), „Total Sales ($)" (hodnoty) a „Sales Volume" (celá čísla).

Formátování čísel

Problém: formátování finančních čísel
- Řešení: použití valueFormatter
- Formátovací funkce v JavaScriptu

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

Výstup formátování čísel

Pěkně naformátováno ✨

Stejná tabulka jako na předchozím snímku, avšak sloupec Total Sales nyní zobrazuje hodnoty formátované se znakem dolaru a zaokrouhlené na 2 desetinná místa. Tabulka má 3 sloupce a čtyři řádky dat z e-commerce datasetu.

Přidání řazení

Řazení povoleno ve výchozím nastavení ⭐

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

$$ Animace základní tabulky z prvních snímků – po kliknutí na záhlaví sloupce se řádky seřadí

Přidání filtrování

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

Podporuje filtry podle hodnoty a podmínky

Animace základní tabulky s řádkem pod záhlavím obsahujícím prázdné pole. Animace nejprve filtruje první sloupec podle hodnoty „Cloth" a poté druhý sloupec pomocí rozevíracího filtru „Větší než".

Stránkování

Pro dlouhé tabulky použijte stránkování 💡

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

Animace základní tabulky se dvěma řádky dat a ovládáním stránkování v pravém dolním rohu s šipkami a počítadlem stránek (2 stránky).

Řazení a filtrování se uplatní na celou tabulku 📌

Pojďme si to procvičit!

Tvorba dashboardů s Dash a Plotly