JSFiddle - React, Tailwind, and code Playground
HTML
<table class="table" id="Endereco">
<thead>
<tr>
<th class="col" data-property="#">#</th>
<th class="col" data-property="id"> id </th>
<th class="col" data-property="logradouro"> logradouro </th>
<th class="col" data-property="numero"> numero </th>
<th class="col" data-property="complemento"> complemento </th>
<th class="col" data-property="bairro"> bairro </th>
<th class="col" data-property="cidade"> cidade </th>
<th class="col" data-property="estado"> estado </th>
<th class="col" data-property="cep"> cep </th>
<th class="col" data-property=""></th>
</tr>
</thead>
<tbody class="content"></tbody>
<tfoot>
<tr>
<td class="comando" data-nome="altera" data-action="Endereco/altera"></td>
<td class="comando" data-nome="remove" data-action="Endereco/remove"></td>
</tr>
</tfoot>
</table>
JavaScript
var atributos = [];
$(".col").each(function(){
var property = $(this).data('property');
atributos.push(property);
});
var json_data = '{"item":[{"id":1,"logradouro":"rua sao pedro","numero":"35","complemento":"terreo","bairro":"zizo","cidade":"itabuna","estado":"bahia","cep":"45600-000"}, {"id":2,"logradouro":"rua sao pedro","numero":"35","complemento":"terreo","bairro":"zizo","cidade":"itabuna","estado":"bahia","cep":"45600-000"}, {"id":3,"logradouro":"rua sao pedro","numero":"35","complemento":"terreo","bairro":"zizo","cidade":"itabuna","estado":"bahia","cep":"45600-000"}, {"id":4,"logradouro":"rua sao pedro","numero":"35","complemento":"terreo","bairro":"zizo","cidade":"itabuna","estado":"bahia","cep":"45600-000"}]}';
var json = jQuery.parseJSON( json_data );
var target = $('#Endereco');
var entity = 'Endereco';
target.find("tbody.content").empty();
$.each(json.item, function(index, item){
var row = $('<tr>');
console.log(':linha');
for(var i=0; i<atributos.length; i++) {
if(atributos[i] == '#') {
console.log('::checkbox');
row.append('<td><input type="checkbox" name="'+entity+'" value="'+item.id+'"></td>');
}
else if(atributos[i] == '') {
console.log('::comandos');
var col = $('<td>');
var group = $('<div class="btn-group">');
$(".comando").each(function(){
var nome = $(this).data("nome");
var action = $(this).data("action");
group.append('<button type="button" class="btn btn-sm btn-primary action" data-target="'+nome+'-'+entity+'" data-action="'+action+'/'+item.id+'">'+nome+'</button>');
});
col.append(group);
row.append(col);
}
...