리액트 - Handsontable Customization Options (주석, comment, memo, tooltip)

리액트 전체 링크

 

참고

- 로컬 스토리지 사용 방법과 세션 스토리지 비교

 

- Project Settings (전체 코드)

- True / False Options

- Selected Options

- Number Options

- width, height, placeholder, sort

- 주석, comment, memo, tooltip

- Merge Cells, 셀 합치기

- Search 구현

- Columns Data Type

- Cell 커스터마이징

- afterSelection으로 수식 입력줄 구현하기

- Download CSV 구현 (콤마, 줄바꿈, 따옴표 처리)

- Mui Drawer로 Handsontable Option 관리하기

- Column Width, Row Height 로컬 스토리지에 저장하기

- Mui 토글 버튼으로 셀 스타일 편집 기능 만들기 

- 셀 스타일 로컬 스토리지에 저장하기 (전체 코드)

- Handsontable 깃허브 연동하기 (data, style, comment, merge 저장하기)

---

Handsontable에서 메모, 주석을 사용하려면 comments 옵션에 true를 설정한다.

comments: true,

 

엑셀에서의 메모 기능과 동일한 기능이다.

 

메모를 삽입하면 셀에 메모를 할 수 있다.

 

comments에는 displayDelay 옵션이 있고, cell에 comment의 value에 메모를 추가해서 초기화가 가능하다.

  comments: {
    displayDelay: 1000 /* 1초 뒤에 메모가 on */,
  },
  
  cell: [
    {row: 1, col: 1, comment: {value: '메모 1'}},
    {row: 3, col: 3, comment: {value: '메모 2'}},
  ],

---

afterSetCellMeta로 주석 저장하고 불러오기

 

afterSetCellMeta는 메타 정보가 변경될 경우, 호출되는 함수다.

메모를 추가하거나 삭제할 때, 로컬 스토리지를 이용하여 메모를 유지해보자.

 

먼저 afterSetCellMeta에 로그를 추가해서 동작을 확인해 보자.

const options = {
  data,
  ...
  
  cell: [
    {row: 1, col: 1, comment: {value: '메모 1'}},
    {row: 3, col: 3, comment: {value: '메모 2'}},
  ],
    
  afterSetCellMeta: (row, col, key, obj) => {
    console.log(row, col, key, obj);
  },
	
  licenseKey: "non-commercial-and-evaluation",
};

 

메모를 삭제하는 경우 obj는 undefined가 되고, 추가하거나 변경하는 경우 obj의 value값이 추가되거나 변경된다.

 

그리고 cell에서 comment의 정보는 배열로 저장되고 있다.

  cell: [
    {row: 1, col: 1, comment: {value: '메모 1'}},
    {row: 3, col: 3, comment: {value: '메모 2'}},
  ],

 

getComments 함수를 만들고 localStorage에 값이 없다면 빈 배열을, 값이 존재한다면 JSON.parse로 return하자.

const COMMENTS_KEY = "COMMENTS_KEY";

const getComments = () => { 
  let comments = localStorage.getItem(COMMENTS_KEY);
  
  if(comments === null) return [];

  return JSON.parse(comments);
}

 

그리고 cell에는 getComments로 초기화한다.

cell: getComments(),

 

이제 afterSetCellMeta를 아래와 같이 수정한다.

값이 변경되더라도, 일단 원래 가지고 있는 값은 filter를 이용해 제거한다.

obj가 undefined가 아닌 경우 (Delete comment), 메모를 추가하고 다시 로컬 스토리지에 저장한다.

  afterSetCellMeta: (row, col, key, obj) => {
    // console.log(row, col, key, obj);
    if(key === "comment") {
      // 기존 데이터 삭제
      let temp = getComments().filter((item) => (item.row === row && item.col === col) === false);
      if(obj !== undefined) temp.push({row, col, comment: {value: obj.value}});
      localStorage.setItem(COMMENTS_KEY, JSON.stringify([...temp]));
    }
  },

 

이제 새로고침을 해도 comment가 유지된다.

---

tooltip

 

헤더에 툴팁을 추가하려면 afterGetColHeader 메서드를 추가하면 된다.

    afterGetColHeader: (col, th) => {
      if (col === 0) {
        th.title = 'Tooltip for Column 1';
      } else if (col === 1) {
        th.title = 'Tooltip for Column 2';
      } else if (col === 2) {
        th.title = 'Tooltip for Column 3';
      }
    },