JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://rawgit.com/rstaib/jquery-bootgrid/master/build/jquery.bootgrid.js"></script>
<table id="grid" class="table table-condensed table-hover table-striped" data-selection="true" data-multi-select="false" data-row-select="true" data-keep-selection="true">
    <thead>
        <tr>
            <th data-column-id="codigo" data-order="asc" data-align="left" data-header-align="left">Código</th>
            <th data-column-id="razao" data-order="asc" data-align="left" data-header-align="left">Razão Social</th>
            <th data-column-id="bairro" data-order="asc" data-align="left" data-header-align="left">Bairro</th>
            <th data-column-id="cidade" data-order="asc" data-align="left" data-header-align="left">Cidade</th>
            <th data-column-id="status" data-formatter="link" data-sortable="false">Status</th>
            <th data-column-id="acao" data-formatter="link" data-sortable="false"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

.bootgrid-header, .bootgrid-footer {
    margin: 15px 0;
}
.bootgrid-header a, .bootgrid-footer a {
    outline: 0;
}
.bootgrid-header .search, .bootgrid-footer .search {
    display: inline-block;
    margin: 0 20px 0 0;
    vertical-align: middle;
    width: 180px;
}
.bootgrid-header .search .glyphicon, .bootgrid-footer .search .glyphicon {
    top: 0;
}
.bootgrid-header .search.search-field::-ms-clear, .bootgrid-footer .search.search-field::-ms-clear, .bootgrid-header .search .search-field::-ms-clear, .bootgrid-footer .search .search-field::-ms-clear {
    display: none;
}
.bootgrid-header .pagination, .bootgrid-footer .pagination {
    margin: 0 !important;
}
.bootgrid-header .actionBar, .bootgrid-footer .infoBar {
    text-align: right;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu, .bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu {
    text-align: left;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item, .bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item {
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 3px 20px;
    white-space: nowrap;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover, .bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover, .bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus, .bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox, .bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox, .bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox, .bootgrid-footer .infoBar .btn-group > .btn-group...

JavaScript

var data = {
    json: JSON.stringify({
        "current": 1,
            "rowCount": 1,
            "rows": [{
            "codigo": "111",
                "razao": "nome razao",
                "bairro": "nome bairro",
                "status": "status",
                "cidade": "capital"
        }],
            "total": 1
    })
}

$.ajax({
    url: "/echo/json/",
    type: "POST",
    data: data,
    success: function (result) {
        console.log(result)
        $("#grid").bootgrid({
            formatters: {
                "link": function (column, row) {
                    console.log(column, row);
                    return "<a href=\"#\">" + column.id + ": " + row.id + "</a>";
                }
            }
        }).bootgrid("append", result.rows);
    }
});