# ZanGrid

**Repository Path**: bizan/zan-grid

## Basic Information

- **Project Name**: ZanGrid
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-20
- **Last Updated**: 2026-01-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ZanGrid

> 超高性能 Vue 3 表格系统 - 极简架构，极致性能

## 特性

- 🚀 **极致性能** - 虚拟滚动，百万级数据流畅渲染
- 🎨 **Headless 架构** - 完全控制 UI，零封装
- 🧩 **组合式设计** - 每个功能都是独立的 Composable
- 📦 **TypeScript 原生** - 完整的类型支持
- 🎯 **零依赖核心** - 核心逻辑无任何依赖
- ⚡ **智能优化** - 增量更新、Web Worker、智能缓存

## 核心功能

- ✅ 虚拟滚动（百万级数据）
- ✅ 固定行/列
- ✅ 单元格渲染/编辑
- ✅ 行选择、排序、筛选
- ✅ 树形数据、行拖拽
- ✅ 高性能合计行（单次遍历）
- ✅ 分页（客户端/服务端）
- ✅ 数据透视表
- ✅ 图表集成（ECharts）
- ✅ 主题系统
- ✅ 数据导出

## 快速开始

```bash
pnpm install
pnpm dev
```

## 使用示例

```vue
<script setup lang="ts">
import { useZanGrid } from 'zan-grid'

const grid = useZanGrid({
  data: tableData,
  columns: [
    { field: 'name', headerName: '姓名', pinned: 'left' },
    { field: 'age', headerName: '年龄', aggFunc: 'avg' },
    { field: 'salary', headerName: '薪资', aggFunc: 'sum' }
  ],
  rowSelection: 'multiple',
  pagination: true
})
</script>

<template>
  <ZanGrid :grid="grid" />
</template>
```

## 架构

ZanGrid 采用 Headless 架构，核心逻辑与 UI 完全分离：

```
zan-grid/
├── packages/
│   ├── core/          # 核心逻辑（Headless）
│   ├── vue/           # Vue 3 适配器
│   └── theme/         # 主题系统
└── examples/          # 示例项目
```

## 开发

```bash
# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 测试
pnpm test

# 类型检查
pnpm typecheck
```

## License

MIT