A Faster Way to Turn JSON Into An HTML Table
If you work with APIs, JSON, or admin dashboards, you’ve probably run into this:
You have structured JSON data.
You need to turn it into a clean HTML table.
Sounds simple.
But somehow it turns into:
- Pulling in a large library
- Configuring columns
- Mapping fields manually
- Writing repetitive formatting code
- Debugging edge cases
- Spending 30 minutes solving what should be a 2-minute task
My usual solution was DataTables, but it felt like overkill.
To be clear, DataTables is excellent. But I felt like there was an easier solution.
For My Use Case
- I wanted to paste in JSON into a text area
- View it as a good-looking HTML table
- Have an easy way to search it
I couldn’t find a lightweight solution that I liked, so I built one.
I created JSON Table Mate to quickly turn JSON into a nicely formatted HTML table.
Specifically I needed a way to have an input for the JSON, but I also accommodated a use case where it was already available (ex from a database).
Sample Input:
Sample Output:
The problem was that most solutions were built for complex tables, and the file size felt excessive for a simple use case.
I wanted something built for a simple table, that was rather small (in terms of file size- KB).
I wasn’t trying to replace bigger libraries. There’s no way I can compete with DataTables. I plan to even still use DataTables.
I built this for the times when DataTables is too much.
That said, I did incorporate some of the more commonly used features (sorting, searching, client-side pagination).
If you want server-side pagination, stick with something else.
Why I turned it into a product
Originally, this was just something I made for myself.
Then I realized (and hoped) that other web developers may have a need for this, too.
So I packaged it as a standalone product.
Not because the world needs another JavaScript tool. But because I think there’s value in having a small utility.
Here’s a Demo
Check out the project page for more details, live demos, and examples:
https://stevesohcot.github.io/json-table-mate/demo/
If it solves the same problem for you that it solved for me, you can grab the full (unminified) version of Json Table Mate on Gumroad.
How To Use It
- Include the CSS and JavaScript files. Also include the charset:
The charset tag is needed to ensure icons appear in the table column headers
2. Add the HTML elements:
3. Add the JavaScript:
There’s plenty of “options” including viewing errors, default pagination, and customizing column outputs — but you don’t need any of it it work. The default values were thoughtfully chosen.
For the Brave (or Very Curious)
Since it runs on GitHub Pages, you technically could poke around and wrestle with the minified code… if that sounds like a fun weekend. Or you could grab the full source for cheap, save yourself the pain, and support the project 😃.
Final Thoughts
This isn’t revolutionary. It’s intended to save time and eliminate repetition. It makes a common task a bit easier.
Again, here’s the link to the Product page that gives more details and demos.
