h2-advanced-grid

v1.0.1

Published

5 months ago

Framework-agnostic modern data grid library with enterprise-grade features

0High
0Medium
0Low

hyeonho92

react vue table grid datagrid typescript enterprise framework-agnostic

🚀 H2 Advanced Grid

현대적인 웹 애플리케이션을 위한 엔터프라이즈급 데이터 그리드 라이브러리

React, Vue, 또는 Vanilla JS 애플리케이션에 Excel과 같은 기능을 제공하는 강력하고 프레임워크에 독립적인 데이터 그리드 컴포넌트입니다. TypeScript로 구축되었으며 성능, 접근성, 그리고 개발자 경험을 위해 설계되었습니다.

✨ 주요 기능

🎯 핵심 기능

📊 데이터 관리 - 가상 스크롤링으로 수천 개의 행 처리
🔄 실시간 편집 - 유효성 검사 및 자동 저장을 포함한 인라인 편집
🎨 유연한 스타일링 - 완전히 커스터마이징 가능한 테마 및 셀 렌더러
📱 반응형 디자인 - 터치 지원을 포함한 모바일 우선 접근 방식

⚡ 성능 & 사용자 경험

🚄 가상 스크롤링 - 대용량 데이터셋에서도 부드러운 성능
⌨️ 키보드 내비게이션 - 완전한 키보드 지원 (방향키, Tab, Enter, Esc)
📋 복사 & 붙여넣기 - Excel과 같은 복사/붙여넣기 기능
🎯 스마트 선택 - 단일 셀, 범위, 및 다중 선택

🔧 고급 기능

🔍 정렬 & 필터링 - 커스텀 필터를 포함한 다중 컬럼 정렬
📄 페이지네이션 - 클라이언트 및 서버 사이드 페이지네이션
📊 데이터 유효성 검사 - 커스텀 룰을 포함한 실시간 유효성 검사
💾 상태 관리 - 내장 실행 취소/다시 실행 및 변경 추적
🌐 서버 통합 - 완전한 서버 사이드 데이터 지원

🎛️ 커스터마이징

🎨 설정 가능한 UI - 체크박스, 컨트롤, 액션 표시/숨김
📋 프리셋 구성 - 바로 사용 가능한 그리드 프리셋
🎯 프레임워크 독립적 - React, Vue, 또는 Vanilla JS와 함께 작동
♿ 접근성 - 스크린 리더 완전 지원을 포함한 WCAG 준수

📦 설치

# npm 사용
npm install h2-advanced-grid

# yarn 사용
yarn add h2-advanced-grid

# pnpm 사용
pnpm add h2-advanced-grid

🚀 빠른 시작

React

import { AdvancedGrid } from 'h2-advanced-grid/react';
import 'h2-advanced-grid/styles';

const data = [
  { id: 1, name: '홍길동', email: '[email protected]', age: 30 },
  { id: 2, name: '김영희', email: '[email protected]', age: 25 },
];

const columns = [
  { id: 'name', header: '이름', accessorKey: 'name', type: 'text' },
  { id: 'email', header: '이메일', accessorKey: 'email', type: 'email' },
  { id: 'age', header: '나이', accessorKey: 'age', type: 'number' },
];

function App() {
  return (
    <AdvancedGrid
      data={data}
      columns={columns}
      features={{
        editing: { enabled: true },
        selection: { showCheckboxes: true },
        pagination: { enabled: true, pageSize: 10 }
      }}
    />
  );
}

Vue

<template>
  <AdvancedGrid
    :data="data"
    :columns="columns"
    :features="features"
  />
</template>

<script setup>
import { AdvancedGrid } from 'h2-advanced-grid/vue';
import 'h2-advanced-grid/styles';

const data = [
  { id: 1, name: '홍길동', email: '[email protected]', age: 30 },
  { id: 2, name: '김영희', email: '[email protected]', age: 25 },
];

const columns = [
  { id: 'name', header: '이름', accessorKey: 'name', type: 'text' },
  { id: 'email', header: '이메일', accessorKey: 'email', type: 'email' },
  { id: 'age', header: '나이', accessorKey: 'age', type: 'number' },
];

const features = {
  editing: { enabled: true },
  selection: { showCheckboxes: true },
  pagination: { enabled: true, pageSize: 10 }
};
</script>

Vanilla JS

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/h2-advanced-grid/dist/styles.css">
</head>
<body>
  <div id="grid-container"></div>
  
  <script type="module">
    import { createGrid } from 'h2-advanced-grid/vanilla';
    
    const data = [
      { id: 1, name: '홍길동', email: '[email protected]', age: 30 },
      { id: 2, name: '김영희', email: '[email protected]', age: 25 },
    ];
    
    const columns = [
      { id: 'name', header: '이름', accessorKey: 'name', type: 'text' },
      { id: 'email', header: '이메일', accessorKey: 'email', type: 'email' },
      { id: 'age', header: '나이', accessorKey: 'age', type: 'number' },
    ];
    
    createGrid('#grid-container', {
      data,
      columns,
      features: {
        editing: { enabled: true },
        selection: { showCheckboxes: true }
      }
    });
  </script>
