Con javascript podrías crearlo, te dejo a continuación la función que cree documentado en cada línea para que puedas entenderlo:
// función para obtener las columnas en un objeto
function getRows(json, index) {
var _index = index | 0;
var row = [];
// recorro el json por key
for (key in json) {
// agrego los textos correspondientes
row.push({
param: key,
type: typeof json[key],
example: typeof json[key] !== 'object' ? json[key] : '',
// esto es para saber la posición de los td
_index: _index
});
// si es un objeto entonces lo recorro
if (typeof json[key] === "object") {
return row.concat(getRows(json[key], _index + 1));
}
}
return row;
}
Y acá te dejo el código completo para que puedas visualizarlo.
// función para obtener las columnas en un objeto
function getRows(json, index) {
var _index = index | 0;
var row = [];
// recorro el json por key
for (key in json) {
// agrego los textos correspondientes
row.push({
param: key,
type: typeof json[key],
example: typeof json[key] !== 'object' ? json[key] : '',
// esto es para saber la posición de los td
_index: _index
});
// si es un objeto entonces lo recorro
if (typeof json[key] === "object") {
return row.concat(getRows(json[key], _index + 1));
}
}
return row;
}
var json = {
Persona: {
nombre: "Juan",
edad: 28,
Residencia: {
calle: "example",
numero: "0123"
}
}
};
var table = document.querySelector('table');
var rows = getRows(json);
// armo los tr y td para la tabla
// armo el header de la tabla
var tr = document.createElement('tr');
var tdLength = rows[rows.length - 1]._index;
for (var i = 0; i <= tdLength; i++) {
var th = document.createElement('th');
var text = document.createTextNode(rows[i]._index === 0 ? 'Parametro' : '');
th.appendChild(text);
tr.appendChild(th);
}
var thTipo = document.createElement('th');
thTipo.appendChild(document.createTextNode('Tipo'));
tr.appendChild(thTipo);
var thExample = document.createElement('th');
thExample.appendChild(document.createTextNode('Ejemplo'));
tr.appendChild(thExample);
table.appendChild(tr);
// recorro todos las columnas del objeto
for (var i = 0; i < rows.length; i++) {
var tr = document.createElement('tr');
for (var j = 0; j <= tdLength; j++) {
var td = document.createElement('td');
var text = document.createTextNode(rows[i]._index === j ? rows[i].param : '');
td.appendChild(text);
tr.appendChild(td);
}
var tdTipo = document.createElement('td');
tdTipo.appendChild(document.createTextNode(rows[i].type));
tr.appendChild(tdTipo);
var tdExample = document.createElement('td');
tdExample.appendChild(document.createTextNode(rows[i].example));
tr.appendChild(tdExample);
table.appendChild(tr);
}
table {
border-collapse: collapse;
}
tr {
padding: 0;
margin: 0;
}
td, th {
border: 1px solid #000;
padding: 2px 5px;
}
th {
font-size: 13px;
font-family: tahoma;
text-align: left;
}
tr td {
font-family: monospace;
font-size: 13px;
}
<div id="container">
<table></table>
</div>
También lo dejé en codepen para que puedas cambiar el json y probarlo.