! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

[리액트 vs 위즈모] React 스마트 데이터 테이블 생성하기 > 블로그 & Tips

본문 바로가기

[리액트 vs 위즈모] React 스마트 데이터 테이블 생성하기

페이지 정보

작성자 GrapeCity 작성일 2021-04-06 10:30 조회 8,686회 댓글 0건

본문

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


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


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


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


이 문서에서는 스마트 테이블에서 사용할 수 있는 기능에 대해 이야기해보고, 몇 가지 오픈 소스 대안을 평가하며, React JavaScript 라이브러리용 GrapeCity의 솔루션을 사용하여 우수한 HTML 스마트 데이터 테이블을 생성하는 방법을 설명할 것입니다. 이 문서는 독자가 어느 정도의 웹 개발 경험이 있으며 React에 대한 기본 지식이 있다는 가정하에 작성되었습니다.


테이블 기능

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

  • 데이터 기능

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

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

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

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

  • UI 기능

    • 열 표시 및 숨기기

    • 인라인 편집

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

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

    • 가로 및 세로 스크롤 지원

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

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



오픈 소스 프레임워크


Facebook이 개발하여 유지하고 있는 React는 매우 인기 있는 오픈 소스 JavaScript 라이브러리입니다. 최근 React는 JavaScript 프레임워크 시장에서 약 60%의 시장 점유율을 차지하고 있습니다. 이처럼 업계에서 많은 사람이 이용하고 있기 때문에, React를 기반으로 구축된 응용 프로그램을 지원하기 위한 많은 제품이 개발된 것은 당연한 일입니다.


다음은 React를 위해 만들어진 몇 가지 인기 있는 오픈 소스 스마트 데이터 테이블 라이브러리입니다.


이 오픈 소스 프로젝트에는 장단점이 있습니다. 원하는 기능에 따라 일부 컴포넌트가 다른 컴포넌트보다 더 유용할 수 있습니다.



React 기본 데이터 그리드를 사용하여 React 응용 프로그램 만들기


지금 설명하고자 하는 것과 유사한 오픈 소스 컴포넌트인 React 데이터 그리드를 사용하여 새로운 노드를 기반으로 한 React 응용 프로그램을 빌드해 봅시다.


Node.js를 설치합니다. 그런 다음 명령줄 콘솔을 이용하여 새로운 노드 React 응용 프로그램을 만듭니다.

npx create-react-app my-app  
cd my-app  
npm start


React 데이터 그리드 패키지를 설치합니다. package.json 파일을 열고 종속성 섹션에 이 줄을 추가합니다.

"babel-loader": "^8.1.0",  
"react-data-grid": "5.0.1",  
"react-data-grid-addons": "5.0.4",  
"bootstrap": "^4.5.2"


브라우저 목록 섹션 뒤에 다음 줄을 추가합니다.

"devDependencies": {  
"immutable": "^4.0.0-rc.12"  
}


React 데이터 그리드 패키지 및 종속성 파일을 설치하려면 npm install 명령줄 명령을 실행합니다.

npm install


src 폴더 안에 새 데이터 폴더를 추가하고 data.js라는 새 파일을 만듭니다. 사용자는 데이터 그리드를 채우기 위해 데이터를 사용할 것입니다.

export const recentSales = [  
{  
  id: 1,  
  country: "Canada",  
  soldBy: "Bill",  
  client: "Cerberus Corp.",  
  description: "Prothean artifacts",  
  value: 6250,  
  itemCount: 50  
},  
{  
  id: 2,  
  country: "Canada",  
  soldBy: "Bill",  
  client: "Strickland Propane",  
  description: "Propane and propane accessories",  
  value: 2265,  
  itemCount: 20  
},  
{  
  id: 3,  
  country: "USA",  
  soldBy: "Ted",  
  client: "Dunder Mifflin",  
  description: "Assorted paper-making supplies",  
  value: 4700,  
  itemCount: 10  
},  
{  
  id: 4,  
  country: "USA",  
  soldBy: "Ted",  
  client: "Utopia Planitia Shipyards",  
  description: "Dilithium, duranium, assorted shipbuilding supplies",  
  value: 21750,  
  itemCount: 250  
},  
{  
  id: 5,  
  country: "USA",  
  soldBy: "Ted",  
  client: "Glengarry Estates",  
  description: "Desks, phones, coffee, steak knives, and one Cadillac",  
  value: 5000,  
  itemCount: 5  
},  
{  
  id: 6,  
  country: "Germany",  
  soldBy: "Angela",  
  client: "Wayne Enterprises",  
  description: "Suit armor and run-flat tires",  
  value: 35000,  
  itemCount: 25  
},  
{  
  id: 7,  
  country: "Germany",  
  soldBy: "Angela",  
  client: "Stark Industries",  
  description: "Armor and rocket fuel",  
  value: 25000,  
  itemCount: 10  
},  
{  
  id: 8,  
  country: "Germany",  
  soldBy: "Angela",  
  client: "Nakatomi Trading Corp.",  
  description: "Fire extinguishers and replacement windows",  
  value: 15000,  
  itemCount: 50  
},  
{  
  id: 9,  
  country: "UK",  
  soldBy: "Jill",  
  client: "Spaceley Sprockets",  
  description: "Anti-gravity propulsion units",  
  value: 25250,  
  itemCount: 50  
},  
{  
  id: 10,  
  country: "UK",  
  soldBy: "Jill",  
  client: "General Products",  
  description: "Ion engines",  
  value: 33200,  
  itemCount: 40  
}  
];


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

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


