##Demo Vedeo

bandicam.2025-03-14.22-20-21-773.mp4

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Hi, I'm Wajahat! |

---

📌 Project: Configurable JSON-Driven Table UI in React

🚀 Overview

This project is a configurable, JSON-driven table UI built using React and Material React Table v2. It includes debounced filtering, multi-select filtering, and sorting, with optional features like pagination, row selection, and profile images.

🔧 Features

• ✅ Debounced name filtering for improved performance
• ✅ Multi-select role filter (only selected roles are displayed)
• ✅ Sorting functionality for the age column
• ✅ Schema-based JSON configuration for table layout and data
• ✅ Material React Table v2 integration for styling and performance
• ✅ Figma-based design implementation
• 🆕 (Optional) Pagination, row selection, and displaying profile images

---

🏗️ Tech Stack

• Frontend:
• UI Components:
• State Management: React State
• Styling:
• Data Handling: JSON-Driven Configuration

---

📂 Folder Structure

📦 my-app
├── 📂 src
│   ├── 📂 components
│   │   ├── Table.tsx        # Main table component
│   │   ├── Filters.tsx      # Filtering UI components
│   │   ├── TableRow.tsx     # Individual table row component
│   │   └── Pagination.tsx   # Pagination (optional)
│   ├── 📂 config
│   │   ├── tableSchema.json # Table schema JSON
│   │   ├── tableData.json   # Sample table data JSON
│   ├── 📂 styles
│   │   ├── table.css        # Custom table styling (if needed)
│   ├── App.tsx
│   ├── main.tsx
│   ├── index.tsx
│   └── utils.ts             # Utility functions (e.g., debounce)
├── 📄 package.json
├── 📄 README.md
└── 📄 tsconfig.json

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.