JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

</head>


<body>
    <div class="container-fluid">
        <div class="row pt-3">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="table1" data-classes="table table-bordered">
                                <thead class="thead-light">
                                    <tr>
                                        <th data-field="h1" data-width="10"></th>
                                        <th data-field="h2">Hardware name</th>
                                        <th data-field="h3">IP address</th>
                                        <th data-field="h4">Port</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td data-toggle="collapse"...

CSS

[data-toggle="collapse"] .fa:before {  
  content: "\f068"; /*minus*/
  /*content: "\f078"; chevron down*/

}
[data-toggle="collapse"].collapsed .fa:before {
  content: "\f067"; /*plus*/
  /*content: "\f054"; chevron right*/
}

JavaScript

$(function() {
            $('#table1').bootstrapTable({
                exportDataType: $(this).val(),
              })
          })
          $(function() {
            $('#table2').bootstrapTable({
                exportDataType: $(this).val(),
              })
          })