📊 Advance Data Table

Screenshots

User Interface

Advanced Data Table Project

This project showcases an advanced data table implementation using React and @tanstack/react-table library.

Overview

This project aims to create a powerful and flexible data table component in React, suitable for complex data management and display scenarios. It leverages the @tanstack/react-table library for its core functionality, enabling features like sorting, filtering, grouping, and customizable column visibility.

Features

• Sorting: Clickable headers for sorting data by ascending or descending order.
• Filtering: Global search functionality to filter data based on user input.
• Grouping: Ability to group data by selected columns, such as category or any other relevant fields.
• Column Visibility: Customize which columns are displayed in the table using a sidebar interface.
• Pagination: Navigate through large datasets with pagination controls.
• Custom Cell Rendering: Display formatted dates and other customized data types.
• Responsive Design: Table adapts to different screen sizes for optimal viewing experience.

Technologies Used

• React: JavaScript library for building user interfaces.
• @tanstack/react-table: Lightweight and extensible table library for React.
• CSS: Styling and layout using CSS for enhanced user experience.
• JavaScript (ES6+): Modern JavaScript syntax for writing clean and efficient code.
• JSON: Sample data stored in JSON format for demonstration purposes.

Installation

1. Clone the repository:

   git clone <repository-url>
   

2. Install dependencies:

   npm install
   

3. usgae

   npm run dev