{"id":21765720,"url":"https://github.com/mutasim77/infinite-table","last_synced_at":"2026-04-17T10:08:27.017Z","repository":{"id":248511687,"uuid":"828872422","full_name":"mutasim77/infinite-table","owner":"mutasim77","description":"📜⚛️ A React-based infinite scroll application with dynamic data loading, built using TS, React and TanStack Query.","archived":false,"fork":false,"pushed_at":"2024-07-15T11:09:06.000Z","size":394,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-24T16:52:40.419Z","etag":null,"topics":["infinite-scroll","react-table","react-virtualized","reactjs","ts"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mutasim77.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-07-15T09:47:14.000Z","updated_at":"2024-07-15T11:09:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"08e28f2c-94ef-46f5-9f52-3fe002fe61c2","html_url":"https://github.com/mutasim77/infinite-table","commit_stats":null,"previous_names":["mutasim77/infinite-table"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mutasim77/infinite-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutasim77%2Finfinite-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutasim77%2Finfinite-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutasim77%2Finfinite-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutasim77%2Finfinite-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mutasim77","download_url":"https://codeload.github.com/mutasim77/infinite-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutasim77%2Finfinite-table/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31924421,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T09:10:15.403Z","status":"ssl_error","status_checked_at":"2026-04-17T09:10:14.455Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["infinite-scroll","react-table","react-virtualized","reactjs","ts"],"created_at":"2024-11-26T13:13:38.351Z","updated_at":"2026-04-17T10:08:27.002Z","avatar_url":"https://github.com/mutasim77.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg width=\"780\" alt=\"Banner\" src=\"https://github.com/user-attachments/assets/651ebe8a-977d-4340-aeea-c0c4764bb341\" \u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  📊 A powerful, flexible data management solution with infinite scrolling capabilities. 🚀\n\u003c/p\u003e\n\n## 🌟 Introduction\nStruggling with slow, cumbersome data tables? **InfiniTable** improves how you manage large datasets in web apps! 📈💨\n\nThis project integrates endless scrolling with flexible data handling, so you can browse data smoothly and easily without dealing with pagination issues.\n\n## 🦄 Features\n- 🔄 Infinite scrolling using Intersection Observer API\n- 📊 Dynamic data loading\n- 🎨 Sleek, responsive design with Tailwind CSS\n- 📥 Easily add new data to the table\n- 📝 Sticky form validation\n- 🚫 Error handling and more!\n\n## 🛠️ Tech Stack\n- **🧠 TypeScript** - For type-safe, robust code\n- **⚛️ React** - UI library for building interactive interfaces\n- **🎭 Intersection Observer API** - Efficient scrolling detection\n- **💅 Tailwind CSS** - Utility-first CSS framework for rapid UI development\n- **📡 JSON Server** - Lightweight database for rapid prototyping\n\n## 🏃‍♂️ Getting Started\n\n### Installation\n1. Clone the repo:\n   ```bash\n   git clone https://github.com/mutasim77/infinite-table.git\n   ```\n2. Install dependencies\n   ```\n   cd infinite-table\n   npm install ||  yarn install\n   ```\n3. Start the project\n   ```\n   make start\n   ```\n4. Open `http://localhost:5173` in your browser 🕸️\n\n\u003e [!IMPORTANT]\n\u003e 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.\n\n## 🔬 Understanding the Intersection Observer API\nThe [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:\n```js\nconst observer = new IntersectionObserver(\n  (entries) =\u003e {\n    if (entries[0].isIntersecting \u0026\u0026 hasNextPage \u0026\u0026 !isFetchingNextPage) {\n      fetchNextPage();\n    }\n  },\n  { threshold: 1.0 }\n);\n```\nThis code creates an observer that watches for when \"load more\"(ref) element becomes fully visible, triggering the next page fetch when appropriate.\n\n\u003e [!NOTE]\n\u003e If you want to learn more about Intersection Observer in detail, I highly recommend watching [this video](https://www.youtube.com/watch?v=2IbRtjez6ag).\n\n## 📸 Preview\n\u003cimg width=\"1440\" alt=\"Preview\" src=\"https://github.com/user-attachments/assets/9dfc99f2-8d51-4ddc-9ef2-6466b167f84f\"\u003e\n\n## 🔮 Future Plans (TODO)\n- 🔍 Implement search and filtering capabilities\n- 🔧 Integrate _delete_ and _update_ features for enhanced data management\n- 📋 Implement export functionality (e.g., CSV, Excel)\n\n## 🤝 Contributing\nContributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.\n- Fork the Project\n- Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n- Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n- Push to the Branch (`git push origin feature/AmazingFeature`)\n- Open a Pull Request\n\n## 📜 License\nDistributed under the MIT License. See [LICENSE](./LICENSE) for more information.\n\nBuilt with ❤️ by [mutasim](https://www.mutasim.top/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmutasim77%2Finfinite-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmutasim77%2Finfinite-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmutasim77%2Finfinite-table/lists"}