Dynamic Table Project

This is a Dynamic Table project that enables users to search, import, and edit data in various formats, including JSON, CSV, and XLSX. The application provides advanced features such as sorting, filtering, and editing data, making it an ideal tool for efficient data management.

Live Demo

You can try out the Dynamic Table project live at the following link:

Live Demo

Features

• Search Functionality: Search through all data entries with ease.
• Column-Based Search: Search within individual columns for more granular control.
• Import Data: Import data into the table from JSON files.
• Export Options: Export table data in XLSX, CSV, or JSON formats.
• Editable Data: Modify data directly within the table in real-time.
• Sorting: Sort data by any column in both ascending and descending order.
• Responsive: Works seamlessly across different screen sizes.

Getting Started

Follow the steps below to get the project up and running on your local machine:

Prerequisites

Before you begin, ensure you have Node.js and Yarn installed.

• Node.js: Download Node.js if it's not already installed.

• Yarn: Install Yarn globally by running the following command (if you haven't already):

  npm install -g yarn
  

Installation

Clone the repository:

First, clone the repository to your local machine:

git clone cd

Install dependencies:

Install the required dependencies using Yarn. In the project directory, run:

yarn install

Run the development server:

Once dependencies are installed, start the development server by running:

yarn dev

This will start the server, and you can view the project in your browser at http://localhost:3000.

Edit the Table:

You can start editing the table and its features by modifying the code in the app/page.tsx file. The page will auto-update as you save your changes.

Usage

Search: To search through all rows of data, simply use the search bar at the top.
Column-Based Search: Each column has its own search filter for more specific searches.
Import Data: To import data, click the "Import JSON" button and select a valid JSON file from your local machine.
Export Data: Click the "Export" button to export the data in CSV, XLSX, or JSON format.
Sorting: Click on any column header to sort the data in ascending or descending order.

Learn More

To learn more about the technologies used in this project, take a look at the following resources:

Next.js Documentation - Learn about Next.js features and APIs.
Learn Next.js - An interactive tutorial to get familiar with Next.js.
Vercel Deployment Documentation - For deploying your project to Vercel.

Screenshots