การโต้ตอบใน Dash AG Grid

การสร้างแดชบอร์ดด้วย Dash และ Plotly

Alex Scriven

Data Scientist

การจัดสไตล์เซลล์ทั้งหมดใน AG Grid

ใช้ style ไม่ได้ ❌
ใช้ cellStyle แทน ✅

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

สองคอลัมน์แรกของตารางจากบทเรียนก่อนหน้า มีหัวคอลัมน์ "Major Category" และ "Total Sales ($)" พร้อมข้อมูลสี่แถว ข้อมูลในเซลล์ทั้งหมดจัดชิดขวา

การจัดสไตล์เซลล์บางส่วนใน AG Grid

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

ตารางเดียวกับสไลด์ก่อนหน้า แต่คอลัมน์ "Major Category" จัดข้อความไว้กึ่งกลาง และคอลัมน์ "Total Sales ($)" จัดข้อความชิดขวา

ตัวอย่างการจัดสไตล์เพิ่มเติม

ใช้ CSS อื่น ๆ ในการจัดสไตล์ได้ ✨

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

ตารางเดียวกับสไลด์ก่อนหน้า แต่เซลล์มีพื้นหลังสีดำและข้อความสีขาว

การเลือกเซลล์

ใช้ property cellClicked
Callback สำหรับแสดงข้อมูลของเซลล์ที่คลิก

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

GIF ของตารางที่ปรากฏในสไลด์ชุดนี้ ด้านล่างตารางมี dictionary ที่อัปเดตรายละเอียดของเซลล์เมื่อคลิก

การเลือกแถว

กำหนด rowSelection เป็น "single" หรือ "multiple"

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

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

GIF ของตารางที่ปรากฏในสไลด์ชุดนี้ ด้านล่างตารางมีพื้นที่ข้อความสีเทาที่อัปเดต dictionary ของแถวทั้งแถวเมื่อเลือก

มาฝึกกันเถอะ!

การสร้างแดชบอร์ดด้วย Dash และ Plotly