https://github.com/rohitkadu/advance-data-table-tanstack-react

https://github.com/rohitkadu/advance-data-table-tanstack-react

css data html javascript jsx material-react-table npm react-table reactjs tanstack-table vite

Last synced: about 2 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/rohitkadu/advance-data-table-tanstack-react
• Owner: rohitkadu
• Created: 2024-06-23T11:31:10.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-23T19:40:34.000Z (5 months ago)
• Last Synced: 2024-07-21T08:57:05.291Z (4 months ago)
• Topics: css, data, html, javascript, jsx, material-react-table, npm, react-table, reactjs, tanstack-table, vite
• Language: JavaScript
• Homepage: https://advance-data-table-rohit.netlify.app/
• Size: 862 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 📊 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:

   ```bash

   git clone 

   

2. Install dependencies:

   ````bash

   npm install

   

3. usgae

   ````bash

   npm run dev