React ag-Grid 사용하기

자사 어드민 리팩토링하게 되면서 기존에 <table>형식을 버리고 오픈 소스를 검색한 후 사용하게 된 게 ag-Grid이다.

 

ag-Grid는 자바스크립트 기반의 오픈 소스 그리드이며 무료(커뮤니티)와 상용(엔터프라이즈)버전으로 구분되어 있는데,

상용버전은 서버사이드 랜더링, 엑셀 추출등등 지원을 많이 하지만 유료이므로 무료버전으로도 충분히 구현할 수 있기 때문에 사용하게 됐다.

React로 ag-Grid를 사용하는 방법 -> https://www.ag-grid.com/react-data-grid/getting-started/

React Data Grid: Get Started with AG Grid

 

라이브러리 설치가 완료됐다는 가정하에 아래와 같이 코드를 작성하겠다.

 

import { AgGridReact } from 'ag-grid-react';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';
....

const ReactAgGrid = () => {
	
    const [selectedRows, setSelectedRows] = useState<any>([]); <-- 선택한 데이터가 들어가는...
    const rowsData = []; <-- 데이터가 있다 가정하에 작성!!
	
    // headerName <- 테이블 헤더에 보여줄 내용
    // filed <- rowData 정보
    // headerCheckboxSelection <- 생성일시 헤더에 체크박스 생성
    // checkboxSelection <- rowData부분에도 체크박스 생성
    // pinned <- pinned: 'left'로 작성하면 좌측으로
    // width <- width값 조정
    
    const [columnDefs] = useState([
    	{headerName: '생성일시', filed: 'createdAt', headerCheckboxSelection: true, checkboxSelection: true },
        {headerName: '제목', filed: 'title'}
        {headerName: '내용', filed: 'content'}
        {headerName: '작성자', filed: 'writer'}
        .....
    ]);
   
   const rowData = rowsData && rowsData.map((v: any) => {
   	return {
    	createdAt: v.createdAt,
        title: v.title,
        content: v.content,
        writer: v.writer
    };
   };
   
   // onSelectionChanged는 선택한 정보를 가져오기 위해 사용했었던 건데 까먹을까봐 블로그에 작성!!
   const onSelectionChanged = (event: any) => {
   	setSelectRowData(event.api.getSelectedRows());
   }

	return (
    	<div className="ag-theme-alpine" style={{height: "700px", width: '100%'}}>
        	<AgGridReact
            	rowData={rowData} // 테이블 데이터
                columnDefs={columnDefs} // 헤더데이터
                animateRows={true} // 행 애니메이션
                suppressRowClickSelection={true} // true -> 클릭 시 행이 선택안됌
                rowSelection={'multiple'} // 여러행 선택
                enableCellTextSelection={true} // 그리드가 일반 테이블인 것처럼 드래그시 일반 텍스트 선택
                onSelectionChanged={onSelectionChanged} // 선택한 체크박스 정보 가져오기
            >
            </AgGridReact>
        </div>
    );
};

export default ReactAgGrid;

 

 

아래는 실제 내가 자사 어드민 개발하면서 보여주고 있는 테이블이다. 데이터는 안보이게 했다.

체크박스는 헤더부분에 있는 체크박스를 선택하면 전체선택이 되고, 다시 클릭하면 전체해제가 된다.
rowData부분에 있는 체크박스는 해당 열을 선택하는거며 onSelectionChanged를 사용하면 전체선택한 것과 선택한 정보들을 확인할 수 있다.

아래는 선택한 체크박스를 선택했을 때 선택한 체크박스만큼 정보를 노출시켜준다. 체크가 되면 setSelectRowData에 객체로 선택한 데이터들이 담긴다.

체크박스가 선택된 수가 3개인데 이미지 상단에 3건 실행이라고 나타냄