</body>
</html>

🎛️ 설정 옵션

프리셋 사용

import { GRID_PRESETS } from 'h2-advanced-grid';

// 기본 그리드
<AdvancedGrid features={GRID_PRESETS.default} />

// 읽기 전용 그리드
<AdvancedGrid features={GRID_PRESETS.readOnly} />

// 심플 그리드 (최소 기능)
<AdvancedGrid features={GRID_PRESETS.simple} />

// 데이터 입력용 그리드
<AdvancedGrid features={GRID_PRESETS.dataEntry} />

// 모바일 친화적 그리드
<AdvancedGrid features={GRID_PRESETS.mobile} />

커스텀 설정

<AdvancedGrid
  data={data}
  columns={columns}
  features={{
    // 선택 기능
    selection: {
      enabled: true,
      showCheckboxes: false,    // 체크박스 숨김
      headerCheckbox: false,    // 헤더 체크박스 숨김
      multiple: true,           // 다중 선택 허용
    },
    
    // 편집 기능
    editing: {
      enabled: true,
      singleClickEdit: false,   // 더블클릭으로 편집
      autoSave: true,           // 자동 저장
    },
    
    // 시각적 요소
    visual: {
      showControls: true,       // 컨트롤 바 표시
      showActions: false,       // 액션 컬럼 숨김
      showHeader: true,         // 헤더 표시
      compactMode: false,       // 컴팩트 모드
    },
    
    // 상호작용
    interaction: {
      cellSelection: true,      // 셀 선택
      rangeSelection: true,     // 범위 선택
      copyPaste: true,          // 복사/붙여넣기
      dragSelection: true,      // 드래그 선택
    }
  }}
/>

📋 주요 사용 사례

📊 데이터 관리 시스템

// 사용자 관리, 재고 관리, 주문 관리 등
<AdvancedGrid 
  features={GRID_PRESETS.default}
  onCellEdit={handleDataUpdate}
  onSelectionChange={handleBulkActions}
/>

📝 데이터 입력 폼

// 대량 데이터 입력, 스프레드시트 대체
<AdvancedGrid 
  features={GRID_PRESETS.dataEntry}
  validation={{ required: true, email: true }}
/>

📈 데이터 분석 대시보드

// 보고서, 분석 도구, 읽기 전용 테이블
<AdvancedGrid 
  features={GRID_PRESETS.analytics}
  sorting={{ multiple: true }}
  filtering={{ globalSearch: true }}
/>

🎯 키보드 단축키

| 키 | 동작 | |---|---| | ↑↓←→ | 셀 이동 | | Enter / F2 | 편집 시작 | | Esc | 편집 취소 | | Tab / Shift+Tab | 다음/이전 셀 | | Ctrl+C | 복사 | | Ctrl+V | 붙여넣기 | | Ctrl+Z | 실행 취소 | | Delete | 셀 내용 삭제 |

🎨 스타일링

/* CSS 변수로 쉬운 커스터마이징 */
:root {
  --grid-border-color: #e2e8f0;
  --grid-header-bg: #f8fafc;
  --grid-selected-bg: #3b82f6;
  --grid-font-size: 14px;
}

/* 다크 테마 지원 */
[data-theme="dark"] {
  --grid-border-color: #374151;
  --grid-header-bg: #1f2937;
}

🔧 고급 사용법

서버 사이드 데이터

<AdvancedGrid
  serverSide={{
    enabled: true,
    onDataLoad: async (request) => {
      const response = await fetch('/api/data', {
        method: 'POST',
        body: JSON.stringify(request)
      });
      return response.json();
    }
  }}
/>

커스텀 셀 렌더러

const columns = [
  {
    id: 'status',
    header: '상태',
    accessorKey: 'status',
    cell: (value) => (
      <span className={`status-${value}`}>
        {value === 'active' ? '활성' : '비활성'}
      </span>
    )
  }
];

📚 더 많은 정보

📖 API 문서 - 완전한 API 레퍼런스
🎯 예제 - React, Vue, Vanilla JS 예제
🐛 이슈 리포트 - 버그 신고 및 기능 요청
💬 토론 - 커뮤니티 질문 및 토론

🤝 기여하기

기여를 환영합니다! CONTRIBUTING.md를 확인해주세요.

📄 라이선스

MIT © amenooto

⭐ 이 프로젝트가 도움이 되었다면 별표를 눌러주세요!

GitHub • NPM • 문서