OpenSourceTable-Demo.js 파일을 열어 다음 코드를 입력합니다.

(여기서는 ReactDataGrid 컴포넌트를 가져오고 데이터 그리드가 열 정의 및 컴포넌트의 데이터 소스로 사용할 React state 변수를 선언합니다.)

import 'bootstrap/dist/css/bootstrap.min.css';  
import React, { useState } from 'react';  
import ReactDOM from "react-dom";  
import ReactDataGrid from "react-data-grid";  
import { recentSales } from "../data/data";
​
export const OpenSourceTableDemo = () => {
​
const [columns, setColumns] = new useState([  
  { key: "id", name: "Id" },  
  { key: "country", name: "Country" },  
  { key: "soldBy", name: "Sold by" },  
  { key: "client", name: "Client" },  
  { key: "description", name: "Description" },  
  { key: "value", name: "Value" },  
  { key: "itemCount", name: "Item Count" }  
]);
​
const [sales, setSales] = new useState(recentSales);  
}


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

return (  
<div className="card main-panel">  
  <div className="card-header">  
    <h1>Open Source</h1>  
  </div>  
  <div className="card-body">  
  <h5>React Data Grid Demo</h5>  
    <p>  
      Building a Smart Data Table in React with React Data Grid  
    </p>          
    <div className="container-fluid">  
      <div className="row">  
          <ReactDataGrid  
              columns={columns}  
              rowGetter={i => sales[i]}  
              rowsCount={recentSales.length}  
            />  
      </div>  
    </div>  
  </div>  
</div>);


App.js 파일을 편집하고 내용을 아래 줄로 바꿉니다.

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


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

npm start


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

ReactDataGrid


일부 컴포넌트 기능을 표시하려면 셀 값 업데이트, 행 정렬, 열 다시 정렬을 지원하도록 오픈 소스 데이터 그리드를 사용자 정의해 보세요.


셀 값 업데이트 구현

OpenSourceTable-Demo.js 파일을 열고 각 그리드 열 정의에 editable: true 특성을 추가합니다.

{ key: "id", name: "Id", editable: true },  
{ key: "country", name: "Country", editable: true },  
{ key: "soldBy", name: "Sold by", editable: true },  
{ key: "client", name: "Client", editable: true },  
{ key: "description", name: "Description", editable: true },  
{ key: "value", name: "Value", editable: true },  
{ key: "itemCount", name: "Item Count", editable: true }


새 onGridRowsUpdated 함수를 추가하여 셀 업데이트를 처리하고 기본 데이터 소스를 업데이트합니다.

const onGridRowsUpdated = ({ fromRow, toRow, updated }) => {  
  const s = sales.slice();  
  for (let i = fromRow; i <= toRow; i++) {  
    s[i] = { ...s[i], ...updated };  
  }  
  setSales(s);  
};


ReactDataGrid 컴포넌트를 수정하여 enableCellSelect={true} 특성과 onGridRowsUpdated={onGridRowsUpdated} 이벤트 처리기를 추가합니다.

<ReactDataGrid  
columns={columns}  
rowGetter={i => sales[i]}  
rowsCount={recentSales.length}  
enableCellSelect={true}  
onGridRowsUpdated={onGridRowsUpdated}  
/>


이 변경 작업을 통해 React 데이터 그리드가 업데이트를 처리하고 기본 데이터 소스에서 업데이트를 유지할 수 있습니다.

ReactDataGrid



행 정렬 구현


OpenSourceTable-Demo.js 파일을 열고 각 열 정의에 sortable: true 특성을 추가하여 열 정렬 기능을 활성화합니다.

