리액트 테이블(표) 라이브러리 종류

 

 

1. react-base-table

https://github.com/Autodesk/react-base-table

GitHub - Autodesk/react-base-table: A react table component to display large datasets with high performance and flexibility

• 기본 스타일링이 styled-components 라서 사용이 용이하게 변경해줘야 함
• 중간중간 클래스 컴포넌트가 섞여있어서 마이그레이션 필요..
• proptypes를 통해 타입 지정

 

2. ag-grid-react

https://www.ag-grid.com/

Data Grid: AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid

• 해당 라이브러리 사용해보는 중
• 무료 버전(community)도 사용할만하다고 함
• 활용성이 좋은 듯
• 사용법에 대한 정보도 많은 편 공식문서도 잘나와있어서 좋음

채택!

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import dummyData from '/public/MOCK_DATA';

export default function AgGridTable() {
  const [columnDefs] = useState([
    {
      headerName: '환자 이름', // 헤더 지정
      field: 'patientName', // 데이터셋의 필드값
      headerCheckboxSelection: true, // 헤더 쪽에 체크박스(전체 선택)
      checkboxSelection: true, // 행 쪽 체크박스(하나만 선택)
      pinned: 'left', // 특정 방향에 필드 고정 기능
      width: 200,
    },
    { field: 'age', width: 100 },
    { field: 'sex', width: 100 },
    { field: 'weight', width: 100 },
    { field: 'modality', width: 100 },
    { field: 'studyDate', width: 150 },
    { field: 'studyTime', width: 100 },
    { field: 'studyID', width: 200 },
    { field: 'examLocation', width: 100 },
    { field: 'machineID', width: 200 },
    { field: 'examMachine', width: 100 },
  ]);

  const onSelectionChanged = (event) => {
    console.log(event.api.getSelectedRows()); // 선택한 값의 정보를 불러올 수 있음
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: '85vw' }}>
      <AgGridReact
        rowData={dummyData}
        columnDefs={columnDefs}
        onSelectionChanged={onSelectionChanged} // 행이 선택됐을 때 콜백 함수 실행
        suppressRowClickSelection={true}
        animateRows={true}
        // enableCellTextSelection={true}
        // rowSelection={'multiple'} 여러 행을 선택할 때 지정
      ></AgGridReact>
    </div>
  );
}

 

3. griddle-react

https://github.com/griddlegriddle/griddle

GitHub - GriddleGriddle/Griddle: Simple Grid Component written in React

 

4. reactdatagrid

https://github.com/inovua/reactdatagrid

GitHub - inovua/reactdatagrid: Empower Your Data with the best React Data Grid there is

• 상용 라이센스 확인 필요, community 는 MIT
• 정렬 기능
• 쪽수 기능 O
• 필터링 O
• 키보드 검색 O
• 인라인 편집 O
• 행 및 셀 선택 O
• 드래그앤드롭 열 크기 조절 및 재정렬 O기능
• 기능이 다양하나 ennterprise 에 기능이 거의 몰려있는 듯

 

5. react-table

• https://github.com/tanstack/table

https://www.npmjs.com/package/react-table

react-table

• 기능
  • 필터 : O
  • 정렬 : O
  • 페이징 : O
  • 무한 로딩 : O
  • 확장 : O
  • 수정 : O (클릭)
  • 열 크기 조절 : O
  • 기타 기능 :
    • 컬럼 선택 필터
    • 컬럼 위치 조정
    • 컬럼별 검색

 

6. rsuite-table

https://github.com/rsuite/rsuite-table

GitHub - rsuite/rsuite-table: A React table component.

• 기능
  • 필터 : X
  • 정렬 : O → 직접 비교함수 작성해줘야 함
  • 페이징 : O
  • 무한 로딩 : O
  • 확장 : O
  • 수정 : O (수정 버튼 클릭으로)
  • 열 크기 조절 : O
  • 드래그앤드롭
  • 기타 기능 :
    • 컬럼 선택 필터
    • IMG등 커스텀
    • 토글
• Rsuite 가 tailwindUI 처럼 이미 컴포넌트의 스타일을 만들어서 라이브러리로 배포하는 형식이라, 테이블에 적용 가능한 다른 기능(Loader 등)들을 전체가 담겨있는 rsuit 라이브러리에 담겨있었습니다. 그래서 사용하려면 rsuite-table 뿐만 아니라 rsuite 도 설치해야함

 

7. rc-table

https://table-react-component.vercel.app/

https://table-react-component.vercel.app/

• 기능
  • 페이징 : O
  • 무한 로딩 :
  • 확장 : O
  • 열 크기 조절 : O
  • 기타 기능 :
    • 토글
    • 생략된 항목 HOVER시 INFO창으로 전체내용
    • 컬럼 위치 조정
• less라는 css 스타일 모듈을 사용

 

 

프로젝트에 들어가기 전 여러 테이블 라이브러리를 사용해보았다.

무언가가 무조건 좋고, 꼭 써야한다! 라는건 딱히 없었지만... 간편하게 사용하기엔 ag-grid 가 좋아보여서 작업 중이다.

대부분 라이브러리들이 옵션을 설정해줄 수 있는 것도 많고 이미 편의 기능이 다 구현되어 있어서 사용하기 좋은 것 같다.