Handsontable 라이브러리

JavaScript data grid component
Handsontable : 엑셀와 유사한 기능을 가지고 있는 라이브러리

• 설치: npm install handsontable
• 옵션
  • data : 데이터
  • licenseKey
  • contextMenu(boolean) 행과 열의 추가/삭제 등의 기능제공
  • colHeaders(boolean)
  • rowHeaders(boolean)
  • cells 특정 셀 설정
    • type : text(default) | numeric | date
    • editor : boolean
    • readOnly : boolean
    • dataFormat : 'YYYY-MM-DD'
    • validator : (value, callback)=>void
  • ref
    • getColHeader
    • getDataAtCell

const hotRef = useRef<HotTable>(null);
const hot = hotRef.current?.hotInstance;
<HotTable ref={hotRef}
 		  data={data}
 		  licenseKey="non-commercial-and-evaluation"
          contextMenu={true} />

readonly 설정시, 바인딩된 데이터의 구조도 변하지 않아, 수정된 데이터를 얻을 수 없다. 편집기능 해제가 필요한 경우, editor(false)를 이용하는 것이 좋다.