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"}
})

이전 슬라이드와 같은 테이블이지만, 셀 배경은 검정이고 텍스트는 흰색입니다.

셀 선택

cellClicked 속성 사용
콜백으로 클릭한 셀 정보 출력

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

지금까지 슬라이드에서 보인 동일한 테이블의 GIF. 테이블 아래에 클릭한 셀의 상세 정보로 갱신되는 딕셔너리가 표시됩니다.

행 선택

rowSelection을 "single" 또는 "multiple"로 설정

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

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

지금까지의 동일한 테이블의 GIF. 테이블 아래의 회색 텍스트 영역이 선택된 전체 행의 딕셔너리로 갱신됩니다.

연습해 봅시다!

Dash와 Plotly로 대시보드 만들기