기초튜토리얼 Vue에서 스마트 데이터 테이블 빌드하기
페이지 정보
작성자 GrapeCity
작성일 2023-10-10 09:28 조회 172회
댓글 0건
본문
첨부파일
관련링크
테이블은 복잡한 데이터를 가장 쉽게 구성할 수 있는 방법 중 하나로, 웹 제품에서 일반적으로 많이 사용됩니다.
데이터를 행과 열로 표현할 수 있는 경우, HTML 테이블을 사용하여 표시하는 것이 가장 좋은 방법입니다.
하지만 HTML 테이블은 JavaScript 코드를 추가하지 않을 시, 정렬이나 필터링 혹은 페이지 지정 또는 데이터 내보내기와 같은 작업이 불가한 기본 테이블입니다.
이에 많은 JavaScript 라이브러리에서 복합 보고서, 대시보드, 재무 데이터, 영업 결과, 대화형 스프레드시트를 표시하는 데 사용할 수 있는 데이터 테이블을 제공합니다.
현재는 전용 데이터 테이블 컨트롤이 테이블 부분을 처리합니다.
기존 방식으로 테이블을 코딩하는 것은 권장하지 않습니다.
데이터 집약적인 비즈니스 응용 프로그램 개발에 참여한 적이 있다면 읽기 쉽고 유지 관리 가능한 방식으로 응용 프로그램을 빌드하는 게 얼마나 어려운지 이미 알고 계실 것입니다.
데이터 및 비즈니스 요구 사항에 맞게 조정할 수 있도록 충분히 유연한 데이터 테이블 컴포넌트를 빌드하면 많은 시간을 절약할 수 있을 것입니다.
하지만, 이 컴포넌트의 개발은 여전히 시간이 걸리는 작업이죠. 그렇다면 이 작업을 아웃소싱하면 어떨까요?
는 사용자 인터페이스 빌드를 위한 라이브러리입니다.
기본 제공 데이터 테이블 컴포넌트는 포함되어 있지 않습니다.
하지만 많은 오픈 소스 라이브러리에서 직접 코딩하는 대신, 사용하기 쉬운 API를 제공합니다.
이는 Vue 애플리케이션에서 데이터 테이블을 생성할 수 있습니다.
물론 사용 사례에 맞게 해당 API를 사용자 정의하거나 기능을 추가해야 합니다.
이번 스터디에서는 Vue에서 스마트 데이터 테이블을 구현하고 사용하는 방법을 설명합니다.
오픈 소스 라이브러리를 사용하고 특정 요구 사항에 맞게 사용자 정의한 다음, 이 프로세스와 GrapeCity의 Wijmo를 비교하게 될 것입니다.
GrapeCity의 Wijmo는 요구 사항 대부분에 대해 사용자 정의가 필요하지 않으며 최신 Vue 버전에 대해 더 효과적인 지원 및 업데이트를 제공합니다.
이번 글에서는 다음과 같은 내용을 다룹니다.
스터디를 함께 따라가기 위해서는 JavaScript 및 Vue.js에 익숙해야 합니다.
또한, 개발 시스템에 Node.js를 설치해야 합니다.
Vue CLI가 Node.js에 의존하기 때문입니다.
프로젝트를 함께 진행하기 위한 소스 코드를 다운로드해 주시길 바랍니다.
스마트 데이터 테이블의 기능
다음은 사용자가 최신 데이터 테이블에서 기대하는 기능입니다.
로컬 파일, 데이터베이스, API 등 다양한 소스에서 데이터 로드
검색, 필터링, 정렬 옵션
페이지 지정 기능으로 대규모 데이터 집합 로드 및 표시
열 표시 및 숨기기
인라인 편집 및 편집된 데이터 쓰기 및 내보내기
여러 장치를 위한 지원(대응 속도)
긴 데이터 요소를 입력할 수 있도록 열 크기 조정
가로 및 세로 스크롤 지원
스파크라인과 같은 데이터 유효성 검사 및 시각화
일부 프레임워크에는 (몇 가지 기본 기능이 포함된) 기본 제공 기능이 있지만 고급 기능은 직접 코딩해야 합니다.
예를 들어, 데이터 테이블은 복잡한 데이터 집합을 작업하는 데에 사용됩니다.
일반적으로 Excel 스프레드시트, 데이터베이스, 심지어 REST API를 사용하여 데이터를 가져오고 내보내는 다양한 메커니즘을 지원해야 합니다.
오픈 소스 데이터 테이블 라이브러리
위에서 언급한 대로 Vue는 기본 제공 데이터 테이블 컴포넌트를 제공하지 않습니다.
하지만 개발자 커뮤니티에서는 이러한 격차를 해소할 수 있게 특별히 디자인된 많은 라이브러리를 만들고 오픈 소싱해 왔습니다.
간단한 검색만으로도 Vue를 위한 많은 무료 및 오픈 소스 테이블 컨트롤을 찾을 수 있습니다.
다음은 Vue 앱에서 사용할 수 있는 데이터 테이블 라이브러리입니다.
: 표 형식 데이터를 표시하는 데 사용할 수 있는 v-data-table 컴포넌트. 정렬, 검색, 페이지 지정, 콘텐츠 편집 및 행 선택 기능 포함.
: element-ui 기반. SSR(서버 측 렌더링)이 포함된 간단하고 사용자 정의 가능하며 페이지 지정이 가능한 테이블.
: 서버 측 처리, 무제한 내보내기 및 Vue 컴포넌트가 포함된 데이터 테이블 패키지. JSON 템플릿을 기반으로 복잡한 테이블 신속하게 빌드 가능. Enso 에코시스템과 독립적으로 사용.
: 정렬, 검색, 페이지 지정과 같은 기본 기능을 제공하는 데이터 테이블 포함, Bulma를 기반으로 하는 Vue를 위한 경량형 UI 컴포넌트의 집합.
Vue 앱에서 오픈 소스 데이터 테이블 구현하기
오픈 소스 컴포넌트를 신속하게 통합할 수 있는 방법의 예로 Vue 앱의 예제에서 데이터 테이블을 구현해 보겠습니다.
여기서는 자체 데이터 테이블 컴포넌트를 포함하여 Vue 앱을 개발하기 위한 Material Design을 기반으로 하는 컴포넌트 프레임워크, Vuetify를 사용합니다.
Vuetify의 데이터 테이블 컴포넌트는 유연합니다.
정렬, 필터링, 수정, 페이지 지정과 같은 기본 기능을 지원합니다.
하지만 데이터 내보내기 및 가져오기와 같은 고급 기능의 경우, 컴포넌트를 사용자 정의하기 위한 코드는 추가해야 합니다.
또한 전체 콘텐츠를 표시하기 위한 크기 조정, 행 단계 변경 등, 대규모 데이터 집합을 쉽고 편하게 사용하는 데에 도움이 되는 유용한 UI 기능이 없습니다.
먼저 Vue 프로젝트를 생성하기 위한 공식 유틸리티, Vue CLI를 설치하겠습니다.
로컬 개발 시스템에 Node.js와 npm이 설치되어 있어야 합니다.
설치되지 않은 경우 아래의 방법 중 하나로 설치해 주세요!
로 이동하여 사용 중인 시스템용 바이너리를 다운로드합니다.
시스템의 공식 패키지 관리자를 사용합니다.
시스템에서 여러 버전의 노드를 관리할 수 있는 과 같은 노드 버전 관리자를 사용합니다.
이제 새 터미널을 열고 다음 명령을 실행합니다.
$ npm install -g @vue/cli
아래 명령을 실행하여 새 Vue 프로젝트를 생성합니다. 프로젝트명은 vuedatatabledemo로 하겠습니다.
$ vue create vuedatatabledemo
사전 설정을 선택하라는 메시지가 표시됩니다.
Default([Vue 2] babel, eslint)을 선택합니다.
현재 Vue 3는 이미 출시되었습니다.
하지만 대부분의 라이브러리가 해당 버전을 아직 지원하지 않기 때문에 우리는 Vue 2를 사용해야 합니다.
프로젝트의 폴더로 이동하여 다음과 같이 개발 서버를 시작합니다.
$ cd vuedatatabledemo $ npm run serve
웹 브라우저를 열고 http://localhost:8080/으로 이동하여 실행 중인 Vue 앱을 확인합니다.
이제 데이터를 가지고 오기 위해서는 REST API 백엔드가 필요합니다.
실제 REST API를 빌드하는 것은 이번 스터디 범위를 벗어나기 때문에
json-server를 사용해 JSON에서 빠르게 REST API를 흉내내 보겠습니다.
새 터미널을 열고 다음 명령을 실행합니다.
$ npm install -g json-server
Vue 프로젝트 내에서 db.json 파일을 만들겠습니다.
파일에서 제품 데이터를 복사하거나, 프로젝트의 폴더에 직접 저장합니다.
다음 명령을 사용하여 서버를 실행합니다.
$ json-server --watch db.json --port 8000
JSON 파일에서 제품 데이터를 노출하는 http://localhost:8000/products 엔드포인트가 생성됩니다.
Vue 앱에서 해당 REST API를 사용하여 데이터 테이블에 제품을 표시하는 방법을 살펴보겠습니다.
Vuetify, Axios 및 Vue Axios를 설치합니다.
다음 명령을 사용하여 프로젝트에 Vuetify를 설치해 보겠습니다.
$ vue add vuetify
사전 설정을 선택하라는 메시지가 표시됩니다.
기본값을 선택해 주세요.
이제 다음 명령을 사용하여 Axios 및 Vue Axios를 설치합니다.
$ npm install axios vue-axios
src/main.js 파일을 열고 다음 코드를 추가하여 Axios를 가져옵니다.
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
데이터 테이블 정의: src/App.vue 파일을 열고 다음과 같이 업데이트합니다.
<script>
import axios from "axios";
export default {
name: 'App',
components: {
},
data: () => ({
products: [],
loading: true,
headers: [
{ text: "Product Name", value: "name" },
{ text: "Type", value: "type" },
{ text: "SKU", value: "sku" },
{ text: "Manufacturer", value: "manufacturer" },
{ text: "Model", value: "model" },
{ text: "UPC", value: "upc" },
{ text: "Price", value: "price" }
]
}),
methods: {
fetchData() {
this.loading = true;
axios.get("http://localhost:8000/products").then((response) => {
this.loading = false;
//console.log(response);
this.products = response.data;
});
},
},
mounted() {
this.fetchData();
}
};
</script>
이 코드 조각에서는 Axios를 먼저 가지고 오는 것부터 시작합니다.
다음으로 데이터 섹션에서는 로딩 상태, 가져온 제품, 데이터 테이블의 헤더를 보관하는 로딩, 헤더 배열, 제품 배열을 정의합니다.
제품을 가져오기위해 GET 요청을 보내는 Axios의 get 메서드를 호출하는 fetchData 메서드를 정의합니다.
마지막으로, Vue 컴포넌트의 마운팅된 life-cycle(생명 주기) 메서드에 fetchData 메서드를 호출하여 제품을 실제로 가져와 제품 배열에 추가합니다.
다음 코드를 동일한 src/App.vue 파일에 추가하여 템플릿에 데이터 테이블을 만들어 보겠습니다.
<template>
<v-card class="p-64">
<v-data-table ref="myTable"
:headers="headers"
:items="products"
:items-per-page="10"
class="elevation-1">
</v-data-table>
</v-card>
</template>
v-card를 사용하여 Material 카드를 만들고, 그 안에서 v-data-table을 사용하여 데이터 테이블을 만듭니다.
크기 조정 가능한 열 구현하기
기본적으로, 오픈 소스 데이터 테이블에서는 열의 크기가 쉽게 조정되지 않습니다.
데이터 테이블에서 열 크기 조정을 활성화하는 방법을 알아보겠습니다.
StackOverflow에서 한 사용자가 Vuetify 데이터 테이블의 열 크기를 조정하는 방법에 대해 문의했습니다.
하지만 아쉽게도 Vuetify 팀에서는 이 기능을 구현할 계획이 없다고 합니다.
즉, 해당 기능을 직접 구현해야 합니다.
src/App.vue 파일을 열겠습니다.
컴포넌트의 메서드 섹션에 resizableColumns 메서드를 추가하고, 다음과 같이 마운팅된 메서드에서 호출합니다.
// [...]
export default {
name: 'App',
components: {
},
data: () => ({
// [...]
}),
methods: {
// [...]
resizableColumns() {}
// [...]
},
mounted() {
// [...]
this.resizableColumns();
}
}
이제 메서드를 구현하겠습니다.
먼저 페이지의 테이블에 대한 참조를 가져와 다음과 같이 변수를 정의합니다.
resizableColumns() {
let table = document.querySelector('table');
var initialPageX;
var currentColumn;
var nextColumn;
var currentColumnWidth;
var nextColumnWidth;
currentColumn 변수는 현재 크기를 조정하고 있는 열을 가리키고, nextColumn 변수에는 다음 열이 저장됩니다.
initialPageX 변수에는 마우스가 클릭된 위치의 가로 좌표가 포함됩니다.
다음으로 모든 테이블 헤더를 쿼리하고, 이를 반복한 다음 div 요소를 만듭니다.
오른쪽 높이가 동일한 테이블의 각 div 요소에 이를 추가해야 합니다.
이 div 요소는 열의 크기를 조정하기 위해 드래그하는 막대로 사용됩니다.
if (table){
const columnHeaders = document.querySelectorAll('th');
for (var i = 0; i < columnHeaders.length; i++){
var bar = createBar(columnHeaders[i].offsetHeight + 'px');
columnHeaders[i].appendChild(bar);
columnHeaders[i].style.position = 'relative';
}
}
다음과 같이 createBar 메서드를 정의합니다.
function createBar(height) {
var div = document.createElement('div');
div.style.top = 0;
div.style.right = 0;
div.style.width = '9px';
div.style.borderRight = '5px solid grey';
div.style.position = 'absolute';
div.style.cursor = 'col-resize';
div.style.userSelect = 'none';
div.style.height = height;
div.style.zIndex = 1;
div.addEventListener('mousedown', function (e) {
currentColumn = e.target.parentElement;
nextColumn = currentColumn.nextElementSibling;
initialPageX = e.pageX;
currentColumnWidth = currentColumn.offsetWidth;
if (nextColumn)
nextColumnWidth = nextColumn.offsetWidth;
});
document.addEventListener('mouseup', function () {
currentColumn = undefined;
nextColumn = undefined;
initialPageX = undefined;
nextColumnWidth = undefined;
currentColumnWidth = undefined
});
document.addEventListener('mousemove', function (event) {
if (currentColumn) {
var resizeAmount = event.pageX - initialPageX;
currentColumn.style.width = (currentColumnWidth + resizeAmount) + 'px';
if (nextColumn)
nextColumn.style.width = (nextColumnWidth - resizeAmount) + 'px';
}
});
return div;
}
전달된 높이로 div를 만들고 일부 이벤트 리스너를 설정합니다.
마우스를 클릭하면 현재 열과 다음 열 및 해당 너비를 설정합니다.
마우스 클릭 버튼을 놓으면 이러한 변수를 정의되지 않음으로 재설정합니다.
마우스가 이동하면 초기 위치에서 현재 마우스의 가로 위치를 빼서 열의 크기를 조정해야 하는 양을 계산합니다.
그런 다음 계산된 양을 현재 열의 너비에 더하고 인접한 열의 너비에서 뺍니다.
이는 아직 완벽하지 않지만 데이터 테이블에 크기 조정 기능을 추가하는 방법을 보여 줍니다.
다음은 구현된 기능의 데모입니다.
더 효과적인 방법
Vue 앱에 데이터 테이블을 추가하고, (오픈 소스 개발팀이 지원하고 싶지 않을 것 같은) 스프레드시트 앱에 공통적인 기능(간단한 열 크기 조정)을 구현하는 것은 많은 노력이 필요한 작업이었습니다.
게다가 현재 Vue 버전과 호환되지도 않습니다.
기타 데이터 테이블에 누락된 기능을 직접 구현해야 하며, 열 크기 조정만을 구현하기 위해 추가한 것보다 훨씬 더 많은 코드가 필요할 수도 있습니다.
이로 인해 시간이 많이 걸리는 작업이 추가되어 프로젝트 제공이 지연될 수 있습니다.
하지만 우리는 이미 준비된 데이터 테이블 솔루션을 사용하여 복잡한 문제를 방지할 수 있습니다.
GrapeCity는 코드 몇 줄만으로 Vue 앱에 추가할 수 있는 여러 데이터 테이블을 제공합니다.
이러한 데이터 테이블에는 이미 열 크기 조정 및 기타 사용 사례를 처리하는 데 필요한 많은 기능이 포함되어 있습니다.
GrapeCity는 데이터를 처리하기 위한 세 가지 컴포넌트를 제공합니다.
Wijmo FlexGrid
SpreadJS
DataViewJS
세 컴포넌트는 모두 크기가 작은 경량형이며 행 드래그 앤 드롭, 다중 선택 모드, 정렬, 열 재정렬, 그룹화, 필터링, 편집, 사용자 정의 셀, XAML 스타일 열 배율 크기 조정 등 고급 기능이 필요한 경우 매우 적합합니다.
해당 컴포넌트는 대규모 데이터 집합을 처리할 수 있고 성능에 최적화되어 있으므로 제공하려는 최대한 많은 양의 데이터를 처리할 수 있습니다.
데이터를 표 형식으로 표시하고 편집할 수 있는 강력하고 유연한 컨트롤입니다.
이 컨트롤은 모든 기능을 갖춘 그리드로 다중 선택 모드, 정렬, 열 재정렬, 그룹화, 필터링, 편집, 사용자 정의 셀 등 익숙한 모든 기능을 제공합니다.
는 Excel에 의존하지 않는 순수 JavaScript 기반 Web-Excel 컴포넌트입니다.
사용자 정의 스프레드시트, 고급 그리드, 대시보드, 강력한 고속 계산 엔진 및 Excel 파일을 가져오고 내보낼 수 있는 기능이 포함된 보고서를 만들 수 있습니다.
그 외에도 , , 등 인기 있는 세 가지 JavaScript 프레임워크 및 TypeScript를 완벽하게 지원합니다.
Wijmo FlexGrid가 포함된 FlexibleVue 3 데이터 테이블
Vue 응용 프로그램에 FlexGrid를 통합하는 방법에 대해 알아보겠습니다.
터미널로 돌아가 다음 명령을 실행하여 Vue용 Wijmo 컴포넌트를 설치합니다.
$ npm install @grapecity/wijmo.vue2.all jszip
src/App.vue 파일을 열고 다음 행을 추가하여 CSS 스타일을 가져옵니다.
<style> @import '../node_modules/@grapecity/wijmo.styles/wijmo.css'; </style>
다음 코드를 추가하여 FlexGrid로 데이터 테이블을 만듭니다.
import { FlexGrid } from '@grapecity/wijmo.grid';
export default {
name: 'App',
components: {
},
data: () => ({
products: [],
loading: true,
theGrid: null,
/* [...] */
}),
methods: {
fetchData() {
this.loading = true;
axios.get("http://localhost:8000/products").then((response) => {
this.loading = false;
//console.log(response);
this.products = response.data;
this.createWijmoTable();
});
},
createWijmoTable(){
this.theGrid = new FlexGrid('#theGrid', {
stickyHeaders: true,
autoGenerateColumns: true,
alternatingRowStep: true,
itemsSource: this.products
});
},
// [...]
위의 코드 조각에서 FlexGrid 그리드를 가져온 다음 컴포넌트의 데이터 섹션에 Grid 변수를 정의합니다.
다음으로 createWijmoTable 메서드를 추가하고 데이터 테이블을 만듭니다.
마지막으로, Axios.get 메서드의 then 콜백에서 이 메서드를 호출합니다.
이는 데이터를 가지고 올 때 테이블을 생성하기 위함입니다.
itemsSource 속성을 사용하여 데이터를 그리드로 가져오고, 다른 속성을 사용하여 특정 기능을 활성화하거나 비활성화합니다.
동일한 파일에서, 다음과 같이 템플릿 섹션 내 코드를 업데이트합니다.
<template>
<v-card class="p-64">
<!-- [...] -->
<div id="theGrid"></div>
</v-card>
</template>
이제 사용자 정의 코드를 추가하지 않고도, 기본적으로 열 크기를 조정할 수 있습니다.
FlexGrid provides는 기타 고정 헤더, 자동 열 생성, 행 단계 조정 등 즉시 사용 가능한 기능을 제공합니다.
FlexGrid를 사용하여 Excel로 내보내기
코드를 추가해 데이터 테이블을 Excel로 내보내 보겠습니다.
src/App.vue 파일로 돌아가서 라이브러리를 가져와 다음과 같이 Excel 지원 기능을 추가합니다.
import * as wjGridXlsx from '@grapecity/wijmo.grid.xlsx';
다음 메서드를 정의합니다.
exportExcelFlexgrid() {
var book = wjGridXlsx.FlexGridXlsxConverter.save(this.theGrid, {
includeColumnHeaders: true,
includeRowHeaders: true,
});
book.sheets[0].name = 'FlexGrid Data';
book.saveAsync('FlexGrid-Export.xlsx');
},끝으로, 템플릿에 버튼을 추가합니다.
<v-btn @click="exportExcelFlexgrid">Export as Excel</v-btn>
이제 데이터를 편집한 다음 Excel로 내보내기 버튼을 사용하여 데이터 테이블을 Excel로 내보낼 수 있습니다.
샘플 코드를 확인해 보세요!
마무리하며
Vue에서 스마트 데이터 테이블을 만들고 사용하는 데는 많은 방법이 있습니다.
일부 방법에는 다른 방법보다 훨씬 더 많은 수동 작업이 필요합니다.
커뮤니티에서는 여러 전형적인 기본 요구 사항을 충족하는 많은 무료 및 오픈 소스 라이브러리를 제공해 왔습니다.
하지만 시간이 곧 비용과 직결되는 비즈니스 및 엔터프라이즈 프로젝트에서 Wijmo와 같은 상용 라이브러리를 사용하면 몇 번이고 비용을 절약할 수 있습니다.
대부분의 오픈 소스 데이터 테이블 라이브러리는 아직 현재 출시된 Vue 3 버전을 지원하도록 업데이트되지 않았습니다.
하지만 Wijmo는 이미 Vue 3을 지원합니다!
지금 바로 Wijmo를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.
