JSFiddle - React, Tailwind, and code Playground

by wenyi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.css">

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.js"></script>

</head>
<body>

    

  <table id="my_table" data-classes="table" data-height="650" data-detail-view="true" data-detail-formatter="detailFormatter">

  <thead>
    <tr>
      <th data-field="name" >Name</th>
      <th data-field="unit">Unit</th>
      <th data-field="quantity">Quantity</th>
      <th data-field="price">Price</th>
      <th data-field="amount">Amount</th>
    </tr>
  </thead>
</table>

<script>
 

  $(function() {
    var data = 
      [{
        "id": 1,
        "name": "Kitchen cabinet, 66  high, 12  deep, no shelves, 18  wide",
        "unit": "Ea",
        "quantity": "1.00",
        "price": "323.59",
        "amount": "323.59"
      }, {
        "id": 2,
        "name": "One door base cabinet, 34-1/2  high, 24  deep, 15  wide, 1 door, 1 drawer",
        "unit": "Ea",
        "quantity": "1.00",
        "price": "242.00",
        "amount": "242.00"
      }, {
        "id": 3,
        "name": "Concrete Block Retaining Walls, Retaining wall with three lintel block courses and grouted and reinforced vertical cells at 32  O.C, 7  - 4  high wall",
        "unit": "LF",
        "quantity": "1.00",
        "price": "72.34",
        "amount": "72.34"
      }, {
        "id": 4,
        "name": "Concrete Block Retaining Walls, Retaining wall with three lintel block courses and grouted and reinforced vertical cells at 32  O.C, 7  - 4  high wall",
        "unit": "LF",
       ...