WZ-Grid

Vue 2 & 3를 동시에 지원하는 엔터프라이즈급 고성능 데이터 그리드 컴포넌트

주요 기능

| 기능 | 설명 | | ----------------- | --------------------------------------------- | | ⚡ 가상 스크롤 | 수십만 행도 버벅임 없이 렌더링 | | 📋 Excel 연동 | Ctrl+C/V로 Excel과 데이터 완벽 호환 | | 🔒 실시간 검증 | required, min, max, regex 등 컬럼별 검증 규칙 | | 🎨 10종 컬럼 타입 | text, number, select, date, badge, button 등 | | 🖱️ 드래그 & 드롭 | 컬럼/행 순서를 드래그로 자유롭게 변경 | | 📌 컬럼 고정 | 좌측 컬럼 sticky 고정 | | 🔍 정렬 & 필터 | 다중 정렬 (Shift+클릭), 컬럼별 실시간 필터 | | 📄 페이징 | 내장 페이지네이션 UI | | 🖨️ 인쇄 & CSV | 브라우저 인쇄 최적화, CSV 내보내기 | | 🔧 Vue 2 & 3 | vue-demi 기반, 두 버전 동시 지원 |

설치

npm install wz-grid

CSS를 반드시 임포트해야 합니다:

// main.ts 또는 main.js
import "wz-grid/dist/wz-grid.css";

빠른 시작

<script setup lang="ts">
import { ref } from "vue";
import { WZGrid } from "wz-grid";
import type { Column } from "wz-grid";

const columns = ref<Column[]>([
  { key: "id", title: "ID", width: 60 },
  { key: "name", title: "이름", width: 150, editable: true },
  {
    key: "dept",
    title: "부서",
    width: 120,
    editable: true,
    type: "select",
    options: [
      { value: "dev", label: "개발팀" },
      { value: "biz", label: "사업팀" },
    ],
  },
  {
    key: "score",
    title: "점수",
    width: 80,
    type: "number",
    align: "right",
    rules: [
      { type: "min", value: 0 },
      { type: "max", value: 100 },
    ],
  },
]);

const rows = ref([
  { id: 1, name: "홍길동", dept: "dev", score: 95 },
  { id: 2, name: "김철수", dept: "biz", score: 80 },
]);

const handleUpdate = ({ row, colKey, value }: any) => {
  const target = rows.value.find((r) => r.id === row.id);
  if (target) (target as any)[colKey] = value;
};
</script>

<template>
  <WZGrid
    :columns="columns"
    :rows="rows"
    :height="500"
    :use-checkbox="true"
    :show-add="true"
    :show-delete="true"
    :use-filter="true"
    @update:cell="handleUpdate"
    @click:add="rows.push({ id: Date.now(), name: '', dept: '', score: 0 })"
  />
</template>

필수 조건: 각 row 객체에는 반드시 고유한 id 필드가 있어야 합니다.

Props

| Prop | 타입 | 기본값 | 설명 | | :------------------- | :--------- | :-----: | :------------------------ | | columns | Column[] | — | (필수) 컬럼 정의 배열 | | rows | any[] | — | (필수) 행 데이터 배열 | | height | number | 500 | 그리드 높이(px) | | rowHeight | number | 40 | 행 높이(px) | | usePaging | boolean | false | 페이징 활성화 | | pageSize | number | 20 | 페이지당 행 수 | | useCheckbox | boolean | false | 체크박스 열 | | showAdd | boolean | false | 툴바 추가 버튼 | | showDelete | boolean | false | 툴바 삭제 버튼 | | useFilter | boolean | false | 컬럼별 필터 행 | | showColumnSettings | boolean | false | 컬럼 표시/숨기기 버튼 | | groupBy | string | '' | 그룹핑 기준 컬럼 key | | useContextMenu | boolean | false | 우클릭 컨텍스트 메뉴 | | useRowDrag | boolean | false | 행 드래그 재배치 | | autoMergeCols | string[] | [] | 자동 셀 병합 컬럼 목록 |

Events

| 이벤트 | 페이로드 | 설명 | | :----------------- | :------------------------------- | :------------- | | @update:cell | { rowIdx, row, colKey, value } | 셀 값 변경 | | @sort | SortConfig[] | 정렬 변경 | | @resize:column | { colIdx, colKey, width } | 컬럼 너비 변경 | | @reorder:columns | { srcKey, targetKey } | 컬럼 순서 변경 | | @reorder:rows | { from, to, position } | 행 순서 변경 | | @click:add | — | 추가 버튼 클릭 | | @click:delete | any[] | 삭제 버튼 클릭 | | @click:button | { rowIdx, row, colKey } | button 셀 클릭 |

라이선스

MIT License — 개인, 상업적 사용 모두 무료입니다.

문의: [email protected]