Table Generator

Interactive web application for creating, editing, and managing tables with adaptive grid and drag-and-drop functionality.

🚀 Features

• Table Creation: Dynamic creation of tables with configurable columns
• Cell Editing: Real-time editing of cell content
• Adaptive Grid: Automatic table placement in adaptive grid
• Table Copying: Quick copying of existing tables
• Drag & Drop: Drag tables to change their position
• Responsive Design: Adaptation to various screen sizes

🛠 Technologies

• Frontend: React 18 + TypeScript
• State Management: Redux Toolkit + React-Redux
• Build Tool: Vite
• Testing: Vitest + React Testing Library
• Styling: CSS Modules
• Code Quality: ESLint + Prettier

📋 Requirements

• Node.js 18+
• npm 9+ or yarn 1.22+

🚀 Quick Start

📖 Need help? Check out our comprehensive User Guide for detailed instructions and troubleshooting.

Install Dependencies

npm install

Development Mode

npm run dev

The application will be available at http://localhost:5173

Production Build

npm run build

Run Tests

npm test

Run Tests in Watch Mode

npm run test:watch

Lint Check

npm run lint

Code Formatting

npm run format

📁 Project Structure

🏗 Want to understand the architecture? See Architecture Guide for detailed design principles and system overview.

src/
├── components/          # React components
│   ├── CreateTableForm/ # Table creation form
│   ├── EditableCell/   # Editable cells
│   ├── TableComponent/ # Main table component
│   ├── TableGenerator/ # Application container
│   └── TablesGrid/     # Grid for table placement
├── store/              # Redux store and slices
│   ├── slices/         # Redux slices
│   └── index.ts        # Store configuration
├── types/              # TypeScript types and interfaces
├── utils/              # Utilities and helpers
└── test/               # Test utilities

🎯 Main Components

🔧 Developer? See API Documentation for detailed component props, events, and usage examples.

CreateTableForm

Form for creating new tables with capabilities:

• Table name configuration
• Adding/removing columns
• Column data type selection (text, number, select)

TableComponent

Main component for displaying tables:

• Column headers
• Editable cells
• Copy button
• Drag & Drop functionality

TablesGrid

Adaptive grid for table placement:

• Automatic positioning
• Responsive layout
• Support for various screen sizes

🔄 Redux Store

Tables Slice

Manages table state:

• addTable - adding new table
• copyTable - copying existing table
• updateCell - updating cell content
• updateTablePosition - updating table position

UI Slice

Manages UI state:

• toggleForm - show/hide creation form
• selectTable - select active table

🎨 Styling

The project uses CSS Modules for style isolation. Main styles:

• Adaptive grid with CSS Grid
• Responsive design for mobile devices
• Hover effects and interactive states
• Modern and clean design

🧪 Testing

The project is covered with comprehensive tests:

• Unit tests for Redux slices
• Component tests for React components
• Integration tests for user workflows
• Tests for drag & drop functionality

Running Tests

# All tests
npm test

# Tests in watch mode
npm run test:watch

# Tests with coverage
npm run test:coverage

📱 Responsive Design

The application adapts to various screen sizes:

• Desktop: Full-featured interface with drag & drop
• Tablet: Adapted grid with touch-friendly elements
• Mobile: Vertical table arrangement

🔧 Configuration

ESLint

Configured for TypeScript and React with rules for:

• TypeScript best practices
• React hooks rules
• Accessibility guidelines

Vite

Optimized for fast development:

• Hot Module Replacement
• TypeScript support
• Build optimization

🚀 Deployment

🚀 Ready to deploy? See Deployment Guide for comprehensive instructions on all platforms including Docker, AWS, and CI/CD setup.

Netlify

npm run build
# Upload dist/ content to Netlify

Vercel

npm run build
# Connect repository to Vercel

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

🤝 Contributing

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

📄 License

This project is distributed under the MIT License. See the LICENSE file for details.

🆘 Support

If you have questions or issues:

1. Check Issues on GitHub
2. Create a new issue with problem description
3. Describe steps to reproduce

🔮 Roadmap

• Export tables to various formats (CSV, Excel)
• Import data from files
• Table templates
• Real-time collaboration
• Advanced data types (date, images)
• Dark theme
• Localization (i18n)

📚 Documentation

📋 Documentation Index: Start here with our complete documentation index to find what you need quickly.

User Documentation

• User Guide - Complete user manual with step-by-step instructions
• API Documentation - Technical reference for developers and component APIs

Developer Documentation

• Architecture Guide - Project architecture overview and design principles
• Deployment Guide - Comprehensive deployment instructions for various platforms

Quick Links

• Getting Started: See Quick Start section above
• Component Reference: See Main Components section
• Redux Store: See Redux Store section
• Testing: See Testing section

📚 Additional Resources

Official Documentation

• React Documentation - Official React documentation and tutorials
• Redux Toolkit Documentation - Official Redux Toolkit guide
• TypeScript Handbook - TypeScript language reference
• Vite Documentation - Build tool documentation and configuration

Community Resources

• React Community - React community support and resources
• Redux Community - Redux community and discussions
• TypeScript Community - TypeScript community resources

Learning Resources

• React Tutorial - Interactive React learning tutorial
• Redux Fundamentals - Redux core concepts
• TypeScript Tutorial - TypeScript learning guide

Tools and Extensions

• React Developer Tools - Chrome extension for React debugging
• Redux DevTools - Chrome extension for Redux debugging
• VS Code Extensions - Recommended VS Code extensions for React/TypeScript development