Dash AG Grid 소개

Dash와 Plotly로 대시보드 만들기

Alex Scriven

Data Scientist

Dash AG Grid란?

HTML table 태그(Dash에서 사용 가능: Dash)
html.Table는 정적 → 기능 제한적

Dash AG Grid - 동적·대화형
- 필터링, 숨기기, 내보내기, 스타일링

기본 테이블

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]

3개 열과 4개 행을 가진 테이블. 친숙한 전자상거래 데이터셋의 일부를 표시. 열 헤더는 "Major Category"(텍스트), "Total Sales ($)"(값), "Sales Volume"(정수)

숫자 형식 지정

문제: 금액 형식 지정
- 해결: valueFormatter 사용
- 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"}
]
# 이전과 같이 레이아웃에 추가

숫자 출력 포맷

보기 좋게 포맷됨 ✨

이전 슬라이드의 동일한 테이블. 이제 Total Sales 열 값에 달러 기호가 붙고 소수 둘째 자리까지 반올림되어 표시됨. 전체 테이블은 3개 열과 4개 행으로, 열 헤더는 "Major Category", "Total Sales ($)", "Sales Volume"

정렬 추가

정렬은 기본적으로 활성화됨 ⭐

# 전역 비활성화
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# 열별 지정
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # 켜기
{"field": "Sales Volume"
 , "sortable": False} # 끄기
]

$$ 첫 슬라이드의 기본 테이블에서 헤더를 클릭하면 행이 정렬되는 GIF

필터링 추가

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

값/조건 필터 지원

첫 슬라이드의 기본 테이블. 이제 헤더 아래에 빈 상자가 있는 행이 있음. GIF에서는 첫 번째 열을 Cloth로 필터링하고, 두 번째 열은 Greater than 드롭다운으로 필터링하여 테이블을 거르는 모습

페이지 매김

긴 테이블에는 페이지 매김을 사용 💡

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

이전과 같은 기본 테이블이지만 데이터 행이 2개만 보임. 테이블 오른쪽 하단에 좌우 화살표와 총 페이지(2) 및 현재 페이지가 표시된 페이지네이션 토글이 있음

정렬·필터는 테이블 전체에 적용 📌

Ayo berlatih!

Dash와 Plotly로 대시보드 만들기