[해피CGI][cgimall] handsontable - Excel 과 유사한 curd 데이터 그리드

 handsontable은 JavaScript, Angular, React, Vue.js를 위한 강력하고 유연하며 기능이 풍부한 Excel과 유사한 CRUD 데이터 그리드 /테이블 라이브러리입니다.

 

라이센스 : MIT

 

 

# 주요 특징

 

- 데이터 필터링

- 데이터 정렬

- 데이터 포맷

- 열 삽입/제거/편집/크기 조정

- 세포 편집

- 고정된 헤더 및 열

- 사용자 정의 상황에 맞는 메뉴

- 사용자 정의 드롭다운 메뉴

- 접을 수 있는 기둥

- CSV로 내보냅니다

- 계산

- 클립보드에 복사합니다

- 키보드 탐색

- 그리고 훨씬 더 많은 것들

# 설치 방법

# NPM

$ npm install handsontable --save

 

# 사용방법

 

1. Handsontable 라이브러리를 다운로드하여 해당 페이지에 포함하세요.

<!-- from local -->

<script src="dist/handsontable.full.min.js"></script>

<link href="dist/handsontable.full.min.css" rel="stylesheet" />

<!-- from cdn -->

<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css" rel="stylesheet" />

 
dist 는 폴더 내 handsontable 폴더에 있습니다. 
테스트 파일을 만드실때 handsontable 폴더에서 만드시면 체크가 쉽습니다.

 

2. 데이터 그리드를 배치할 플레이스홀더 요소를 만듭니다.

<div id="dataTable"></div>

 

3. 데이터 그리드에 표시할 데이터를 정의합니다.

<script>

const data = [

    ["", "Kia", "Nissan", "Toyota", "Honda"],

    ["2008", 10, 11, 12, 13],

    ["2009", 20, 11, 14, 13],

    ["2010", 30, 15, 12, 13]

];

</script>

 

4. 라이브러리를 초기화하고 페이지에 기본 데이터 그리드를 렌더링합니다.

<script>

    var placeholder = document.getElementById('dataTable');

    var myDataGrid = new Handsontable(placeholder, {

        data: data,

    });

</script>

 

5. 아래의 링크를 클릭하여 데이터 그리드를 사용자 정의하는 전체 옵션을 확인하세요.

https://github.com/handsontable/handsontable/blob/master/src/defaultSettings.js
 

 

6. Handsontable은 열과 특정 셀을 포함하여 전체 표에 대한 구성 옵션을 제공하는 빠른 방법을 제공합니다.

<script>

    var placeholder = document.getElementById('dataTable');

    var myDataGrid = new Handsontable(placeholder, {

        columns: [

        {readOnly: false},

        {},

        {}

        ],

        cells: function(row, col, prop) {

        var cellProperties = {};

        if (row === 0 && col === 0) {

            cellProperties.readOnly = true;

        }

        return cellProperties;

        }

    });

</script>