Giới thiệu Dash AG Grid

Xây dựng Dashboard với Dash và Plotly

Alex Scriven

Data Scientist

Dash AG Grid là gì?

Thẻ bảng HTML (có trong Dash)
html.Table tĩnh → hạn chế

Dash AG Grid - động và tương tác
- Lọc, ẩn, xuất, tạo kiểu

Bảng cơ bản

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]

Một bảng với 3 cột và 4 hàng từ bộ dữ liệu thương mại điện tử quen thuộc. Tiêu đề cột: "Major Category" có văn bản, "Total Sales ($)" có giá trị, và "Sales Volume" có số nguyên.

Định dạng số

Vấn đề: định dạng số tài chính
- Giải pháp: dùng valueFormatter
- Hàm định dạng 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"}
]
# Thêm vào layout như trước

Định dạng đầu ra số

Định dạng đẹp ✨

Cùng bảng như slide trước. Cột Total Sales nay có dấu $ phía trước và làm tròn 2 chữ số thập phân. Bảng có 3 cột và 4 hàng từ bộ dữ liệu thương mại điện tử; tiêu đề: "Major Category", "Total Sales ($)", và "Sales Volume" với số nguyên.

Thêm sắp xếp

Sắp xếp bật mặc định ⭐

# Tắt toàn cục
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# Chỉ định cho một cột
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # Bật
{"field": "Sales Volume"
 , "sortable": False} # Tắt
]

$$ Một GIF của bảng cơ bản từ các slide đầu; khi bấm tiêu đề cột, các hàng được sắp xếp

Thêm lọc

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

Hỗ trợ bộ lọc theo giá trị và điều kiện

Một GIF của bảng cơ bản; nay có hàng bộ lọc dưới tiêu đề. GIF lọc cột đầu theo Cloth rồi cột hai bằng menu Greater than, làm lọc bảng.

Phân trang

Dùng phân trang cho bảng dài 💡

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

GIF của cùng bảng cơ bản; chỉ có hai hàng và góc phải dưới có điều khiển phân trang với mũi tên và bộ đếm số trang (2) và trang hiện tại.

Sắp xếp và lọc áp dụng toàn bảng 📌

Ayo berlatih!

Xây dựng Dashboard với Dash và Plotly