[JS] ag-Grid 기본 사용법

ag-Grid

• 웹 애플리케이션에서 데이터를 표 형식으로 효율적으로 표시하고 관리할 수 있도록 돕는 JavaScript 기반의 고성능 데이터 그리드 라이브러리 aggrid는 모든 주요 웹 프레임워크(React, Angular, Vue.js)와 호환되며, 독립적인 JavaScript 라이브러리로도 사용할 수 있다.

다양한 기능

• 정렬(Sorting)
• 필터링(Filtering)
• 그룹화(Grouping)
• 페이징(Paging)
• 편집(Editing)
• 컬럼 고정(Pinned Columns)
• 드래그 앤 드롭(Drag and Drop)
• 셀 템플릿(Custom Cell Templates)
• 컬럼 숨김/보임(Column Visibility)

ag-Grid 기본 사용법

<!-- HTML에 ag-Grid 스타일과 스크립트 링크 추가 -->
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css">
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>

<div id="myGrid" style="height: 400px; width: 600px;" class="ag-theme-alpine"></div>

<script>
    const gridOptions = {
        columnDefs: [
            { headerName: "Make", field: "make" },
            { headerName: "Model", field: "model" },
            { headerName: "Price", field: "price" }
        ],
        rowData: [
            { make: "Toyota", model: "Celica", price: 35000 },
            { make: "Ford", model: "Mondeo", price: 32000 },
            { make: "Porsche", model: "Boxster", price: 72000 }
        ]
    };
    
    const defaultColDef = {
		    resizable: false, // 컬럼 크기 조정 기능 비활성화
		    sortable: false, // 정렬 비활성화
		    suppressMovable: true, // 행, 컬럼의 이동을 제한
    };

    // 그리드 초기화
    new agGrid.Grid(document.getElementById('myGrid'), gridOptions);
</script>

 

공식 문서 : https://www.ag-grid.com/react-data-grid/getting-started/

React Grid: Quick Start | AG Grid