테이블은 웹페이지에서 데이터를 표시하는 가장 쉬운 방법의 하나입니다. 플레인 HTML 테이블은 데이터 프레젠테이션의 기본적인 필요 요건을 충족할 수 있어도, 정교한 데이터를 입력하는 것은 어렵습니다.

이제는 응용 프로그램 개발 커리어에 있어 중요한 결정을 내릴 때입니다. 프로젝트에 대한 집중력을 잃을 수 있는 위험이 있어도 구식 HTML 테이블에서 코딩 개선을 시작하느냐, 혹은 문제 해결을 위해 고안된 제품에 눈을 돌리느냐 하는 것입니다.

오늘날 시장에서는 테이블 부분을 처리하고 선택 모드, 정렬, 열 다시 정렬 등의 추가 기능을 제공하는 스마트 테이블 컨트롤을 제공합니다.

많은 회사가 복합 보고서, 대시보드, 재무 데이터, 영업 결과, 대화형 스프레드시트를 표시하기 위해 데이터 테이블을 사용합니다. 수요가 많으면 전문화된 공급이 이루어지기 때문에, 테이블이 웹 컴포넌트 라이브러리에서 잘 표시됩니다.

이 문서에서는 스마트 테이블에서 사용할 수 있는 기능에 대해 이야기해보고, 몇 가지 오픈 소스 대안을 평가하며, React JavaScript 라이브러리용 GrapeCity의 솔루션을 사용하여 우수한 HTML 스마트 데이터 테이블을 생성하는 방법을 설명할 것입니다.

이 문서는 독자가 어느 정도의 웹 개발 경험이 있으며 React에 대한 기본 지식이 있다는 가정하에 작성되었습니다.

테이블 기능

사용자들이 스마트 테이블에 기대하는 몇 가지 핵심 기능이 있습니다.

• 데이터 기능

  • 로컬 파일, 데이터베이스, API 등 다양한 소스에서 데이터 로드

  • 검색, 필터링, 정렬 옵션

  • 페이지 매김 기능으로 데이터 집합 로드 및 표시

  • 데이터 가져오기 및 내보내기 기능

• UI 기능

  • 열 표시 및 숨기기

  • 인라인 편집

  • 대응 속도 - 여러 장치를 위한 기본 제공 지원

  • 긴 데이터 요소를 입력할 수 있도록 열 크기 조정

  • 가로 및 세로 스크롤 지원

  • 스파크라인과 같은 데이터 유효성 검사 및 시각화

현대 프레임워크는 위의 기능 중 일부를 기본 제공으로 구현하고 있습니다. 하지만 고급 기능은 직접 코딩해야 합니다.

효과적인 대안

회사에서 업계 최고 수준의 응용 프로그램을 개발하고 있는 경우 여러 JavaScript 프레임워크를 지원하고 전체 기능 범위를 포괄할 수 있는 보다 전문적인 제품을 알아봐야 할 것입니다.

GrapeCity는 몇 개의 코드 라인으로 React 응용 프로그램에서 구현할 수 있는 여러 데이터 테이블 제품을 제공합니다. 이 제품에는 앞에서 설명한 오픈 소스 컴포넌트와 달리 사용자 정의가 필요 없고 손쉽게 사용할 수 있는 다양한 기능이 포함되어 있습니다.

이제 SpreadJS, DataViewJS, Wijmo FlexGrid를 비롯한 GrapeCity에서 제공하는 가볍고 스마트한 테이블 제품을 몇 가지 살펴보겠습니다.

SpreadJS

SpreadJS를 사용하면 표준 스프레드시트 시나리오에 대한 재무 보고서 및 대시보드, 예산 책정 및 예측 모델, 과학, 엔지니어링, 의료, 교육, 과학 랩 노트북 및 기타 JavaScript 응용 프로그램을 만들 수 있습니다.

SpreadJS의 포괄적인 API를 사용하면 사용자 정의 스프레드시트, 고급 그리드, 대시보드, 보고서, 데이터 입력 양식을 만들 수 있으므로 보다 뛰어난 스프레드시트 사용 사례를 구현할 수 있습니다. SpreadJS는 고속 계산 엔진으로 구동되기 때문에 가장 복잡한 계산도 가능하게 합니다.

