Dash AG Grid etkileşimi

Dash ve Plotly ile Paneller Oluşturma

Alex Scriven

Data Scientist

Tüm AG Grid hücrelerini biçimlendirme

style kullanılamaz ❌
Bunun yerine cellStyle kullanın ✅

grid = AgGrid(
defaultColDef={
    "cellStyle": 
    {"textAlign": "right"}}
)

Önceki dersteki tablonun ilk iki sütunu. Başlıklar "Major Category" ve "Total Sales ($)"; dört veri satırı var. Tüm hücrelerdeki veriler sağa hizalı.

Bazı AG Grid hücrelerini biçimlendirme

column_defs = [
{"field": "Major Category"
, "cellStyle": {"textAlign": "center"}},
{"field": "Total Sales ($)"
, "valueFormatter": money_fmt
, "cellStyle": {"textAlign": "right"}}
]

Önceki slayttaki tabloyla aynı; ancak "Major Category" sütunu ortalı, "Total Sales ($)" sütunu sağa hizalı.

Diğer biçimlendirme örnekleri

Stil için başka CSS kullanın ✨

grid = AgGrid(
# Other setup
defaultColDef={
"cellStyle": {
  "backgroundColor": "black",
   "color": "white"}
})

Önceki slayttaki tabloyla aynı; ancak hücrelerin arka planı siyah, metin beyaz.

Hücre seçimi

cellClicked özelliğini kullanın
Tıklanan hücre bilgisini yazdıran callback

@callback(
    Output("test_text", "children"),
    Input("my_grid", "cellClicked")
)
def show_cell_info(cell_data):
    return str(cell_data)

Şimdiye kadar slayt boyunca yer alan aynı tablo. Tablonun altında, tıklanınca hücre ayrıntılarıyla güncellenen bir sözlük görünür.

Satır seçimi

rowSelection değerini "single" veya "multiple" yapın

grid = AgGrid(
# Other parts
dashGridOptions={
"rowSelection": "single"}
)

@callback(
Output("test_text", "children"),
Input("my_grid", "selectedRows")
)

Şimdiye kadarki aynı tablo. Tablonun altında, seçildiğinde tüm satırın sözlüğüyle güncellenen gri bir metin alanı var.

Haydi pratik yapalım!

Dash ve Plotly ile Paneller Oluşturma