JSFiddle - React, Tailwind, and code Playground

JavaScript

(function ($) {
  $.widget(
    "ui.table", {
    options: {
      name: "table",
      default_controls: [{
        id: 'previous',
        icon: 'ui-icon-arrowthick-1-w'
      }, {
        id: 'next',
        icon: 'ui-icon-arrowthick-1-e'
      }]
    },
    _create: function () {},
    _init: function () {
      // création de la barre de navigation
      var chaine = "<ul id='" + this.options.name + "_navBar' style='list-style:none;'>";
      for (var i = 0; i < this.options.default_controls.length; i++) {
        chaine += this._getControl(
        this.options.default_controls[i]['id'],
        this.options.default_controls[i]['icon']);
      }
      chaine += "</ul><div style='clear:both;'>&nbsp;</div>";
      chaine += "<table id='" + this.options.name + "_table'></table>";
      this.element.append(chaine);
      this._createHeader();
      this.getValues();
    },
    _setOption: function (key, value) {
      this.options[key] = value;
    },
    _getControl: function (id, icon) {
      var chaine = "<li class='ui-state-default ui-corner-all' id='" + this.options.name + '_' + id + "' style='float:left;margin-right:2px;text-decoration: none;'>
       + " < span class = 'ui-widget ui-corner-all ui-icon ui-button "
        + icon
        + "'
      title = '"
        + id
        + "' > < /span></li > ";
       return chaine;
   },
   
   _createHeader: function(){
       var chaine = '<tr>';
       var cols = this.options.provider.getHeader();
       for ( var i = 0; i < cols.length; i++) {
    chaine += '<th>'+cols[i]+'</th>';
       }
       chaine += '</tr>';
       $('#'+this.options.name+"
      _table ").append(chaine);
   },
   
   getValues: function() {
       var chaine = '';
       var vals = this.options.provider.getData();
       for ( var i = 0; i < vals.length; i++) {
    chaine += '<tr>';
    for ( var j = 0; j < vals[i].length; j++) {
     chaine += '<td>'+vals[i][j]+'</td>';
        }
    chaine += '</tr>';
       }
      ...