{ key: "id", name: "Id", editable: true, sortable: true },  
{ key: "country", name: "Country", editable: true, sortable: true },  
{ key: "soldBy", name: "Sold by", editable: true, sortable: true },  
{ key: "client", name: "Client", editable: true, sortable: true },  
{ key: "description", name: "Description", editable: true, sortable: true },  
{ key: "value", name: "Value", editable: true, sortable: true },  
{ key: "itemCount", name: "Item Count", editable: true, sortable: true }


새 sortRows 함수 구현

const sortRows = (initialRows, sortColumn, sortDirection) => rows => {  
  const comparer = (a, b) => {  
    if (sortDirection === "ASC") {  
      return a[sortColumn] > b[sortColumn] ? 1 : -1;  
    } else if (sortDirection === "DESC") {  
      return a[sortColumn] < b[sortColumn] ? 1 : -1;  
    }  
  };  
  return sortDirection === "NONE" ? initialRows : [...rows].sort(comparer);  
};


ReactDataGrid 컴포넌트를 수정하여 onGridSort 이벤트 처리기를 구현하고 방금 생성한 함수를 참조합니다.

<ReactDataGrid  
columns={columns}  
rowGetter={i => sales[i]}  
rowsCount={recentSales.length}  
enableCellSelect={true}  
onGridRowsUpdated={onGridRowsUpdated}  
onGridSort={(sortColumn, sortDirection) =>  
    setSales(sortRows(sales, sortColumn, sortDirection))  
}  
/>


웹 페이지로 돌아가서 열이 정렬 가능한 상태인지 확인합니다.

ReactDataGrid


열 다시 정렬 구현

OpenSourceTable-Demo.js 파일을 열고 가져오기 섹션 뒤에 이 선언을 추가합니다.

const {  
DraggableHeader: { DraggableContainer }  
} = require("react-data-grid-addons");


각 열 정의에 draggable: true 속성을 추가하여 열 다시 정렬을 활성화합니다.

{ key: "id", name: "Id", editable: true, sortable: true, draggable: true },  
{ key: "country", name: "Country", editable: true, sortable: true, draggable: true },  
{ key: "soldBy", name: "Sold by", editable: true, sortable: true, draggable: true },  
{ key: "client", name: "Client", editable: true, sortable: true, draggable: true },  
{ key: "description", name: "Description", editable: true, sortable: true, draggable: true },  
{ key: "value", name: "Value", editable: true, sortable: true, draggable: true },  
{ key: "itemCount", name: "Item Count", editable: true, sortable: true, draggable: true }


onHeaderDrop 함수를 추가하여 열 끌어서 놓기 이벤트를 처리합니다.

const onHeaderDrop = (source, target) => {  
var columnsCopy = columns.slice();  
const columnSourceIndex = columns.findIndex(  
  i => i.key === source  
);  
const columnTargetIndex = columns.findIndex(  
  i => i.key === target  
);
​
columnsCopy.splice(  
  columnTargetIndex,  
  0,  
  columnsCopy.splice(columnSourceIndex, 1)[0]  
);
​
setColumns(columnsCopy.splice());  
setColumns(columnsCopy);  
};


새 DraggableContainer 컴포넌트 내에서 기존 ReactDataGrid 컴포넌트를 래핑합니다.

<DraggableContainer onHeaderDrop={onHeaderDrop}>  
    <ReactDataGrid  
          columns={columns}  
          rowGetter={i => sales[i]}  
          rowsCount={recentSales.length}  
          enableCellSelect={true}  
          onGridRowsUpdated={onGridRowsUpdated}  
          onGridSort={(sortColumn, sortDirection) =>  
            setSales(sortRows(sales, sortColumn, sortDirection))  
          }  
      />  
</DraggableContainer>


응용 프로그램을 반환하고 그리드 열을 이동해 봅니다.

ReactDataGrid


꽤 괜찮아 보이기는 하지만, 이 기능을 구현하는 작업은 쉽지 않았습니다. 이제는 코드를 유지할 수 있게 되었습니다.


효과적인 대안

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


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


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


SpreadJS

SpreadJS는 450가지가 넘는 Excel 함수를 지원하는 세계 판매 1위의 JavaScript 스프레드시트입니다. SpreadJS는 React, Vue, Angular 및 TypeScript를 완전히 지원하며 Excel에 종속되지 않는 Excel과 유사한 스프레드시트 환경을 신속하게 제공할 수 있습니다. 

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가 판매 데이터를 나타내고 있는 것을 확인할 수 있습니다.

React 데이터 그리드


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

React 데이터 그리드


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

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


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

React 데이터 그리드


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

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


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

React 데이터 그리드


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>


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

React 데이터 그리드


가져오기 버튼을 사용하여 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 데이터 그리드


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

React 데이터 그리드


마지막으로 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");  
}


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

React 데이터 그리드


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

React 데이터 그리드


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



마무리하며


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


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


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


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

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.