I went through the documentation and feature list of React DataGrid, and I wrote React DataGrid: A Free, Open-Source React Data Grid with an Enterp...
For further actions, you may consider blocking this person and/or reporting abuse
Wow, it's so cool! Well done! 😸
I've been interested in Apollo history recently, so this website is very timely for me 🚀
When I checked Apollo XI, I couldn't believe the mission was about 50 years ago. Crazy.
Haha, thank you so much! 😄 I'm really glad the timing worked out for you!
Apollo missions are such a fascinating rabbit hole, and seeing those dates inside the explorer really does make you realize just how much time has passed 😅
Hope you had fun exploring the missions!
The 1,200-row client-side / 100,000-row server-side split is the most interesting architectural choice in the piece. That pattern works cleanly until you try to display facet counts — if your filter options are derived from the client working set but the actual totals live in the server archive, users start seeing "Agency: Artemis Dynamics (47)" when the real count is in the thousands. Curious whether you kept the faceted filters intentionally scoped to the working set, or had to wire a separate aggregation pass against the full archive to keep counts honest. In my experience that "which dataset owns the filter metadata?" question is where datagrid evaluations usually surface the real integration cost, not the rendering layer.
For this project, I intentionally kept the faceted filter counts scoped to the 1,200-row client-side working set. The 100,000-row archive is handled separately through server-side infinite scrolling, so I didn’t wire a separate aggregation pass for the full archive.
I wanted to keep the experiment focused on the two different data-access patterns rather than introduce another backend aggregation layer just for the facet counts. But I completely agree that in a production application, those counts would need to be backed by the full dataset if users expect them to represent the entire archive.
The Space Mission & Satellite Explorer you built is really impressive. I can see the power of React DataGrid in a data-heavy application. 1,200-row client-side dataset and a 100,000-row live archive is really huge 🔥
Great job! 👏🏻
Thank you so much! 🙌🏻 I really appreciate that! I wanted to push the project beyond a simple demo and see how the grid would act with a larger dataset. The 100,000-row archive definitely made the experiment more interesting!
Really glad you enjoyed it! 😍
Solid coverage of React fundamentals. For production apps, I'd also recommend setting up React Error Boundaries at strategic points — they catch rendering errors gracefully and prevent the entire UI from crashing.
Great point! 🙌🏻 Error Boundaries are definitely one of those things that become important once you move from a demo to a production app. Having strategic boundaries so one rendering issue doesn’t take down the whole UI can make a huge difference.
Exactly, isolating failures is crucial when rendering complex data grids in a mission explorer. I usually wrap the grid component in a boundary with a fallback that lets users retry the data fetch instead of just displaying a static error message. Have you integrated a specific logging service to track when these boundaries actually catch an error in production?
Really impressive use of grid. Handling 100,000 rows x 1200 client is great.
Plus ++++ Literally cool UI i liked the use of planets as background in details page
I see the column headers are working unexpectedly, you might want to fix it
Thank you so much! 🙌🏻 Really glad you liked the UI, especially the planets on the details page! That was one of those little touches I had a lot of fun with 😅
And good catch on the column headers! I really appreciate you pointing that out. I'll definitely take another look at it and fix it.
Really impressive deep dive! Handling a 100k-row live archive alongside a 1,200-row interactive dataset in React is a fantastic stress test. Great write-up on balancing smooth virtual scrolling with complex features.
Thank you so much! 😍 Glad you liked it 🙌🏻
The article is very positive, but it lacks a deeper analysis of the issues, such as configuration difficulties, errors, and performance limitations. There isn't much code—just a few lines—so it's hard to see what the implementation actually looks like...
I appreciate you being honest about it! I focused more on the overall hands-on experience and what I learned from building the project, but I agree that going deeper into the rough edges, performance behavior, and actual implementation details would have made the evaluation stronger.
What I found most interesting is the decision to use different data-loading strategies instead of treating 100k rows as a problem the client should simply handle. Keeping a smaller working set for interactive analysis while loading the larger archive on demand feels like a good example of designing around user behavior rather than raw dataset size. The same principle can make data-heavy interfaces much easier to reason about as they grow.
Absolutely! That was actually one of the main things I wanted to explore with the project. Instead of throwing all 100k records at the client and hoping for the best 😅, I wanted to separate the interactive experience from the full archive and let each use case have its own loading strategy.
I’m really glad that came through in the article 😍
Really enjoyed this hands on follow up, Hadil. Seeing React DataGrid tested in an actual project with a 100,000 mission archive makes the evaluation much more meaningful than a feature comparison alone.
I especially liked how you used the same dataset in different ways, from filtering and pivoting in the Mission Explorer to analytics and Tree Data for the mission timeline. That makes it clear where a data grid can actually add value instead of just showcasing individual features.
The part about not needing to build all that table infrastructure yourself really stood out to me. Being able to focus on the product and the data experience rather than rebuilding sorting, filtering, grouping, virtualization, and server side loading is a strong argument for using a dedicated grid.
Great experiment and a really practical follow up to your previous article. Looking forward to seeing what you build with it next.
Thank you so much! That’s exactly what I wanted this follow-up to show. It’s easy to look at a feature list and think that’s nice, but actually using those features together in a real project gives you a much better sense of where they save you time.
And I completely agree about the infrastructure part. I’d much rather spend that time thinking about the actual product and how people interact with the data than rebuilding the same table functionality from scratch 😄
Really appreciate you following along with both articles!
What you built is impressive, Hadil 🎉
Keep going.
Thank you so much! 😍 Glad you liked it.
good😀
Thank you! 😍 Glad you liked it 🙌🏻
Very impressive - well done! The server-side infinite scroll is exactly what I am looking for - good to know, not only that it can be done but also be made to look amazing!
Thank you so much! 😍 I’m really glad that part stood out to you! The server-side infinite scrolling was one of the things I specifically wanted to test with the 100,000-row archive, so it’s awesome to hear that it’s useful for what you’re working on.
And honestly, making it look good was just as fun as making it work 😄 Hope the project gives you some ideas for your own implementation!
It turned out great 👍🏼
Thank you so much! 😍 Glad you liked it 🙌🏻
Awesome showcase! Interactive data grids make exploring large datasets so much smoother. Loving the space theme context
Thank you so much! 🙌🏻 I really appreciate it! I had a lot of fun putting the space theme together. It also made the whole data-grid experiment feel more like a real product instead of just a technical demo 😄
Glad you enjoyed it!
This is such an Impressive one. Using a React Data grid on a heavy data usage is such a fascinating.
Thank you so much! 😍 Glad you liked it.
An impressive work indeed, certainly you've outdone yourself @hadil! Congratulations. I wonder if this React DataGrid is open for open-source contribution?
Thank you so much! 🙌🏻 I really appreciate that! And yes, absolutely, the React DataGrid project is open source, and contributions are welcome. If you have ideas, improvements, or features you'd like to see, definitely check out the repo link mentioned in the article and feel free to contribute!
I can't put a link in the comments; otherwise, it's going to be deleted by the system.
The real question is... How many miles & more points were earned during all of these flights?