Skip to content

Commit 31da7c3

Browse files
0xrinegade0xrinegade
authored
Merge pull request #2 from 0xrinegade/copilot/fix-1
Improve English documentation with comprehensive examples and GitHub Pages support
2 parents a946af6 + a8ad6b7 commit 31da7c3

20 files changed

Lines changed: 16100 additions & 0 deletions

‎README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,24 @@ const option = {
132132
const tableInstance = new VTable.ListTable(option);
133133
```
134134

135+
## 📚 English Documentation & Examples
136+
137+
For comprehensive English documentation with live examples, check out our new dedicated English demo section:
138+
139+
**🎯 [English Demo & Examples](./english-demo/index.html)** - Complete interactive examples covering:
140+
- Basic table setup and configuration
141+
- Color themes and custom styling
142+
- Interactive behavior (sorting, filtering, selection)
143+
- Advanced features (progress bars, pivot tables, charts)
144+
- Performance optimization for large datasets
145+
- Event handling and customization guides
146+
147+
### Quick Links:
148+
- **[Main Demo Page](./english-demo/index.html)** - All examples in one comprehensive page
149+
- **[Color Themes Example](./english-demo/examples/color-themes.html)** - Advanced styling and theming
150+
- **[Interactive Behavior](./english-demo/examples/interactive-behavior.html)** - User interaction features
151+
- **[Performance & Advanced Features](./english-demo/examples/performance-advanced.html)** - Large datasets and complex features
152+
135153
##
136154

137155
[More demos and detailed tutorials](https://visactor.io/vtable)

‎docs/en/README.md‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
# VTable English Documentation
2+
3+
Welcome to the comprehensive English documentation for VTable - a high-performance multidimensional data analysis table and grid artist.
4+
5+
## 🚀 Quick Start Guide
6+
7+
### Installation
8+
9+
```bash
10+
# Using npm
11+
npm install @visactor/vtable
12+
13+
# Using yarn
14+
yarn add @visactor/vtable
15+
16+
# Using pnpm
17+
pnpm add @visactor/vtable
18+
```
19+
20+
### Basic Usage
21+
22+
```javascript
23+
import * as VTable from '@visactor/vtable';
24+
25+
const columns = [
26+
{ field: 'id', caption: 'ID', width: 100 },
27+
{ field: 'name', caption: 'Name', width: 150 },
28+
{ field: 'email', caption: 'Email', width: 200 },
29+
{ field: 'status', caption: 'Status', width: 120 }
30+
];
31+
32+
const data = [
33+
{ id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
34+
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' }
35+
];
36+
37+
const table = new VTable.ListTable({
38+
container: document.getElementById('tableContainer'),
39+
columns: columns,
40+
records: data
41+
});
42+
```
43+
44+
## 📖 Documentation Structure
45+
46+
### Core Concepts
47+
- **[Getting Started](getting-started.md)** - Installation, setup, and your first table
48+
- **[Table Types](core/table-types.md)** - ListTable, PivotTable, and PivotChart
49+
- **[Data Handling](core/data-handling.md)** - Data binding, validation, and manipulation
50+
51+
### Advanced Topics
52+
- **[Performance Optimization](advanced/performance-optimization.md)** - Virtual scrolling, memory management, and large dataset handling
53+
- **[Custom Styling & Themes](advanced/styling-themes.md)** - Advanced theming, custom renderers, and styling techniques
54+
- **[Event System](advanced/event-system.md)** - Comprehensive event handling and custom interactions
55+
56+
### Framework Integrations
57+
- **[React Integration](integrations/react-integration.md)** - Complete React patterns, hooks, and best practices
58+
- **[Vue Integration](integrations/vue-integration.md)** - Vue 2/3 setup, Composition API, and Vuex integration
59+
- **[Angular Integration](integrations/angular-integration.md)** - Angular services, components, and TypeScript patterns
60+
61+
### Troubleshooting & Support
62+
- **[Debugging Guide](troubleshooting/debugging-guide.md)** - Common issues, debugging techniques, and solutions
63+
- **[Migration Guide](troubleshooting/migration-guide.md)** - Upgrading between versions
64+
- **[FAQ](faq.md)** - Frequently asked questions and solutions
65+
66+
### Examples & Use Cases
67+
- **[Basic Examples](examples/basic-examples.md)** - Simple table configurations and common patterns
68+
- **[Enterprise Examples](examples/enterprise-examples.md)** - Complex business scenarios and advanced implementations
69+
- **[Interactive Demos](examples/interactive-demos.md)** - Live examples with full source code
70+
71+
## 🎯 Quick Navigation
72+
73+
| Topic | Description | Difficulty |
74+
|-------|-------------|------------|
75+
| [Getting Started](getting-started.md) | Basic setup and first table | Beginner |
76+
| [ListTable Basics](core/table-types.md#listtable) | Standard data tables | Beginner |
77+
| [PivotTable Guide](core/table-types.md#pivottable) | Multidimensional analysis | Intermediate |
78+
| [Performance Tips](advanced/performance-optimization.md) | Large dataset handling | Advanced |
79+
| [React Patterns](integrations/react-integration.md) | React-specific implementations | Intermediate |
80+
| [Custom Themes](advanced/styling-themes.md) | Styling and branding | Intermediate |
81+
| [Debugging Help](troubleshooting/debugging-guide.md) | Problem solving | All Levels |
82+
83+
## 🔧 API Reference
84+
85+
For complete API documentation, see:
86+
- **[Complete API Reference](../llms.txt)** - Comprehensive API documentation for language models
87+
- **[TypeScript Definitions](https://github.com/VisActor/VTable/tree/main/packages/vtable/types)** - Full TypeScript type definitions
88+
89+
## 🌟 Features Highlight
90+
91+
- **High Performance**: Handle millions of rows with virtual scrolling
92+
- **Rich Interactions**: Sorting, filtering, editing, and selection
93+
- **Flexible Styling**: Themes, custom renderers, and responsive design
94+
- **Framework Ready**: React, Vue, Angular, and vanilla JavaScript support
95+
- **Enterprise Features**: Export, import, validation, and accessibility
96+
- **Extensible**: Plugin architecture and custom components
97+
98+
## 💡 Examples Gallery
99+
100+
Check out our interactive examples:
101+
- [Basic Data Table](../english-demo/index.html) - Simple employee data table
102+
- [Financial Dashboard](../english-demo/examples/financial-dashboard.html) - Real-time financial data
103+
- [E-commerce Catalog](../english-demo/examples/ecommerce-catalog.html) - Product management interface
104+
- [Project Management](../english-demo/examples/project-management.html) - Task tracking and progress
105+
106+
## 🚀 Getting Help
107+
108+
- **[GitHub Issues](https://github.com/VisActor/VTable/issues)** - Bug reports and feature requests
109+
- **[Discussions](https://github.com/VisActor/VTable/discussions)** - Community help and questions
110+
- **[Examples](https://github.com/VisActor/VTable/tree/main/packages/vtable/examples)** - Official code examples
111+
- **[VisActor Website](https://www.visactor.io/vtable)** - Official documentation and guides
112+
113+
## 📊 Supported Table Types
114+
115+
### ListTable
116+
Perfect for displaying flat, tabular data with advanced features like sorting, filtering, and editing.
117+
118+
### PivotTable
119+
Ideal for multidimensional data analysis with hierarchical grouping and aggregations.
120+
121+
### PivotChart
122+
Combines the power of PivotTable with integrated chart visualizations for comprehensive data insights.
123+
124+
---
125+
126+
*This documentation is continuously updated. For the latest information, visit our [GitHub repository](https://github.com/VisActor/VTable).*
127+
128+
const data = [
129+
{ id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
130+
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' }
131+
];
132+
133+
const table = new VTable.ListTable({
134+
container: document.getElementById('tableContainer'),
135+
columns: columns,
136+
records: data
137+
});
138+
```
139+
140+
## 📚 Documentation Structure
141+
142+
### Core Concepts
143+
- [Table Types](./core/table-types.md) - ListTable, PivotTable, PivotChart
144+
- [Data Handling](./core/data-handling.md) - Data sources, records, and processing
145+
- [Column Configuration](./core/columns.md) - Column types, styling, and behavior
146+
- [Styling & Themes](./core/styling.md) - Themes, custom styles, and visual design
147+
148+
### Advanced Features
149+
- [Performance Optimization](./advanced/performance.md) - Large datasets, virtualization
150+
- [Interactive Features](./advanced/interactions.md) - Sorting, filtering, editing
151+
- [Custom Rendering](./advanced/custom-rendering.md) - Custom cells, layouts, graphics
152+
- [Event Handling](./advanced/events.md) - User interactions and callbacks
153+
154+
### Integration Guides
155+
- [React Integration](./integration/react.md) - Using VTable with React
156+
- [Vue Integration](./integration/vue.md) - Using VTable with Vue.js
157+
- [Angular Integration](./integration/angular.md) - Using VTable with Angular
158+
159+
### API Reference
160+
- [ListTable API](./api/list-table.md) - Complete ListTable reference
161+
- [PivotTable API](./api/pivot-table.md) - Complete PivotTable reference
162+
- [PivotChart API](./api/pivot-chart.md) - Complete PivotChart reference
163+
- [Types & Interfaces](./api/types.md) - TypeScript definitions
164+
165+
### Examples & Tutorials
166+
- [Basic Examples](./examples/basic.md) - Simple table setups
167+
- [Advanced Examples](./examples/advanced.md) - Complex configurations
168+
- [Real-world Use Cases](./examples/use-cases.md) - Practical applications
169+
- [Performance Demos](./examples/performance.md) - Large dataset examples
170+
171+
## 🎯 Key Features
172+
173+
### High Performance
174+
- **Virtual Scrolling**: Handle millions of rows smoothly
175+
- **Optimized Rendering**: Canvas-based rendering for speed
176+
- **Memory Efficient**: Smart data loading and caching
177+
178+
### Rich Visualization
179+
- **Multiple Table Types**: List, Pivot, and Chart tables
180+
- **Custom Themes**: Built-in and custom styling options
181+
- **Interactive Elements**: Progress bars, charts, custom graphics
182+
183+
### Developer Experience
184+
- **TypeScript Support**: Full type definitions included
185+
- **Framework Integration**: React, Vue, Angular components
186+
- **Extensive API**: Comprehensive configuration options
187+
188+
### Data Features
189+
- **Multiple Data Sources**: Arrays, objects, APIs, databases
190+
- **Real-time Updates**: Live data synchronization
191+
- **Data Processing**: Aggregation, filtering, sorting
192+
193+
## 🛠️ Getting Help
194+
195+
- **Interactive Examples**: See [english-demo](../../english-demo/index.html)
196+
- **API Documentation**: Browse the [API reference](./api/)
197+
- **GitHub Issues**: Report bugs and request features
198+
- **Community**: Join discussions and get support
199+
200+
## 🔗 Quick Links
201+
202+
- [Getting Started Guide](./getting-started.md)
203+
- [API Reference](./api/)
204+
- [Examples Collection](./examples/)
205+
- [Migration Guide](./migration.md)
206+
- [FAQ](./faq.md)

0 commit comments

Comments
 (0)