JSFiddle - React, Tailwind, and code Playground

by wenyi

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<h5>
With Boostrap-table v.1.13.2
</h5>
<table id="table">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
      <th data-field="actions" data-formatter="operateFormatter" data-events="operateEvents">Actions</th>
    </tr>
  </thead>
</table>

JavaScript

var data = [
      {
        'id': 0,
        'name': 'Item 0',
        'price': null
      },
      {
        'id': 1,
        'name': 'Item 1',
        'price': '$1'
      },
      {
        'id': 2,
        'name': 'Item 2',
        'price': '$2'
      },
      {
        'id': 3,
        'name': 'Item 3',
        'price': '$3'
      },
      {
        'id': 4,
        'name': 'Item 4',
        'price': '$4'
      },
      {
        'id': 5,
        'name': 'Item 5',
        'price': '$5'
      }
    ]
    function operateFormatter(value, row, index) {
        return [
            '<div class="btn-group" role="group">',
            '<a rel="tooltip" class="btn btn-danger btn-sm delete" href="javascript:void(0)" title="Delete">Delete',
            '</a>',
            '</div>'
        ].join('');
    }
        window.operateEvents = {
        'click .delete': function (e, value, row, index) {
        alert('Click to delete button');
        }
    };
$('#table').bootstrapTable({data: data});