Dash AG Grid’e giriş

Dash ve Plotly ile Paneller Oluşturma

Alex Scriven

Data Scientist

Dash AG Grid nedir?

HTML tablo etiketi (bkz. Dash)
html.Table statik → sınırlı

Dash AG Grid - dinamik ve etkileşimli
- Filtreleme, gizleme, dışa aktarma, stillendirme

Temel tablo

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]

3 sütun ve 4 satırlı bir tablo; bilinen e-ticaret veri setinden veriler içerir. Sütun başlıkları: "Major Category" (metin), "Total Sales ($)" (değerler) ve "Sales Volume" (tamsayılar)

Sayıları biçimlendirin

Sorun: Finansal sayı biçimlendirme
- Çözüm: valueFormatter kullanın
- JavaScript biçimlendirme fonksiyonu

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"}
]
# Düzen’e önceki gibi ekleyin

Sayı çıktısını biçimlendirin

Şık biçimlendirildi ✨

Önceki slayttaki tablonun aynısı. Ancak Total Sales sütunundaki değerler artık dolar işaretiyle ve 2 ondalıklı biçimde gösterilir. Tablo 3 sütun ve 4 satırdan oluşur; sütun başlıkları: "Major Category", "Total Sales ($)" ve "Sales Volume" (tamsayılar).

Sıralama ekleyin

Sıralama varsayılan olarak açık ⭐

# Tümünde kapat
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# Sütuna özel belirtin
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # Aç
{"field": "Sales Volume"
 , "sortable": False} # Kapat
]

$$ İlk slaytlardaki temel tabloda, başlıklara tıklandığında satırların sıralanmasını gösteren bir gif

Filtreleme ekleyin

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

Değer ve koşul filtrelerini destekler

İlk slaytlardaki temel tablonun bir gif’i; başlık altındaki boş kutu yer alır. Gif’te önce ilk sütun Cloth ile filtrelenir, sonra ikincisi Greater than açılır menüsüyle filtrelenir.

Sayfalandırma

Uzun tablolar için sayfalandırma kullanın 💡

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

Aynı temel tablonun gif’i; yalnızca iki veri satırı vardır ve sağ altta sağ/sol oklar ile toplam ve mevcut sayfayı gösteren sayfalandırma bulunur (2).

Sıralama ve filtreleme tüm tabloya uygulanır 📌

Haydi pratik yapalım!

Dash ve Plotly ile Paneller Oluşturma