<!-- table with sorter -->
<table class="table-sorter table-bordered w-full text-left text-slate-500 dark:text-slate-400">
  <thead>
    <tr class="bg-slate-100 dark:bg-slate-800 dark:bg-opacity-40">
      <th>Title</th>
      <th>Author</th>
      <th>Views</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Intro to CSS</td>
      <td>Adam</td>
      <td>858</td>
    </tr>
    <tr>
      <td>A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
      <td>Adam</td>
      <td>112</td>
    </tr>
    <tr>
      <td>Intro to JavaScript</td>
      <td>Chris</td>
      <td>1,280</td>
    </tr>
  </tbody>
</table>

<!-- minimal table sorter -->
<div class="hidden-header hidden-sort-after">
  <table class="table-sorter table-sm text-sm table-bordered-bottom w-full text-left text-slate-500 dark:text-slate-400">
    <thead>
      <tr class="bg-slate-100 dark:bg-slate-800 dark:bg-opacity-40">
        <th>Title</th>
        <th>Author</th>
        <th>Views</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Intro to CSS</td>
        <td>Adam</td>
        <td>858</td>
      </tr>
      <tr>
        <td>A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
        <td>Adam</td>
        <td>112</td>
      </tr>
      <tr>
        <td>Intro to JavaScript</td>
        <td>Chris</td>
        <td>1,280</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- table sorter with checkbox-->
<div class="hidden-header">
  <table x-data="{ checkall: false }" class="table-sorter table-sm text-sm table-bordered-bottom w-full text-left text-slate-500 dark:text-slate-400">
    <thead>
      <tr class="bg-slate-100 dark:bg-slate-800 dark:bg-opacity-40">
        <th data-sortable="false">
          <label class="flex items-center">
            <input id="selectall" type="checkbox" name="checked-demo" value="1" class="checkedall form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </th>
        <th>Customer name</th>
        <th>Email</th>
        <th>Status</th>
        <th>Added</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <label class="flex items-center">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 mr-2 max-w-full border-1 border-cyan-200 bg-slate-300 dark:bg-slate-900 dark:border-slate-700" src="src/img/avatar/avatar3.jpg" alt="Avatar">James Doe</td>
        <td>james_doe@gmail.com</td>
        <td><i class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">Active</i></td>
        <td>05/10/2022</td>
        <td>
          <a href="#" class="text-sm py-1 px-2 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex items-center">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 mr-2 max-w-full border-1 border-cyan-200 bg-slate-300 dark:bg-slate-900 dark:border-slate-700" src="src/img/avatar/avatar4.jpg" alt="Avatar">David Luis</td>
        <td>david_doe@gmail.com</td>
        <td><i class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">Active</i></td>
        <td>05/10/2022</td>
        <td>
          <a href="#" class="text-sm py-1 px-2 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex items-center">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 mr-2 max-w-full border-1 border-cyan-200 bg-slate-300 dark:bg-slate-900 dark:border-slate-700" src="src/img/avatar/avatar5.jpg" alt="Avatar">Carlos Garcia</td>
        <td>carlos_doe@gmail.com</td>
        <td><i class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">Active</i></td>
        <td>05/10/2022</td>
        <td>
          <a href="#" class="text-sm py-1 px-2 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex items-center">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 mr-2 max-w-full border-1 border-cyan-200 bg-slate-300 dark:bg-slate-900 dark:border-slate-700" src="src/img/avatar/avatar6.jpg" alt="Avatar">Robert Alvis</td>
        <td>robert_doe@gmail.com</td>
        <td><i class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">Active</i></td>
        <td>05/10/2022</td>
        <td>
          <a href="#" class="text-sm py-1 px-2 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex items-center">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 mr-2 max-w-full border-1 border-cyan-200 bg-slate-300 dark:bg-slate-900 dark:border-slate-700" src="src/img/avatar/avatar7.jpg" alt="Avatar">Ronald Altra</td>
        <td>ronald_doe@gmail.com</td>
        <td><i class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">Active</i></td>
        <td>05/10/2022</td>
        <td>
          <a href="#" class="text-sm py-1 px-2 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex items-center">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 mr-2 max-w-full border-1 border-cyan-200 bg-slate-300 dark:bg-slate-900 dark:border-slate-700" src="src/img/avatar/avatar8.jpg" alt="Avatar">Yokuma</td>
        <td>yokuma_doe@gmail.com</td>
        <td><i class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">Active</i></td>
        <td>05/10/2022</td>
        <td>
          <a href="#" class="text-sm py-1 px-2 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex items-center">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 mr-2 max-w-full border-1 border-cyan-200 bg-slate-300 dark:bg-slate-900 dark:border-slate-700" src="src/img/avatar/avatar9.jpg" alt="Avatar">Jason Byrn</td>
        <td>jason_doe@gmail.com</td>
        <td><i class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">Active</i></td>
        <td>05/10/2022</td>
        <td>
          <a href="#" class="text-sm py-1 px-2 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex items-center">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 mr-2 max-w-full border-1 border-cyan-200 bg-slate-300 dark:bg-slate-900 dark:border-slate-700" src="src/img/avatar/avatar10.jpg" alt="Avatar">Patrick Soe</td>
        <td>patrick_doe@gmail.com</td>
        <td><i class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">Active</i></td>
        <td>05/10/2022</td>
        <td>
          <a href="#" class="text-sm py-1 px-2 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex items-center">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 mr-2 max-w-full border-1 border-cyan-200 bg-slate-300 dark:bg-slate-900 dark:border-slate-700" src="src/img/avatar/avatar11.jpg" alt="Avatar">Ajena Santos</td>
        <td>ajena_doe@gmail.com</td>
        <td><i class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">Active</i></td>
        <td>05/10/2022</td>
        <td>
          <a href="#" class="text-sm py-1 px-2 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex items-center">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 mr-2 max-w-full border-1 border-cyan-200 bg-slate-300 dark:bg-slate-900 dark:border-slate-700" src="src/img/avatar/avatar12.jpg" alt="Avatar">Beno alviras</td>
        <td>beno_doe@gmail.com</td>
        <td><i class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">Active</i></td>
        <td>05/10/2022</td>
        <td>
          <a href="#" class="text-sm py-1 px-2 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex items-center">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 mr-2 max-w-full border-1 border-cyan-200 bg-slate-300 dark:bg-slate-900 dark:border-slate-700" src="src/img/avatar/avatar13.jpg" alt="Avatar">Galiando</td>
        <td>galiando_doe@gmail.com</td>
        <td><i class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">Active</i></td>
        <td>05/10/2022</td>
        <td>
          <a href="#" class="text-sm py-1 px-2 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- select all -->
  <script type="text/javascript">
    const selectall = document.querySelector("#selectall");
    if ( selectall != null) {
      selectall.addEventListener("click", function(){
        if (document.querySelector("#selectall").checked == true) {
          var ele=document.querySelectorAll('.checkedall');  
          for(var i=0; i<ele.length; i++){  
              if(ele[i].type=='checkbox')  
                  ele[i].checked=true;  
          }  
        } else {
          var ele=document.querySelectorAll('.checkedall');  
          for(var i=0; i<ele.length; i++){  
              if(ele[i].type=='checkbox')  
                  ele[i].checked=false;  
                
          }  
        }
      });
    }            
  </script>  
</div>