SpreadJS는 가장 까다로운 Excel.xlsx 스프레드시트와 호환되는 가져오기 및 내보내기 기능으로 통합을 지원합니다.

Wijmo FlexGrid

FlexGrid는 Wijmo 제품군 중 하나로, FlexChart, Input, PivotChart, FinancialChart, ReportViewer 등의 JavaScript/HTML5 UI 컴포넌트도 포함합니다.

FlexGrid는 Angular, AngularJS, ReactJS, VueJS 및 Knockout을 완전히 지원합니다.

빠른 속도와 확장성 및 독립성을 자랑하는 Wijmo FlexGrid는 최고의 JavaScript 스마트 데이터 그리드입니다. FlexGrid는 사용 공간을 줄여 성능을 향상했으며 웹 응용 프로그램의 소형화로 로드 시간을 단축했습니다.

FlexGrid를 사용하면 데이터 집계, 셀 병합, 배율 크기 조정, 셀 고정과 같이 Excel과 유사한 기능의 이점을 활용할 수 있습니다. 또한 셀 템플릿을 사용하면 그리드의 선언적 마크업 및 바인딩 식이 있는 템플릿을 무제한으로 이용할 수 있습니다.

GrapeCity의 모든 제품은 가벼우면서 가상화 작업이 가능하며 방대한 데이터 소스와 연결되었을 때도 고성능 상태로 작동이 유지됩니다.

Wijmo를 이용하여, 스마트 데이터 테이블 구현

이제 이전에 빌드했던 노드 응용 프로그램에 Wijmo FlexGrid 스마트 테이블을 구현하는 방법을 알아보겠습니다.

Wijmo NPM 패키지를 설치합니다.

npm install @grapecity/wijmo.react.all

src 폴더 안에 새 컴포넌트 폴더를 추가하고 WijmoFlexGrid-Demo.js라는 새 파일을 만듭니다.

/my-app  
/src  
  /components  
    WijmoFlexGrid-Demo.js

WijmoFlexGrid-Demo.js 파일을 열어 다음 코드를 입력합니다. (여기서는 WijmoFlexGridDemo 컴포넌트를 가져오고 FlexGrid에서 컴포넌트의 데이터 소스로 사용할 React state 변수를 선언합니다.)

import '@grapecity/wijmo.styles/wijmo.css';  
import 'bootstrap/dist/css/bootstrap.css';  
import '@grapecity/wijmo.react.grid';  
import React, { useState } from 'react';  
import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid';  
import { recentSales } from "../data/data";
​
export const WijmoFlexGridDemo = () => {
​
const [sales, setSales] = new useState(recentSales);
​
  }

WijmoFlexGridDemo 컴포넌트를 수정하여 FlexGrid 컴포넌트가 포함된 HTML을 반환합니다.

return (  
  <div className="card main-panel">  
    <div className="card-header">  
        <h1>GrapeCity</h1>  
    </div>  
    <div className="card-body">  
    <h5>Wijmo FlexGrid Demo</h5>  
      <p>  
        Building a Smart Data Table in React  
      </p>          
      <div className="container-fluid">  
        <div className="row">  
          <FlexGrid itemsSource={sales}>  
            <FlexGridColumn width={50} binding='id' header="ID" />  
            <FlexGridColumn width={200} binding='client' header="Client" />  
            <FlexGridColumn width={320} binding='description' header="Description" />  
            <FlexGridColumn width={100} binding='value' header="Value"/>  
            <FlexGridColumn width={100} binding='itemCount' header="Quantity" />  
            <FlexGridColumn width={100} binding='soldBy' header="Sold By" />  
            <FlexGridColumn width={100} binding='country' header="Country" />  
          </FlexGrid>  
        </div>  
      </div>
​
    </div>  
  </div>);

App.js 파일을 수정하여 새 WijmoFlexGridDemo 컴포넌트에 대한 참조를 포함합니다.

