Vue] vue.js 데이터 시각화 라이브러리 for 리포트

1. Bryntum(브린텀)  

• vue 2, 3
• 대표 사이트: https://bryntum.com/
• 데모 : https://www.bryntum.com/products/grid/examples/columntypes/
• 기능:  열별로 데이터 그룹화, 특정 값(날짜 등)으로 필터링, 그룹 내 정렬, 그룹 요약, 등 기본기능
• 가격 : https://bryntum.com/store/

High Performance Web Components For Project Management

 

2. AG Grid

• vue 2, 3
• 대표 사이트: https://www.ag-grid.com/
• 데모 :https://www.ag-grid.com/example
• 기능: 언어지원, 열 필터링(순위), 행 그룹화, 월별집계, 엑셀 내보내기, 등
• 가격 : https://www.ag-grid.com/license-pricing

Data Grid: AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid

 

3. Flex Monster

• 대표 사이트: https://www.flexmonster.com/
• 데모 : https://www.flexmonster.com/demos/js/pivot-table/
• 기능: 집계함수 지원, 필터링, 그룹화, 조건부 수식, 내보내기, 등
• 가격 : https://www.flexmonster.com/pivot-table-editions-and-pricing/

JavaScript Pivot Table & Charts Component • Flexmonster Pivot Grid

 

4. Kendo

• vue 2, 3
• 대표 사이트: https://www.telerik.com/kendo-vue-ui
• 데모 : https://www.telerik.com/kendo-vue-ui/components/
• 기능:  편집, 정렬, 그룹화, 필터링, 내보내기 등
• 가격 : https://www.telerik.com/purchase/kendo-ui

Kendo UI for Vue

 

5. DevExtream

• 대표 사이트: https://js.devexpress.com/
• 데모 : https://js.devexpress.com/Demos/WidgetsGallery/
• 기능: 그룹화, 필터링, 정렬, 차트 바인딩 가능
• 가격 : https://www.telerik.com/purchase/kendo-ui

DevExtreme - JavaScript UI Components for Angular, React, Vue and jQuery by DevExpress

 

5. Grapecity

• 대표 사이트: https://www.grapecity.co.kr/
• 데모 : https://www.grapecity.co.kr/spreadjs
• 기능: 함수서식지원, 내보내기, 디자이너 컴포넌트, 피벗테이블 지원
• 가격 : https://www.grapecity.co.kr/spreadjs#price

그레이프시티 코리아

 

 

---

무료 라이브러리

 

1. tabulator

• 대표 사이트: https://tabulator.info/
• 데모 : https://tabulator.info/examples/5.4
• 기능: 필터, 정렬, 그룹화, 포맷팅, 편집, CSS 스타일링, 데이터 다운로드 등
• 다운로드 : https://www.npmjs.com/package/tabulator-tables
• 참고: https://vue-tabulator.netlify.app/
• vue3 사용시 충돌: https://zenn.dev/uboar/articles/8cb23ab3a7e1f7

Tabulator - Interactive JavaScript Tables

 

2. vuetable-2

• vue 2, 3
• 대표 사이트: https://ratiw.github.io/vuetable-2/#/
• 다운로드 : https://www.npmjs.com/package/vuetable-2

Document