A web page that can take JSON files (mainly from MetaBase), and render them in a table, where you can filter, sort, and do many other things without needing to fetch from the server again, or to write queries.
- JavaScript
- React
- Redux/RTK
- VSCode
- Ant Design
- Clone this repo
- Run
npm install
to install all required packages - Run
npm start
to run a dev server so you can see all changes you do live- This is a React app, please check how to get started to learn how you can work with this repo
- Run
npm run build
to make a production build that would perform better and have less file size.
You can use this live link to work with your JSON files without having to clone the repo
MetaBase is great! it does help you go through data on a database and query what you need, but if you need to search through that query, you need to add even more queries, which makes it fetch the data again, it takes longer than it should, so just taking that data (by downloading a JSON file) and using it here will make it much simpler!
This would generally help those that are using data that they know isn't updating, and would want to filter/sort to get the information they need
While this project focuses mainly on MetaBase, you can also use files generated elsewhere if they follow the right format!
- Get your JSON file
- Download a JSON file from a MetaBase question
- Get a JSON file elsewhere that is an array of objects, that uses the same keys on all objects.
-
Good ✅
[ { "name": "Dude", "age": 28, "hobbies": null // since Guy have a "hobbies" key, Dude should also have one, if here's no data to add, we use null }, { "name": "Guy", "age": 25, "hobbies": "NPC" } ]
[ { "name": "Dude", "age": 28 }, { "name": "Guy", "age": 25 } ]
-
Bad ❌
[ { "name": "Dude", "age": 28 }, { "name": "Guy", "age": 28, "hobbies": "NPC" // there's a key that doesn't exist in the other object, it may work but you won't get all results. } ]
[ { "name": "Dude", "age": 28 }, [ // All elements of the main array should be objects. { "name": "Guy", "age": 28, } ] ]
P.S: You can't actually have comments on JSON, these are JS objects just to showcase the examples
-
- Upload the file to the website
- A table will load with all the data that you can change and filter with no code
👤 SpaYco
- Github: @SpaYco
- Twitter: @iSpaYco
- Linkedin: Aziz Mejri
- Hackernoon: @SpaYco
Contributions, issues and feature requests are welcome!
Give a ⭐️ if you like this project!
📝 License
This project is GPL licensed.
Enjoy!