웹 스프레드시트 추천 (JspreadSheet)

웹 스프레드시트

웹에서 데이터를 표시하고 데이터의 계산, 분석, 데이터 시각화 등 웹 그리드보다 더 많은 작업을 수행할 수 있도록 도와주는 도구 입니다. 대표적으로 엑셀이 있으며 이러한 기능을 웹에서 할 수 있도록 도와주는 컴포넌트 입니다.

웹 그리드와 웹 스프레드시트의 차이

이 둘은 웹에서 데이터를 조작하는 공통점을 가지고 있지만, 누가 더 복잡하고 다양한 기능을 제공하냐의 차이가 있습니다.

예를 들어, 웹 그리드의 경우, 표 형식으로 표시하고 편집하지만, 다양한 포뮬러, 복잡한 데이터 조작, 데이터 시각화 및 데이터베이스와 연동 등 고급기능을 많이 제공하지는 않습니다.

주로 데이터를 표시/편집하는 것이 주 목적이기 때문입니다. 반대로 웹 스프레드 시트는 웹 그리드의 모든 기능을 가지고 

있으며 더 많은 고급 기능, 대용량 데이터를 처리하는데 유리합니다.

이러한 면 때문에 웹 그리드를 웹 스프레드시트 처럼 만들기 시작한 것으로 알고 있습니다.

웹 스프레드시트 추천

무료 웹 스프레드시트로 JspreadSheet ce v4 (https://bossanova.uk/jspreadsheet/v4/)추천합니다. 

아래 보시면, 꽤 많은 이용자와 MIT 라이센스 인 것을 확인할 수 있습니다.

유료 버전도 있으며 훨씬 더 많은 기능을 이용할 수 있습니다. https://jspreadsheet.com/

깃허브: https://github.com/jspreadsheet/ce

무료버전인 JspreadSheet v4 로 들어오시면 다음과 같은 화면이 보입니다.

아래 설명을 번역해보면 표/스프레드시트를 바닐라 자바스크립트로 만들었고 엑셀과의 호환성이 높으며 타사 플러그인과 통합하여 커스텀 스프레드시트를 만들 수 있습니다.

설치

// From the NPM
npm install jspreadsheet-ce

// From the yarn
yarn add jspreadsheet-ce

// From a CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/index.min.js"></script>

// Clone our project
http://github.com/jspreadsheet/ce

간단 예제

아래 div 컨테이너를 하나 준비해준다.

<div id="jspreadsheet_ce"></div>

아래 로직을 준비

const data = [
    ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
    ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
];

const columns = [
    { type: 'text', title:'Car', width:120 },
    { type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },
    { type: 'calendar', title:'Available', width:200 },
    { type: 'image', title:'Photo', width:120 },
    { type: 'checkbox', title:'Stock', width:80 },
    { type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },
    { type: 'color', width:100, render:'square' }
];

jspreadsheet(document.getElementById('jspreadsheet_ce'), {
    data,
    columns
});

결과는 아래와 같다.

다양한 예제

아래 들어가면, react, vue 등 다양한 예제를 만날 수 있습니다.

https://github.com/jspreadsheet/ce#data-grid-examples