[React_Library] Handsontable

Handsontable은 웹 기반의 데이터 그리드(Data Grid) 컴포넌트입니다. Excel과 비슷한 스프레드시트 형식의 데이터를 웹 애플리케이션에서 효율적으로 편집하고 관리할 수 있도록 설계된 JavaScript 라이브러리입니다. Handsontable은 테이블 형태로 데이터를 표시하며, 사용자가 데이터를 추가, 수정, 삭제하고 정렬, 필터링 등의 기능을 제공합니다.

사용방법

1. 설치

npm install handsontable @handsontable/react

2. css 가져오기

import 'handsontable/dist/handsontable.full.min.css';

3. 모듈 등록

import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';

registerAllModules();

4. 구성 요소 사용

import { HotTable } from '@handsontable/react';

<HotTable
  data={[
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13]
  ]}
  rowHeaders={true}
  colHeaders={true}
  height="auto"
  autoWrapRow={true}
  autoWrapCol={true}
  licenseKey="non-commercial-and-evaluation" // for non-commercial use only
/>

데이터 미리보기

---

출처
https://handsontable.com/docs/react-data-grid/