React Handsontable로 csv 편집기 만들기 (8)

프로젝트 전체 링크

 

이전 - (7) App.js에서 파싱된 csv 파일 받기

현재 - (8) handsontable 설치하기

다음 - (9) useEffect를 이용하여 handsontable 연동하기

 

깃허브에서 코드 확인하기

---

handontable 튜토리얼을 보고 따라서 설치해보자.

npm install handsontable @handsontable/react

 

튜토리얼의 예시를 참고하여 App.js를 아래와 같이 수정하자.

// App.js
import React, { useState } from "react";
//import * as lib from "./components/library";
//import FileUpload from "./components/FileUpload";
import 'handsontable/dist/handsontable.full.css';
import { HotTable } from '@handsontable/react';

const data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2016", 10, 11, 12, 13],
  ["2017", 20, 11, 14, 13],
  ["2018", 30, 15, 12, 13]
];

const App = () => {
  return (
    <div>
      <div id="hot-app">
        <HotTable
          data={data}
          colHeaders={false}
          rowHeaders={false}
          width="600"
          height="300"
        />
      </div>
    </div>
  );
};

export default App;

 

아래와 같은 grid가 나타난다.

 

colHeader와 rowHeader를 true로 해보자.

<HotTable
  data={data}
  colHeaders={true}
  rowHeaders={true}
  width="600"
  height="300"
/>

 

행/열의 header가 나타난다.

 

이제 아래에 나타나는 license key에 대한 설명을 없애보자.

lincense key에 대한 설명은 링크를 참고하자.

비상업적 용도로 사용하기 때문에 "non-commercial-and-evaluation"을 HotTable에 licensekey로 추가한다.

참고로 handsontable은 MIT License다.

<HotTable
  data={data}
  colHeaders={true}
  rowHeaders={true}
  width="600"
  height="300"
  licenseKey="non-commercial-and-evaluation"
/>

 

lincense key에 대한 설명이 사라진 것을 알 수 있다.

 

이것으로 handsontable 기본 setting이 완료되었다.

// App.js
import React, { useState } from "react";
//import * as lib from "./components/library";
//import FileUpload from "./components/FileUpload";
import "handsontable/dist/handsontable.full.css";
import { HotTable } from "@handsontable/react";

const data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2016", 10, 11, 12, 13],
  ["2017", 20, 11, 14, 13],
  ["2018", 30, 15, 12, 13],
];

const App = () => {
  return (
    <div>
      <div id="hot-app">
        <HotTable
          data={data}
          colHeaders={true}
          rowHeaders={true}
          width="600"
          height="300"
          licenseKey="non-commercial-and-evaluation"
        />
      </div>
    </div>
  );
};

export default App;

---

App.js의 grid 내용은 MyTable component로 분리하자.

 

App.js를 원래대로 돌리고, FileUpload 위에 MyTable을 추가한다.

App.js에서 불필요한 import는 지운다.

//App.js
import React, { useState } from "react";
//import * as lib from "./components/library";
import FileUpload from "./components/FileUpload";
import MyTable from "./components/MyTable";

const csvObjectDefault = {
  HEIGHT: 0,
  WIDTH: 0,
  csv: [],
};

const App = () => {
  const [csvObject, setCsvObject] = useState(csvObjectDefault);

  return (
    <div>
      <button onClick={() => console.log(csvObject)}>print csv</button>
      <div className="App">
        <MyTable/>
        <FileUpload setCsvObject={setCsvObject} />
      </div>
    </div>
  );
};

export default App;

 

MyTable은 components 폴더 아래에 만들고 App.js의 내용을 옮겼다.

//MyTable.js
import React from "react";

import "handsontable/dist/handsontable.full.css";
import { HotTable } from "@handsontable/react";

const data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2016", 10, 11, 12, 13],
  ["2017", 20, 11, 14, 13],
  ["2018", 30, 15, 12, 13],
];

const MyTable = () => {
  return (
    <div>
      <div id="hot-app">
        <HotTable
          data={data}
          colHeaders={true}
          rowHeaders={true}
          width="600"
          height="300"
          licenseKey="non-commercial-and-evaluation"
        />
      </div>
    </div>
  );
};

export default MyTable;

 

아래와 같이 grid 밑에 drag & drop이 나오는 것을 볼 수 있다.

 

이제 handsontable과 관련된 작업은 MyTable에서 작업한다.

---

이전 - (7) App.js에서 파싱된 csv 파일 받기

다음 - (9) useEffect를 이용하여 handsontable 연동하기