Tương tác với Dash AG Grid

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

Alex Scriven

Data Scientist

Style cho mọi ô AG Grid

 

  • Không dùng style ❌
  • Thay bằng cellStyle ✅
grid = AgGrid(
defaultColDef={
    "cellStyle": 
    {"textAlign": "right"}}
)

 

Hai cột đầu của bảng từ bài trước. Tiêu đề "Major Category" và "Total Sales ($)" với bốn hàng dữ liệu. Tất cả dữ liệu canh phải.

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

Style cho một số ô AG Grid

 

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

 

Cùng bảng như trước; cột "Major Category" canh giữa, cột "Total Sales ($)" canh phải.

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

Ví dụ style khác

 

  • Dùng CSS khác để tạo style ✨
grid = AgGrid(
# Other setup
defaultColDef={
"cellStyle": {
  "backgroundColor": "black",
   "color": "white"}
})

 

$$

Cùng bảng như trước; ô có nền đen và chữ trắng

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

Chọn ô

$$

  • Dùng thuộc tính cellClicked
  • Callback để in thông tin ô được bấm
@callback(
    Output("test_text", "children"),
    Input("my_grid", "cellClicked")
)
def show_cell_info(cell_data):
    return str(cell_data)

 

Ảnh gif cùng bảng như trước. Bên dưới bảng là một dictionary cập nhật chi tiết của ô khi được bấm.

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

Chọn hàng

  • Đặt rowSelection thành "single" hoặc "multiple"
grid = AgGrid(
# Other parts
dashGridOptions={
"rowSelection": "single"}
)

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

 

Ảnh gif cùng bảng như trước. Bên dưới là vùng văn bản xám cập nhật một dictionary của cả hàng khi được chọn

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

Ayo berlatih!

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

Preparing Video For Download...