JSFiddle - React, Tailwind, and code Playground

by alfredopacino

HTML

<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>

<div class="toolbar">
  <div class="radio">
    <label>
      <input type="radio" checked name="theadClasses">
      <code>undefined</code>
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="theadClasses">
      <code>thead-light</code>
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="theadClasses">
      <code>thead-dark</code>
    </label>
  </div>
</div>

<table id="table" data-show-columns="true"></table>

<script>
  var $table = $('#table')

  function buildTable($el, cells, rows) {
    var i
    var j
    var row
    var columns = []
    var data = []

    for (i = 0; i < cells; i++) {
      columns.push({
        field: 'field' + i,
        title: 'Cell' + i,
        sortable: true
      })
    }
    for (i = 0; i < rows; i++) {
      row = {}
      for (j = 0; j < cells; j++) {
        row['field' + j] = 'Row-' + i + '-' + j
      }
      data.push(row)
    }

    var classes = $('.toolbar input:checked').next().text()

    $el.bootstrapTable('destroy').bootstrapTable({
      columns: columns,
      data: data,
      showFullscreen: true,
     ...