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

프로젝트 전체 링크

 

이전 - (11) handsontable setting options

현재 - (12) table의 dummy 행과 열을 추가하기

다음 - (13) Download CSV

 

깃허브에서 코드 확인하기

---

현재 작업하고 있는 test.csv의 행과 열의 크기가 8 x 4라서 정확히 8 x 4의 table이 생성되었다.

하지만 행과 열이 추가될 수 도 있고, 조금 넉넉하게 보이고 싶을 때가 있을 수 있다.

따라서 dummy width, height를 추가해보자.

 

→ 아래 옵션을 사용하면 더 간편히 해결할 수 있다. (minSpareRows, minSpareCols)

https://handsontable.com/docs/6.2.2/Options.html#minSpareRows

---

parsing된 csvFile과 추가할 width, height를 넘겨서 새로운 csvFile을 return하도록 만들자.

csvFile object에는 parsing된 csv와 HEIGHT, WIDTH가 포함되어 있다.

myTable = new Handsontable(container, {
  data: lib.makeTable(csvFile, 2, 3), /* height +2, width +3 추가 */
  ...
}

 

library.js에 table[] 배열에 각 line을 push한다.

line에는 csv를 push한 후, dummy로 더 추가하면 된다.

그리고 마지막으로 height에 대한 dummy를 추가한다.

// library.js

export const makeTable = (csvObject, height, width) => {
  let table = [];
    
  for(let h = 0; h < csvObject.HEIGHT; h++)
  {
    let line = [];
    for(let w = 0; w < csvObject.WIDTH; w++) line.push(csvObject.csv[h][w]);
    for(let w = 0; w < width; w++) line.push("");

    table.push(line);
  }

  let dummy = [];
  for(let w = 0; w < csvObject.WIDTH + width; w++) dummy.push("");
  for(let h = 0; h < height; h++) table.push(dummy);

  return table;
}

 

아래와 같이 dummy가 추가되었다.

 

이제 추가된 dummy cell에 값을 넣어보자.

 

width의 cell들은 정상 동작하지만, height에 값들은 자동으로 복사가 되고 있다.

아래의 코드에서 dummy를 push하였기 때문에, 추가된 cell들이 dummy를 모두 참조하고 있다.

let dummy = [];
for(let w = 0; w < csvObject.WIDTH + width; w++) dummy.push("");
for(let h = 0; h < height; h++) table.push(dummy);

 

따라서 아래와 같이 코드를 변경하여, for문 마다 dummy를 새로 만들도록 한다.

for(let h = 0; h < height; h++) {
  let dummy = [];
  for(let w = 0; w < csvObject.WIDTH + width; w++) dummy.push("");
  table.push(dummy);
}

 

이제 height에 복사가 되지 않는 것을 알 수 있다.

 

최종 코드는 아래와 같다.

// library.js

...

export const makeTable = (csvObject, height, width) => {
  let table = [];
    
  for(let h = 0; h < csvObject.HEIGHT; h++)
  {
    let line = [];
    for(let w = 0; w < csvObject.WIDTH; w++) line.push(csvObject.csv[h][w]);
    for(let w = 0; w < width; w++) line.push("");

    table.push(line);
  }

  for(let h = 0; h < height; h++) 
  {
    let dummy = [];
    for(let w = 0; w < csvObject.WIDTH + width; w++) dummy.push("");
    table.push(dummy);
  }

  return table;
}

 

//MyTable.js
import React, { useEffect } from "react";
import * as lib from "./library.js";

import "handsontable/dist/handsontable.full.css";
import Handsontable from "handsontable";

let myTable;

const init = (csvFile) => {
  if (csvFile === undefined || csvFile.HEIGHT === 0) return;

  const container = document.getElementById("hot-app");

  myTable = new Handsontable(container, {
    data: lib.makeTable(csvFile, 2, 3),
    colHeaders: true,         /* column header는 보이게 설정 */
    rowHeaders: true,         /* row header 보이게 설정 */
    width: "50%",
    manualColumnResize: true, /* column 사이즈 조절 */
    manualRowResize: true,    /* row 사이즈 조절 */
    manualColumnMove: true,   /* column move 허용 */
    manualRowMove: true,      /* row move 허용 */
    dropdownMenu: true,       /* dropdown 메뉴 설정 */
    filters: true,            /* 필터 기능 on */
    contextMenu: true,        /* cell 클릭 시 메뉴 설정 */
    licenseKey: "non-commercial-and-evaluation",
  });
};

const MyTable = ({ csvFile }) => {
  useEffect(() => {
    init(csvFile);
  }, [csvFile]);

  return (
    <div>
      <div id="hot-app">
      </div>
    </div>
  );
};

export default MyTable;

---

이전 - (11) handsontable setting options

다음 - (13) Download CSV