Dynamic Data Table Manager

A comprehensive data table application built with Next.js, Redux Toolkit, and Material UI. This project demonstrates advanced frontend development skills including dynamic UIs, state management, and real-world features.

🚀 Features

Core Features

• Dynamic Table View: Display data with customizable columns (Name, Email, Age, Role, Department, Location)
• Sorting: Click column headers to sort data (ASC/DESC toggle)
• Global Search: Search across all fields in real-time
• Pagination: Client-side pagination with configurable rows per page (5, 10, 25, 50)
• Column Management: Add, show/hide, and manage table columns dynamically
• Data Persistence: Column preferences saved in localStorage via Redux Persist

Advanced Features

• Inline Editing: Double-click to edit fields inline with validation
• Row Actions: Edit and delete rows with confirmation dialogs
• Import/Export: CSV import/export functionality with data validation
• Theme Toggle: Light/Dark mode using Material UI theming
• Responsive Design: Fully responsive layout that works on all devices
• Real-time Updates: All changes reflect immediately in the UI

🛠️ Tech Stack

• Frontend: Next.js 14 (App Router)
• State Management: Redux Toolkit with Redux Persist
• UI Framework: Material UI (MUI) v5+
• Language: TypeScript
• Forms: React Hook Form
• CSV Processing: PapaParse
• File Export: FileSaver.js
• Styling: Material UI with responsive breakpoints

📦 Installation

1. Clone the repository:

git clone <repository-url>
cd dynamic-data-table

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

🎯 Usage

Basic Operations

1. View Data: The table displays sample data with 5 default columns
2. Search: Use the search bar to filter data across all fields
3. Sort: Click column headers to sort data ascending/descending
4. Paginate: Use the pagination controls at the bottom

Column Management

1. Click "Manage Columns" to open the column management modal
2. Add Columns: Create new columns with different types (text, number, email, select)
3. Show/Hide: Toggle column visibility with checkboxes
4. Reset: Restore default column configuration

Data Import/Export

1. Click "Import/Export" to open the data management modal
2. Import CSV: Upload CSV files with required fields (Name, Email, Age, Role)
3. Export CSV: Download current table view as CSV (only visible columns)

Inline Editing

1. Click the edit icon on any row to enable inline editing
2. Modify fields directly in the table
3. Save individual changes or use "Save All" for multiple edits
4. Cancel changes with "Cancel" or "Cancel All"

Theme

• Click the theme toggle in the top-right corner to switch between light and dark modes
• Theme preference is automatically saved

📁 Project Structure

src/
├── app/                    # Next.js App Router
│   ├── layout.tsx         # Root layout with providers
│   └── page.tsx           # Main page component
├── components/            # React components
│   ├── DataTable.tsx      # Main data table component
│   ├── ColumnManagementModal.tsx
│   ├── ImportExportModal.tsx
│   ├── DeleteConfirmationDialog.tsx
│   ├── ThemeToggle.tsx
│   └── Providers.tsx      # Redux and theme providers
└── lib/                   # Redux store and utilities
    ├── store.ts           # Redux store configuration
    ├── hooks.ts           # Typed Redux hooks
    └── slices/            # Redux slices
        ├── tableSlice.ts  # Table data management
        ├── columnSlice.ts # Column configuration
        └── themeSlice.ts  # Theme management

🔧 Redux State Structure

Table Slice

• data: Array of table rows
• filteredData: Filtered and sorted data
• searchTerm: Current search query
• sortField & sortDirection: Sorting configuration
• currentPage & rowsPerPage: Pagination state
• editingRows & editingData: Inline editing state

Column Slice

• columns: Array of column definitions
• defaultColumns: Original column configuration
• Column properties: id, label, field, type, visible, order, options, required

Theme Slice

• mode: 'light' | 'dark'

📱 Responsive Design

The application is fully responsive with breakpoints:

• xs: Mobile devices (< 600px)
• sm: Tablets (600px - 960px)
• md: Small desktops (960px - 1280px)
• lg: Large desktops (> 1280px)

Features:

• Responsive table with horizontal scrolling on mobile
• Full-screen modals on mobile devices
• Adaptive button layouts and spacing
• Mobile-optimized touch interactions

🧪 Testing

The application includes sample data for testing all features. You can also use the provided sample-data.csv file in the public folder to test import functionality.

🚀 Deployment

The application can be deployed to any platform that supports Next.js:

1. Vercel (recommended):

npm run build
# Deploy to Vercel

2. Other platforms:

npm run build
npm start

📄 License

This project is created for educational and interview purposes.

🤝 Contributing

This is a demonstration project. Feel free to fork and extend with additional features like:

• Column reordering via drag-and-drop
• Advanced filtering options
• Data validation rules
• Export to different formats (Excel, PDF)
• Real-time data synchronization
• User authentication and permissions