Pengantar Dash AG Grid

Membangun Dasbor dengan Dash dan Plotly

Alex Scriven

Data Scientist

Apa itu Dash AG Grid?

Tag tabel HTML (tersedia di Dash)
html.Table statis → terbatas

Dash AG Grid - dinamis dan interaktif
- Pemfilteran, sembunyi kolom, ekspor, styling

Tabel dasar

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]

Tabel dengan 3 kolom dan empat baris dari dataset e-commerce. Header kolom: "Major Category" berisi teks, "Total Sales ($)" berisi nilai, dan "Sales Volume" berisi bilangan bulat.

Format angka

Masalah: format angka finansial
- Solusi: gunakan valueFormatter
- Fungsi pemformatan 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"}
]
# Tambahkan ke layout seperti sebelumnya

Format keluaran angka

Tertata rapi ✨

Tabel yang sama seperti slide sebelumnya. Kolom Total Sales kini berformat dengan tanda dolar dan dibulatkan 2 desimal. Tabel memiliki 3 kolom dan empat baris dari dataset e-commerce. Header: "Major Category", "Total Sales ($)", dan "Sales Volume" berisi bilangan bulat.

Tambahkan pengurutan

Pengurutan aktif secara default ⭐

# Matikan global
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# Atur per kolom
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # Aktifkan
{"field": "Sales Volume"
 , "sortable": False} # Matikan
]

$$ GIF tabel dasar dari slide pertama; saat header diklik, baris-baris diurutkan

Tambahkan pemfilteran

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

Mendukung filter nilai dan kondisi

GIF tabel dasar; kini ada baris di bawah header berisi kotak kosong. GIF memfilter kolom pertama ke Cloth lalu kolom kedua dengan dropdown Greater than, memfilter tabel.

Pagination

Gunakan pagination untuk tabel panjang 💡

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

GIF tabel yang sama; kini hanya dua baris data dan di kanan bawah ada kontrol pagination dengan panah kiri/kanan dan penghitung 2 halaman serta halaman aktif.

Urut dan filter berlaku untuk seluruh tabel 📌

Ayo berlatih!

Membangun Dasbor dengan Dash dan Plotly