Custom Data Table

This project demonstrates a React (TypeScript) application with three main tasks:

1. Feature-rich data table
2. Custom form builder
3. Mini blog app

Technologies Used

• React 19
• TypeScript
• Javascript
• Tailwind CSS
• React Router
• React Markdown (for markdown editor)
• Axios (for API calls)

Features

Task 1: Data Table

• Fetches user data from dummyjson.com
• Supports sorting by columns
• Search/filter functionality
• Pagination with various controls
• Row selection and bulk delete action
• Responsive design

Task 2: Form Builder

• Dynamically renders form fields based on configuration
• Supports text, email, select, and textarea inputs
• Field validation (required, pattern matching)
• Conditional field rendering
• Displays submitted data

Task 3: Mini Blog App

• CRUD operations for blog posts
• Routing with React Router
• Context API for state management
• Markdown editor with live preview
• Optimistic UI updates

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js: Version 20.15.1 or higher
• npm: Version 10.7.0 or higher

Installation

To install and run project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/ChuksJoshuaa/custom-data-table.git

2. Install the repository:

   npm install --force

3. Build the repository with docker:

   docker-compose up --build

Usage

To start the application and begin using project, follow these steps:

1. Start the application:

   npm run dev

2. Open your web browser and navigate to

   http://localhost:5173

Contributing

Contributions are welcome! To contribute to project, follow these steps:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/your-feature-name

3. Make your changes and commit them:

   git commit -m 'Add some feature'

4. Push to the branch:

   git push origin feature/your-feature-name

5. Submit a pull request.