@bizan/grid

High-performance Vue3 data grid component

Features

• 🚀 Extreme Performance: Handle 1 million rows × 70 columns smoothly with virtual scrolling
• 📊 Rich Features: Sorting, filtering, grouping, editing, master-detail, and more
• 🎯 Row Models: ClientSide, ServerSide, Infinite, and Viewport models
• 🔧 Flexible: Extensive API and customization options
• 📦 Small Bundle: < 200KB (gzipped)
• 🎨 Themeable: Built-in themes and custom theme support
• 🌐 i18n: Internationalization support (Chinese & English)
• ♿ Accessible: Full keyboard navigation and screen reader support
• 🧩 Plugin System: Extensible architecture
• 📈 Performance Monitoring: Built-in performance tracking

Installation

# Using pnpm
pnpm add @bizan/grid vue

# Using npm
npm install @bizan/grid vue

# Using yarn
yarn add @bizan/grid vue

Quick Start

<template>
  <BiZanGrid
    :row-data="rowData"
    :column-defs="columnDefs"
    :grid-options="gridOptions"
    @grid-ready="onGridReady"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BiZanGrid } from '@bizan/grid';
import type { GridApi, ColumnDef, GridOptions } from '@bizan/grid';
import '@bizan/grid/style.css';

const gridApi = ref<GridApi>();

const rowData = ref([
  { id: 1, name: 'John Doe', age: 30, email: '[email protected]' },
  { id: 2, name: 'Jane Smith', age: 25, email: '[email protected]' },
  { id: 3, name: 'Bob Johnson', age: 35, email: '[email protected]' },
]);

const columnDefs = ref<ColumnDef[]>([
  { field: 'id', headerName: 'ID', width: 80 },
  { field: 'name', headerName: 'Name', width: 150, sortable: true, filter: true },
  { field: 'age', headerName: 'Age', width: 100, sortable: true, filter: 'number' },
  { field: 'email', headerName: 'Email', width: 200, filter: 'text' },
]);

const gridOptions = ref<GridOptions>({
  rowSelection: 'multiple',
  enableRangeSelection: true,
  enableFillHandle: true,
  pagination: true,
  paginationPageSize: 20,
});

function onGridReady(api: GridApi) {
  gridApi.value = api;
}
</script>

Core Features

Virtual Scrolling

Efficiently render millions of rows with smooth 60 FPS scrolling.

Row Models

• ClientSide: All data loaded in browser
• ServerSide: Lazy loading with server-side operations
• Infinite: Infinite scrolling with block loading
• Viewport: Only visible rows loaded

Editing

• Cell editing with validation
• Row editing mode
• Undo/Redo support (50 steps)
• Custom editors

Selection

• Single/Multiple row selection
• Range selection (Excel-like)
• Fill handle with smart fill
• Copy/Paste support

Filtering

• Text, Number, Date, Set filters
• Custom filter components
• Multi-condition filtering
• Server-side filtering

Grouping

• Multi-level grouping (up to 5 levels)
• Aggregation functions (sum, avg, min, max, count)
• Custom aggregation functions
• Expand/Collapse groups

Export

• Excel export with styles
• CSV export
• JSON export
• Custom export formats

Themes

• Light theme (default)
• Dark theme
• Material theme
• Custom themes with CSS variables

Internationalization

• Built-in Chinese and English
• Custom language packs
• RTL support

Accessibility

• Full keyboard navigation
• ARIA labels
• Screen reader support
• High contrast mode

API Reference

Grid API

interface GridApi {
  // Data operations
  setRowData(data: RowData[]): void;
  getRowData(): RowData[];
  updateRowData(updates: RowDataUpdate[]): void;
  
  // Selection
  getSelectedRows(): RowData[];
  selectAll(): void;
  deselectAll(): void;
  
  // Filtering
  setFilterModel(model: FilterModel): void;
  getFilterModel(): FilterModel;
  
  // Sorting
  setSortModel(model: SortModel): void;
  getSortModel(): SortModel;
  
  // Export
  exportToExcel(options?: ExportOptions): void;
  exportToCsv(options?: ExportOptions): void;
  
  // And more...
}

See full API documentation for details.

Examples

Check out the examples directory for more usage examples:

• Basic Example - Simple grid setup
• Big Data Example - 1M rows performance demo
• Server Side Example - Server-side row model
• Editing Example - Cell and row editing
• Grouping Example - Multi-level grouping

Documentation

• Installation Guide
• Getting Started
• Performance Guide
• Theming Guide
• Plugin Development
• Best Practices
• FAQ

Performance

BiZanGrid is designed for extreme performance:

• Initial Render: < 3s for 1M rows × 70 columns
• Scroll FPS: ≥ 60 FPS
• Memory Usage: < 500MB for 1M rows
• Bundle Size: 6.17 KB (gzipped)

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

TypeScript

BiZanGrid is written in TypeScript and provides full type definitions.

import type { 
  GridApi, 
  ColumnDef, 
  GridOptions,
  RowData,
  FilterModel,
  SortModel 
} from '@bizan/grid';

License

MIT © BiZan Team

Contributing

See the Contributing Guide for details.

Support

• Documentation
• GitHub Issues
• Discussions