JSFiddle - React, Tailwind, and code Playground

HTML

<html lang='fr'>

  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width" name="viewport" />
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/png" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.20.0/dist/bootstrap-table.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>

  <body>


    <div class='container'>

      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary">
          <input id='sans-sel' type="checkbox" autocomplete="off"> Without
        </label>
      </div>


      <table class='table table-stripped table-bordered data-sort-name="Nom" data-sort-order="desc"' data-toggle="table">
        <thead>
          <tr>
            <th data-field="Nom" data-sortable="true">Name</th>
            <th data-field="sel" data-sortable="true">Sel</th>
            <th data-field="ca" data-sortable="true">Calcium</th>
        </thead>
        <tbody>
          <tr>
            <td>boisson amande gourmande</td>
            <td class='sel'>0</td>
            <td>0</td>
          </tr>
          <tr>
            <td>boisson amande intense</td>
            <td class='sel'>0.025</td>
            <td>0</td>
          </tr>
          <tr>
            <td>boisson amande légère</td>
            <td class='sel'>0</td>
            <td>0</td>
          </tr>
          <tr>
            <td>boisson amande sans sucre</td>
            <td class='sel'>0</td>
            <td>0</td>
          </tr>
          <tr>
            <td>DOUCEUR AMANDE CHOCOLAT</td>
            <td...