import React from 'react';  
import './App.css';  
import { OpenSourceTableDemo } from './components/OpenSourceTable-Demo.js'  
import { WijmoFlexGridDemo } from './components/WijmoFlexGrid-Demo.js'
​
function App() {  
return (  
  // <OpenSourceTableDemo/>  
  <WijmoFlexGridDemo/>  
);  
}
​
export default App;

응용 프로그램을 실행합니다.

npm start

응용 프로그램이 실행되면, FlexGrid가 판매 데이터를 나타내고 있는 것을 확인할 수 있습니다.

FlexGrid에서는 셀 편집 기능을 즉시 사용할 수 있습니다. 셀을 더블 클릭하면 그 위치에서 편집을 시작할 수 있습니다.

기본적으로 FlexGridColumn은 편집 가능합니다. 하지만 FlexGridColumn 컴포넌트에서 isReadOnly 속성을 명시적으로 정의하여 편집을 비활성화할 수 있습니다.

<FlexGridColumn width={50} binding='id' header="ID" isReadOnly='true' />

또한 기본적으로 모든 FlexGrid 열은 오름차순 또는 내림차순으로 정렬 가능합니다.

allowSorting 속성을 “false”로 설정하여 열 정렬 기능을 잠글 수 있습니다.

<FlexGridColumn width={200} binding='client' header="Client" allowSorting={false}/>

FlexGrid에서는 열의 위치를 즉시 자유롭게 변경할 수 있습니다.

FlexGridColumn의 allowDragging 속성을 “false”로 설정하여 열 다시 정렬 기능을 비활성화할 수 있습니다.

<FlexGridColumn width={200} binding='client' header="Client" allowDragging={false}/>

오픈 소스 React 데이터 그리드 컨트롤에 구현해야 하는 모든 사용자 정의가 기본 제공됩니다.

Excel 데이터 가져오기

이제 Excel 데이터를 FlexGrid 컴포넌트로 가져오는 방법을 알아보겠습니다.

render() 함수의 card-body div 뒤에 다음 HTML 세그먼트를 추가합니다.

<div className="card-body">  
<div className="card-footer">    
    <div className="input-group">  
      <div className="custom-file">  
          <input type="file" id="importFile"/>  
      </div>  
      <div className="input-group-prepend">  
          <input type="button" value="Import"/>  
      </div>  
    </div>  
</div>

응용 프로그램을 실행하면 페이지 하단에 가져오기 섹션이 있습니다.

가져오기 버튼을 사용하여 FlexGrid 컴포넌트로 파일을 가져옵니다. onClick 함수를 입력 요소에 추가하고 함수 이름을 “import”로 변경합니다.

<input type="button" onClick={load} value="Import"/>

컴포넌트 클래스 내에 새로운 로드 함수를 추가합니다. 여기서 먼저 사용자가 선택한 파일의 전체 경로를 가져옵니다.

var load = () => {  
  let fileInput = document.getElementById("importFile");  
  if (fileInput.files[0]) {
​
  }  
}

이 시점에서 FlexGrid 인스턴스에 대한 참조가 필요합니다. 컴포넌트 선언으로 돌아가서 FlexGrid를 초기화했을 때 트리거된 이벤트 처리기를 추가합니다.

<FlexGrid itemsSource={sales} initialized={initializeFlexGrid}>

FlexGrid 변수에 대한 선언과 새 함수를 추가하여 FlexGrid 초기화 시 설정합니다.

const [flexGrid, setFlexGrid] = useState({});  
​
var initializeFlexGrid = (flexGrid) => {  
    setFlexGrid(flexGrid);  
}

Wijmo 라이브러리에 Excel 파일 내용을 처리하는 가져오기 지시문을 추가합니다.

import * as wjcGridXlsx from "@grapecity/wijmo.grid.xlsx";

다시 로드 함수로 돌아가서 Wijmo 라이브러리의 loadAsync 함수에 호출을 추가하여 파일 내용을 FlexGrid에 로드합니다.

