본문 바로가기
반응형

handsontable34

React Handsontable로 csv 편집기 만들기 (16) 프로젝트 전체 링크 이전 - (15) callback function으로 선택된 Cell 보여주기 / 수정하기 현재 - (16) colWidths 옵션 / csv 파일 파싱 보완 다음 - (17) redux로 File Upload 상태 관리하기 깃허브 코드 확인하기 현재 myTable의 옵션 중 colWidths는 아래와 같다. colWidths: [60, 60, 60, 60, 60, 60, 60], 이렇게 해두면, width가 배열의 길이보다 많은 경우, column의 길이는 60이 안된다. 따라서 csvFile의 width만큼 배열을 만들고 옵션으로 주면 된다. let colWidths = []; for(let i = 0; i < csvFile.width; i++) colWidths.push(60);.. 2021. 6. 14.
React Handsontable로 csv 편집기 만들기 (15) 프로젝트 전체 링크 이전 - (14) handsontable methods 현재 - (15) callback function으로 선택된 Cell 보여주기 / 수정하기 다음 - (16) colWidths 옵션 / csv 파일 파싱 보완 깃허브에서 코드 확인하기 handsontable option으로 colWidths와 wordWrap = false을 추가해보자. myTable = new Handsontable(container, { data: lib.makeTable(csvFile, 2, 3), colHeaders: true, /* column header는 보이게 설정 */ rowHeaders: true, /* row header 보이게 설정 */ colWidths: [60, 60, 60, 60, 60,.. 2021. 6. 13.
React Handsontable로 csv 편집기 만들기 (14) 프로젝트 전체 링크 이전 - (13) Download CSV 현재 - (14) handsontable methods 다음 - (15) callback function으로 선택된 Cell 보여주기 / 수정하기 이전 글에서 보았던 myTable의 출력 결과에서 각 method 들의 결과를 확인해보자. clear() table을 모두 null로 만든다. myTable.clear(); let rows = myTable.countRows(); let cols = myTable.countCols(); console.log(myTable.getData(0, 0, rows - 1, cols - 1)); countEmptyCols(), countEmptyRows() 비어있는 행/열의 수를 return 한다. consol.. 2021. 6. 11.
React Handsontable로 csv 편집기 만들기 (13) 프로젝트 전체 링크 이전 - (12) table의 dummy 행과 열을 추가하기 현재 - (13) Download CSV 다음 - (14) handsontable methods 참고 - Download CSV 구현 (콤마, 줄바꿈, 따옴표 처리) 깃허브에서 코드 확인하기 수정한 csv를 다운로드 할 수 있도록 아래의 button을 추가하자. handsontable의 exportPlugin을 이용하면 download가 가능하다. //MyTable.js ... const csvDownLoad = () => { const exportPlugin = myTable.getPlugin("exportFile"); exportPlugin.downloadFile("csv", { filename: "MyFile" }); .. 2021. 6. 9.
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된 cs.. 2021. 6. 8.
React Handsontable로 csv 편집기 만들기 (11) 프로젝트 전체 링크 이전 - (10) handsontable basic options 현재 - (11) handsontable setting options 다음 - (12) table의 dummy 행과 열을 추가하기 DropDown Menu dropdownMenu에 true 옵션을 주면 column에 dropdown 메뉴가 생긴다. myTable = new Handsontable(container, { data: data, colHeaders: true, rowHeaders: true, width: "50%", manualColumnResize: true, manualRowResize: true, dropdownMenu: true, licenseKey: "non-commercial-and-evaluati.. 2021. 6. 7.
React Handsontable로 csv 편집기 만들기 (10) 프로젝트 전체 링크 이전 - (9) useEffect를 이용하여 handsontable 연동하기 현재 - (10) handsontable basic options 다음 - (11) handsontable setting options handsontable에는 다양한 option이 있다. HotTable에 option을 추가할 수도 있고, Handsontable을 새로 생성할 때, 옵션을 넣어줄 수 있다. myTable = new Handsontable(container, { data: data: csvFile.csv, colHeaders: true, rowHeaders: true, licenseKey: "non-commercial-and-evaluation", }); 여기에서는 Handontable을 새.. 2021. 6. 6.
React Handsontable로 csv 편집기 만들기 (9) 프로젝트 전체 링크 이전 - (8) handontable 설치하기 현재 - (9) useEffect를 이용하여 handsontable 연동하기 다음 - (10) handsontable basic options 깃허브에서 코드 확인하기 이제 csv 파일을 불러오거나 drop할 경우, handsontable에 csv 파일이 나타나도록 해보자. App.js에서 MyTable에 csvFile로 csvObject를 넘긴다. MyTable에서 data와 HotTable을 지우고 handsontable을 import 한다. MyTable에서는 csvFile을 props로 받는다. import "handsontable/dist/handsontable.full.css"; import Handsontable from "h.. 2021. 6. 5.
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 '.. 2021. 6. 4.
반응형

티스토리툴바