Wprowadzenie do Dash AG Grid

Tworzenie dashboardów z Dash i Plotly

Alex Scriven

Data Scientist

Czym jest Dash AG Grid?

Znacznik tabeli HTML (dostępny w Dash)
html.Table statyczny → ograniczony

Dash AG Grid – dynamiczny i interaktywny
- Filtrowanie, ukrywanie, eksport, stylizacja

Podstawowa tabela

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]

Tabela z 3 kolumnami i 4 wierszami z danymi e-commerce. Nagłówki: „Major Category" (tekst), „Total Sales ($)" (wartości) i „Sales Volume" (liczby całkowite)

Formatowanie liczb

Problem: formatowanie liczb finansowych
- Rozwiązanie: użyj valueFormatter
- Funkcja formatująca w 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

Wynik formatowania liczb

Poprawnie sformatowane ✨

Ta sama tabela co wcześniej, lecz kolumna Total Sales ma wartości ze znakiem dolara i zaokrąglone do 2 miejsc po przecinku

Dodawanie sortowania

Sortowanie włączone domyślnie ⭐

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

$$ Gif podstawowej tabeli – kliknięcie nagłówka kolumny sortuje wiersze

Dodawanie filtrowania

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

Obsługuje filtry wartości i warunków

Gif podstawowej tabeli z wierszem filtrowania pod nagłówkiem – filtrowanie po tekście i wartości liczbowej

Paginacja

Użyj paginacji dla długich tabel 💡

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

Gif podstawowej tabeli z dwiema wierszami danych i przełącznikiem paginacji w prawym dolnym rogu z licznikiem stron

Sortowanie i filtrowanie działają na całej tabeli 📌

Czas na ćwiczenia!

Tworzenie dashboardów z Dash i Plotly