Interaktivitas Dash AG Grid

Membangun Dasbor dengan Dash dan Plotly

Alex Scriven

Data Scientist

Gaya untuk semua sel AG Grid

Tidak bisa pakai style ❌
Gunakan cellStyle sebagai gantinya ✅

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

Dua kolom pertama dari tabel pelajaran sebelumnya. Berjudul "Major Category" dan "Total Sales ($)" dengan empat baris data. Semua data rata kanan.

Gaya untuk beberapa sel AG Grid

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

Tabel yang sama seperti slide sebelumnya; namun kolom "Major Category" rata tengah dan kolom "Total Sales ($)" rata kanan.

Contoh styling lainnya

Gunakan CSS lain untuk styling ✨

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

Tabel yang sama seperti slide sebelumnya; namun sel memiliki latar belakang hitam dan teks putih

Memilih sel

Gunakan properti cellClicked
Callback untuk menampilkan info sel yang diklik

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

GIF tabel yang sama seperti di slide sebelumnya. Di bawah tabel, sebuah dictionary diperbarui dengan detail sel setelah diklik.

Memilih baris

Setel rowSelection ke "single" atau "multiple"

grid = AgGrid(
# Bagian lain
dashGridOptions={
"rowSelection": "single"}
)

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

GIF tabel yang sama seperti di slideshow sebelumnya. Di bawah tabel ada area teks abu-abu yang diperbarui dengan dictionary satu baris penuh saat dipilih

Ayo berlatih!

Membangun Dasbor dengan Dash dan Plotly