Convert Nested JSON to HTML Table — React, Javascript

A simple react component to convert any nested JSON object or array into an HTML table.

For this implementation, we will create a simple component in React that converts any nested JSON object into an HTML table. I have used bootstrap classes to render the table in this example. But the setup is kept to minimal for you to make changes as per your needs.

At work, we develop many admin panels for our enterprise solutions. One of the issues when creating an admin panel is to render data from SQL into the HTML Datatables. As it becomes hard to fit all information inside one table row and multiple columns spread across horizontally, developers use expandable rows to display more information and/or create a separate details page that shows the full information for the entity.

Nowadays, web admin panels are mostly SPA (Single Page Application) and REST APIS, we can utilize the API response, as it is, and render it into a beautiful HTML table to reduce time on coding tedious <tr> <td>.

Of course, with frameworks like Laravel, Blade is awesome. Even then, you will find this helpful to convert your JS powered HTML tables.

There are not many solutions available online that can seamlessly convert JSON to HTML Table. A few open-source that exists, don’t work well with the libraries such as next.js on how they have handled the global css. So I wanted to share a simple Codepen implementation for a sample.