리액트 - Handsontable Customization Options (Columns Data Type)

리액트 전체 링크

 

참고

- 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에서는 Columns 마다 data type을 설정할 수 있다.

https://handsontable.com/docs/6.2.2/demo-custom-renderers.html

  columns: [
      {data: "id", type: 'numeric'},
      {data: "name", renderer: redRenderer},
      {data: "isActive", type: 'checkbox'},
      {data: "date", type: 'date', dateFormat: 'YYYY-MM-DD'},
      {data: "color",
        type: 'autocomplete', // dropdown
        source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
      },
      {
        editor: 'select',
        selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda']
      },
    ],

 

redRenderer는 다음과 같다.

function redRenderer(instance, td) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.style.backgroundColor = "red";
  td.style.fontWeight = "bold";
}

 

첫 번째 column은 type이 numeric이다.

따라서 문자열을 입력하는 경우 자동으로 셀의 배경색이 변경된다.

그리고 두 번째 배열에는 renderer를 설정해주었기 때문에 배경색과 fontWeight가 bold로 변경되었다.

 

columns 세 번째 배열은 checkbox다. 

따라서 C에는 checkbox가 나타난다.

 

네 번째는 달력이 나와서 dateFormat이 YYYY-MM-DD가 되도록 설정한다.

 

다섯 번째는 source 배열의 값을 autocomplete으로 검색하고 선택할 수 있다.

 

마지막은 selectOptions에 있는 값만 선택이 가능하도록 한다.