https://github.com/mutasim77/infinite-table
📜⚛️ A React-based infinite scroll application with dynamic data loading, built using TS, React and TanStack Query.
https://github.com/mutasim77/infinite-table
infinite-scroll react-table react-virtualized reactjs ts
Last synced: about 2 months ago
JSON representation
📜⚛️ A React-based infinite scroll application with dynamic data loading, built using TS, React and TanStack Query.
- Host: GitHub
- URL: https://github.com/mutasim77/infinite-table
- Owner: mutasim77
- License: mit
- Created: 2024-07-15T09:47:14.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-15T11:09:06.000Z (almost 2 years ago)
- Last Synced: 2025-09-24T16:52:40.419Z (9 months ago)
- Topics: infinite-scroll, react-table, react-virtualized, reactjs, ts
- Language: TypeScript
- Homepage:
- Size: 385 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
📊 A powerful, flexible data management solution with infinite scrolling capabilities. 🚀
## 🌟 Introduction
Struggling with slow, cumbersome data tables? **InfiniTable** improves how you manage large datasets in web apps! 📈💨
This project integrates endless scrolling with flexible data handling, so you can browse data smoothly and easily without dealing with pagination issues.
## 🦄 Features
- 🔄 Infinite scrolling using Intersection Observer API
- 📊 Dynamic data loading
- 🎨 Sleek, responsive design with Tailwind CSS
- 📥 Easily add new data to the table
- 📝 Sticky form validation
- 🚫 Error handling and more!
## 🛠️ Tech Stack
- **🧠 TypeScript** - For type-safe, robust code
- **⚛️ React** - UI library for building interactive interfaces
- **🎭 Intersection Observer API** - Efficient scrolling detection
- **💅 Tailwind CSS** - Utility-first CSS framework for rapid UI development
- **📡 JSON Server** - Lightweight database for rapid prototyping
## 🏃♂️ Getting Started
### Installation
1. Clone the repo:
```bash
git clone https://github.com/mutasim77/infinite-table.git
```
2. Install dependencies
```
cd infinite-table
npm install || yarn install
```
3. Start the project
```
make start
```
4. Open `http://localhost:5173` in your browser 🕸️
> [!IMPORTANT]
> I've removed the `concurrently` library and instead use a Makefile to run multiple processes. This approach reduces dependencies and provides more flexibility in our development workflow.
## 🔬 Understanding the Intersection Observer API
The [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) is a powerful tool that allows us to detect when an element enters or leaves the viewport. In this project, I use it to trigger data loading as the user scrolls:
```js
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
fetchNextPage();
}
},
{ threshold: 1.0 }
);
```
This code creates an observer that watches for when "load more"(ref) element becomes fully visible, triggering the next page fetch when appropriate.
> [!NOTE]
> If you want to learn more about Intersection Observer in detail, I highly recommend watching [this video](https://www.youtube.com/watch?v=2IbRtjez6ag).
## 📸 Preview
## 🔮 Future Plans (TODO)
- 🔍 Implement search and filtering capabilities
- 🔧 Integrate _delete_ and _update_ features for enhanced data management
- 📋 Implement export functionality (e.g., CSV, Excel)
## 🤝 Contributing
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
- Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
- Push to the Branch (`git push origin feature/AmazingFeature`)
- Open a Pull Request
## 📜 License
Distributed under the MIT License. See [LICENSE](./LICENSE) for more information.
Built with ❤️ by [mutasim](https://www.mutasim.top/)