var load = () => {  
  let fileInput = document.getElementById("importFile");  
  if (fileInput.files[0]) {  
    wjcGridXlsx.FlexGridXlsxConverter.loadAsync(flexGrid, fileInput.files[0], { includeColumnHeaders: true }, function (workbook) {  
      flexGrid.autoSizeColumns();  
    });  
  }  
}

Wijmo.xlsx 라이브러리는 파일 압축을 위해 JavaScript zip 라이브러리에 의존합니다. 다음 콘솔 명령을 실행하여 이 종속성 파일을 설치해 봅시다.

npm install jszip --save

응용 프로그램을 재실행하여 가져오기 기능을 테스트합니다.

npm start

Excel을 열어 다음 내용이 포함된 새 Demo.xlsx 파일을 만듭니다.

React 응용 프로그램으로 돌아가서 파일 선택하기를 클릭하고 Demo.xlsx 위치를 선택한 다음 가져오기 버튼을 클릭하여 결과를 확인합니다.

마지막으로 FlexGrid에서 Excel로 데이터를 내보내기 위해서는 무엇이 필요한지 알아보겠습니다.

가져오기 버튼 코드 뒤에 다음 HTML 조각을 추가하여 새 내보내기 버튼을 추가합니다.

<div className="input-group-append">  
<input type="button" onClick={save} className="input-group-text" value="Export"/>  
</div>

onClick 이벤트 처리기는 저장 함수를 가리킵니다. 이 함수를 컴포넌트 클래스 내에 구현해 봅시다.

var save = () => {
​
}

FlexGrid 데이터를 .xlsx 파일로 내보내려면 FlexGridXlsxConverter 클래스의 saveAsync 함수를 호출해야 합니다.

var save = () => {  
  wjcGridXlsx.FlexGridXlsxConverter.saveAsync(flexGrid, {  
      includeColumnHeaders: true,  
      includeCellStyles: false,  
      formatItem: false  
  }, "FlexGrid.xlsx");  
}

응용 프로그램을 다시 실행한 후 내보내기 버튼을 테스트해 봅니다.

이제 FlexGrid 컴포넌트에서 내보낸 .xlsx 파일을 열어볼 수 있습니다.

위의 데모는 FlexGrid 컴포넌트의 아주 일부분에 지나지 않습니다. 전체 설명서, 데모, Angular, React, Vue용으로 작성된 예시를 보려면 Wijmo 제품군인 JavaScript UI 컴포넌트 및 도구에 대한 GrapeCity 페이지를 탐색해 보는 것이 좋습니다.

마무리하며

React 기반의 스마트 데이터 테이블을 만들고 사용하는 다양한 방법이 있습니다. 어떤 접근 방식은 다른 접근 방식보다 훨씬 더 많은 수작업이 필요하지만, 충분한 시간을 들여 사용해 보기 전까지는 알 수 없습니다.

매일의 요구 사항을 충족할 수 있는 많은 무료 및 오픈 소스 테이블 라이브러리가 있습니다. 우리는 이 문서에서 해당 테이블 라이브러리 중 몇 가지를 구현하는 방법에 대해 알아보았습니다.

그러나 비즈니스 및 엔터프라이즈 프로젝트의 경우 개발자는 주의가 산만해져 차선책이나 추가 기능 또는 구성을 개발하는 데 시간을 낭비하고 싶지 않습니다. 이것이 바로 Wijmo와 같은 상용 라이브러리 컴포넌트 제품군이 확실한 투자 수익률을 보장할 수 있는 이유입니다.

프레임워크에 구애받지 않도록 구축된 Wijmo는 Angular, AngularJS, ReactJS 및 VueJS를 완전히 지원하며, 프레임워크 전체에서 동일한 그리드를 가집니다. 이 기능은 조직에 선택의 자유를 제공하며 다른 JavaScript 프레임워크로 마이그레이션하기로 결정한 경우 시간과 개발 노력을 절약할 수 있음을 의미합니다.

> Wijmo(위즈모) 홈페이지

> Wijmo(위즈모) 튜토리얼