Skip to content

README_EN.md

Latest commit

 

History

History
204 lines (144 loc) · 6.53 KB

README_EN.md

File metadata and controls

204 lines (144 loc) · 6.53 KB

📊 pxcharts - Open Source Multi-dimensional Table

A powerful and beautifully designed open-source multi-dimensional table task management system

License Next.js React TypeScript PRs Welcome

✨ Features

  • 🎯 Multiple Views - Table view, Kanban view, Assignment view for different scenarios
  • 🎨 Beautiful UI Design - Based on shadcn/ui + Tailwind CSS, clean and modern interface
  • 🔄 Drag & Drop - Support task drag & drop sorting, column reordering, flexible customization
  • 📊 Data Statistics - Built-in task statistics dashboard with data visualization
  • 🔍 Advanced Filtering - Multi-condition filtering, sorting, grouping for quick data location
  • 💾 Import/Export - Support JSON format data import and export
  • 🎭 Custom Fields - Add custom fields to flexibly extend data structure
  • 📱 Responsive Design - Perfect adaptation for desktop and mobile
  • 🌈 Theme Customization - Support light/dark theme switching
  • ⚡ Performance Optimized - Based on Next.js 15 + React 19, excellent performance

🎬 Live Demo

🌐 Live Demo

📸 Screenshots

Table View

Powerful table management with drag & drop sorting, inline editing, custom fields, and more

Kanban View

Intuitive kanban display with task status drag & drop switching

Statistics Dashboard

Data visualization for clear task progress overview

🚀 Quick Start

Requirements

  • Node.js 18.17 or higher
  • pnpm 8.0 or higher (recommended)

Installation

# Clone the repository
git clone https://github.com/MrXujiang/pxcharts.git

# Navigate to project directory
cd pxcharts

# Install dependencies
pnpm install

# Start development server
pnpm dev

Visit http://localhost:3000 to view the application

Build for Production

# Build
pnpm build

# Start production server
pnpm start

📦 Tech Stack

📖 Documentation

📚 Core Features

1. Multi-dimensional Table Management

  • ✅ Task CRUD operations
  • ✅ Drag & drop sorting
  • ✅ Inline editing
  • ✅ Batch operations
  • ✅ Custom fields
  • ✅ Column width adjustment
  • ✅ Column order adjustment

2. View System

  • ✅ Table view
  • ✅ Kanban view
  • ✅ Assignment view
  • ✅ Statistics dashboard

3. Data Operations

  • ✅ Advanced filtering
  • ✅ Multi-level sorting
  • ✅ Grouped display
  • ✅ Data import
  • ✅ Data export

4. User Experience

  • ✅ Search functionality
  • ✅ Responsive layout
  • ✅ Theme switching
  • ✅ Quick actions
  • ✅ Feedback notifications

🗂️ Project Structure

pxcharts/
├── app/                    # Next.js app directory
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page
│   └── globals.css        # Global styles
├── components/            # Components directory
│   ├── ui/               # UI base components
│   ├── views/            # View components
│   ├── charts/           # Chart components
│   └── ...               # Business components
├── lib/                   # Utilities
│   ├── types.ts          # Type definitions
│   ├── task-store.ts     # State management
│   └── utils.ts          # Utility functions
├── hooks/                 # Custom hooks
├── public/                # Static assets
└── styles/                # Style files

🤝 Contributing

We welcome all forms of contributions!

  1. Fork this repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

This project is licensed under the GPL-3.0 license

⚠️ Important Notice: This project is for personal learning reference only. For commercial use, please contact the author for authorization

👨‍💻 Author

Xu Xiaoxi (MrXujiang)

🌟 Star History

If this project helps you, please give us a ⭐️ Star!

📮 Contact Us

🔗 Related Projects

💝 Sponsorship

If this project helps you, you can buy the author a coffee ☕️

Made with ❤️ by Xu Xiaoxi