[Dash]Python Dash Layout 구성 (3) feat. Dash AG Grid

Dash AG Grid

Dash AG Grid는 Plotly의 Dash 프레임워크와 AG Grid라는 JavaScript 데이터 그리드 라이브러리를 함께 사용하여 데이터 시각화 및 조작을 위한 강력한 도구입니다. AG Grid는 빠르고 다양한 데이터 조작 및 시각화 기능을 제공하는 자바스크립트 그리드 라이브러리입니다.

 

 

Dash AG Grid vs Dash Table

Dash AG Grid와 Dash Table은 모두 Plotly의 Dash 프레임워크에서 사용할 수 있는 데이터 표시 및 조작 도구입니다. 그러나 두 라이브러리 간에 몇 가지 중요한 차이점이 있습니다. 다음은 Dash AG Grid가 Dash Table보다 유용한 점들입니다:

1. 다양한 데이터 조작 기능: AG Grid는 데이터를 더 다양한 방식으로 조작할 수 있는 다양한 기능을 제공합니다. 정렬, 필터링, 그룹화, 피벗 테이블, 편집 및 선택과 같은 데이터 조작 작업을 더 풍부하게 지원합니다.
2. 더 빠른 데이터 처리: AG Grid는 대규모 데이터 세트와 복잡한 데이터 조작 작업에 더 빠른 성능을 제공하는데, 이는 대용량 데이터를 다룰 때 유용합니다.
3. 커스터마이즈 가능한 셀 렌더링: AG Grid는 셀 렌더러 및 에디터를 맞춤 설정하여 데이터를 더 유연하게 표시하고 편집할 수 있도록 허용합니다.
4. 다양한 그래프 및 차트 지원: AG Grid 내에서 데이터를 시각화하기 위한 다양한 그래프 및 차트 유형을 지원합니다. 이는 데이터를 더 효과적으로 이해하고 표현할 수 있도록 도와줍니다.
5. 커뮤니티 및 문서: AG Grid는 넓은 커뮤니티와 상세한 문서를 제공하며, 사용자들은 다양한 문제에 대한 지원을 받을 수 있습니다.

Dash Table 역시 간단하게 데이터를 표시하고 조작하는 데 유용한 라이브러리이지만, 데이터 조작이나 대용량 데이터 처리와 같은 고급 기능이 필요한 경우에는 Dash AG Grid가 더 효과적일 수 있습니다. 

 

저는 Dash Table보다 AG Grid의 기능을 더 선호해서 이 글에서는 AG Grid의 기능 위주로 설명을 진행하겠습니다.

 

 

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash import Input, Output
import dash_ag_grid as ag
import pandas as pd

# 예제 데이터 프레임 생성
data = {
    'Name': ['Alice', 'Bob', 'Charlie', 'David'],
    'Age': [25, 30, 35, 40],
    'City': ['New York', 'San Francisco', 'Los Angeles', 'Chicago']
}
df = pd.DataFrame(data)

# Dash 앱 초기화
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# 앱 레이아웃 설정
app.layout = html.Div([
    dbc.Container([
        html.H1('Dash AG Grid Example'),
        dbc.Row([
            dbc.Col([
                ag.AgGrid(
                    id='ag-grid',
                    columnDefs=[
                        {"headerName": "이름", "field": "Name"},
                        {"headerName": "나이", "field": "Age"},
                        {"headerName": "도시", "field": "City"},
                    ],
                   dashGridOptions={"rowSelection": "single",
                                    "pagination": True, "paginationPageSize": "50"},                 
                    rowData=df.to_dict('records'),
                    columnSize="sizeToFit",
                    defaultColDef={"resizable": True},
                    style={"height": 300, "width": "100%"}
                ),
            ], md=10),
        ]),
    ]),
])

if __name__ == '__main__':
    app.run_server(debug=True)

 

 

Dash AG Grid는 많은 파라미터 및 옵션을 제공하여 그리드의 동작 및 모양을 조정할 수 있습니다.

코드에서 사용된 파라미터에 대한 설명과 그 외에 주요 파라미터에 대해 소개하도록 하겠습니다.

1. id : 그리드의 고유 ID를 지정합니다. Dash 앱 내에서 다른 컴포넌트와 상호 작용할 때 사용됩니다.
2. columnDefs : 열 정의를 나타내는 리스트입니다. 각 열 정의는 해당 열의 표시 이름("headerName")과 데이터 소스 필드("field")를 지정합니다.
3. dashGridOptions : Dash AG Grid의 그리드 옵션을 설정하는 딕셔너리입니다. 여기서는 rowSelection을 "single"로 설정하여 단일 행 선택 모드를 활성화하고 pagination과 paginationPageSize를 사용하여 페이지네이션을 활성화하고 페이지당 표시할 행 수를 설정합니다.
4. rowData : 그리드에 표시할 데이터를 나타내는 리스트입니다. 각 항목은 딕셔너리 형태로 열 이름과 해당 값을 포함해야 합니다.
5. columnSize : 열의 크기 조정 방법을 설정합니다. 여기서는 "sizeToFit"을 사용하여 열 크기를 콘텐츠에 맞게 자동 조정합니다.
6. defaultColDef : 열의 기본 설정을 나타내는 딕셔너리입니다. 여기서는 resizable을 True로 설정하여 열 크기 조정을 허용합니다.
7. style : 그리드의 스타일을 설정하는 딕셔너리입니다. 여기서는 그리드의 높이와 너비를 설정합니다.

 

마치며...

해당 기능을 사용하여 데이터 그리드를 디자인하실 수 있습니다.
더 많은 기능과 자세한 설명은 아래의 공식문서를 참고하시면 될 것 같습니다.

https://dash.plotly.com/dash-ag-grid

Dash AG Grid | Dash for Python Documentation | Plotly