https://github.com/niloysikdar/react-table

Full blown example of handling Tabular Data with Advanced Filters, Sorting and Optimizations in React
https://github.com/niloysikdar/react-table

code-splitting react react-query typescript vite zustand

Last synced: 26 days ago
JSON representation

Full blown example of handling Tabular Data with Advanced Filters, Sorting and Optimizations in React

• Host: GitHub
• URL: https://github.com/niloysikdar/react-table
• Owner: niloysikdar
• Created: 2023-01-21T23:32:50.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-22T11:08:57.000Z (about 2 years ago)
• Last Synced: 2024-11-07T07:39:51.838Z (3 months ago)
• Topics: code-splitting, react, react-query, typescript, vite, zustand
• Language: TypeScript
• Homepage: https://react-table-prod.vercel.app
• Size: 51.8 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Table

## Full blown example of handling Tabular Data with Advanced Filters, Sorting and Optimizations in React

### Live here: [https://react-table-prod.vercel.app](https://react-table-prod.vercel.app)

### Features Implemented and Key Points

- [x] [React](https://reactjs.org), [Vite](https://vitejs.dev) and [TypeScript](https://www.typescriptlang.org)

- [x] Fully TypeSafe and Proper file and folder structure

- [x] Tabular View of the data with proper styling and fields using [Material UI](https://mui.com)

- [x] [React Query](https://tanstack.com/query) for efficient data fetching and caching (~~useEffect for Data Fetching~~)

- [x] [Zustand](https://github.com/pmndrs/zustand) for handling State Management

- [x] Separate the UI, Data fetching and filtration logic

- [x] All fully working Advanced Filters (Status, Suppliers, Start and End Date, etc.) from scratch with own logic

- [x] DatePicker with date based filtering logic

- [x] Sorting of the data with pagination and rows per page

- [x] Search feature and logic from scratch (**with debounce**) to filter the table by Vendor, Vendor Code and Description

- [x] Proper State Management with Loading and Error states

- [x] Custom Hooks

- [x] Animations on the table rows and data for filters and search

- [x] Code Splitting, Lazy Loading and Dynamic Imports to optimize the js bundle size and load time

- [x] Export data to CSV format in just one click with proper formatting

- [x] Responsive UI for larger and smaller screens

### Preview