Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

rohitkadu/Advance-Data-Table-Tanstack-React

Repository files navigation

πŸ“Š 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
    

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /