리액트 - Handsontable Selected Options

리액트 전체 링크

 

참고

- 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 저장하기)

---

- className : Cell Alignment 
- stretchH : 빈 공간을 채우는 방법 → none, last, all 
- selectionMode : Ctrl 키 + 선택 가능한 셀 → multiple, range, single 
- fillHandle : 드래그로 자동 채움 → true, false, vertical, horizontal 옵션 
- disableVisualSelection : 셀 선택 활성화 여부 → false, true, current, area, header, [opt1, opt2, ...] 

const options = {
  data,

  /* true or false options */
  // ...

  /* Selected Options */
  className: "htMiddle htCenter" /* Cell Alignment */,
  stretchH: "none" /* 빈 공간을 채우는 방법 : none, last, all */,
  selectionMode: "multiple" /* Ctrl 키 + 선택 가능한 셀 : multiple, range, single */,
  fillHandle: true /* 드래그로 자동 채움 : true, false, vertical, horizontal 옵션 */,
  disableVisualSelection: false /* 셀 선택 활성화 여부 : false, true, current, area, header, [option1, option2, ...] */,

  /* Number Options */
  // ...

  /* Customizing Options */
  // ...

  licenseKey: "non-commercial-and-evaluation",
};

---

className : Cell Alignment 

 

className에서 수직이나 수평 기준으로 정렬이 가능하다.

 

Vertical : htTop, htMiddle, htBottom

Horizontal : htLeft, htCenter, htRight, htJustify

 

Middle과 Center를 동시에 써보자.

  className: "htMiddle htCenter"

 

Horizontal, Vertical 모두 중앙 정렬된다.

---

stretchH : 빈 공간을 채우는 방법 → none, last, all 

 

테이블보다 설정된 width가 남은 경우, stretch 적용 여부

 

none : 아무 설정도 하지 않는다. (default)

last : 마지막 Column만 늘어난다.

all : 모두 골고루 늘어난다.

 

none

 

last

 

all

---

selectionMode : Ctrl 키 + 선택 가능한 셀 → multiple, range, single 

 

Ctrl 키를 누른 상태로 셀을 누르거나 드래그하는 경우, 선택되는 셀 설정

 

multiple : 여러 셀을 동시에 선택한다. (default)

range : 선택한 셀의 연속된 셀은 선택 가능하다.

single : 하나의 셀만 선택 가능하다.

 

multiplie

 

range vs single

---

 fillHandle : 드래그로 자동 채움 → true, false, vertical, horizontal 옵션 

 

true : 수직, 수평 모두 드래그로 자동 채우기가 가능하다. (default)

false : 수직, 수평 모두 불가능하다.

vertical : 수직으로만 가능하다.

horizontal : 수평으로만 가능하다.

 

true vs false

 

vertical vs horizontal

---

disableVisualSelection : 셀 선택 활성화 여부 → false, true, current, area, header, [opt1, opt2, ...] 

 

false : 모든 유형의 선택된 셀을 시각적으로 활성화한다. (default)

true : 모든 유형의 선택된 셀을 시각적으로 비활성화한다.

current : 현재 선택된 셀의 선택을 비활성화한다. (6.2.2 ver에서는 안되는 것으로 보인다...)

area : 선택된 영역이 시각적으로 비활성화된다.

header : 선택된 영역의 헤더가 시각적으로 비활성화된다.

 

시각적으로 보이지만 않을 뿐, 여전히 셀을 선택하고 있는 상태다.

 

아래와 같이 중복 선택이 가능하다.

disableVisualSelection : [area, header],

 

true vs false

 

area vs header

 

[area, header] 동시에 설정