JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<div>
  <table id="tableau" data-sort-stable=true class="table table-striped">
    <thead>
      <tr>
        <th data-field="ext" data-sortable="true">Type</th>
        <th data-field="nbfichiers" data-sortable="true" data-align="center">Total</th>
        <th data-field="nb2017" data-formatter="BadgeFormatter" data-sortable="true" data-align="center">2017-2018</th>
        <th data-field="l_ext" data-sortable="true" data-align="center">Liste extensions</th>
      </tr>
    </thead>
  </table>
</div>

CSS

html, body {
                  background-color: #F4EFEA !important;
              }
              
          .badge-info {
              background-color: orange;
              }

JavaScript

var datajson = [{"ext":"Vecteur","itype":"map-marker","nbfichiers":44659,"nb2017":2171, "l_ext":["SHP","KML","GEOJSON"]},{"ext":"Raster","itype":"image","nbfichiers":121036,"nb2017":3055, "l_ext":["JPG","TIF","BMP"]},{"ext":"Bases de donn\u00e9es","itype":"database","nbfichiers":101,"nb2017":16, "l_ext":["MDB","ACCDB","SQLITE"]},{"ext":"Tableurs","itype":"table","nbfichiers":70196,"nb2017":1421, "l_ext":["XLS","XLSX","CSV","ODT"]},{"ext":"Autres fichiers","itype":"file","nbfichiers":268807,"nb2017":40283, "l_ext":["..."]}];

var $table = $('#tableau');

$(function () {
    $('#tableau').bootstrapTable({
        data: datajson
    });
});

// Fonction pour formater en badge une colonne (ici ne marche pas ???)
function BadgeFormatter(value, row, index) {
		return '<span class="badge badge-info">' + value + '</span>';
}

// Test de boucle For Each sur un array :

var liste = ["KML", "SHP", "MDB", "TXT", "GEOJSON", "DBF"];

liste.forEach(createHTML);

function createHTML(arrayItem, index, array) {
    var spanObj = '<span class="badge badge-info">' + arrayItem + '</span>'
    var div = document.createElement('div');
    div.innerHTML = spanObj;
    document.body.append(div);
}