<!-- table with sorter -->
<table class="table-sorter table-bordered w-full text-start text-stone-500 dark:text-stone-400">
  <thead>
    <tr class="bg-stone-100 dark:bg-stone-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-start text-stone-500 dark:text-stone-400">
    <thead>
      <tr class="bg-stone-100 dark:bg-stone-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-start text-stone-500 dark:text-stone-400">
    <thead>
      <tr class="bg-stone-100 dark:bg-stone-800 dark:bg-opacity-40">
        <th data-sortable="false">
          <label class="flex pdskdmsdnjw">
            <input id="selectall" type="checkbox" name="checked-demo" value="1" class="checkedall form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-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 pdskdmsdnjw">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 me-2 max-w-full border-1 border-primary-200 bg-stone-300 dark:bg-stone-900 dark:border-stone-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-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex pdskdmsdnjw">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 me-2 max-w-full border-1 border-primary-200 bg-stone-300 dark:bg-stone-900 dark:border-stone-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-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex pdskdmsdnjw">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 me-2 max-w-full border-1 border-primary-200 bg-stone-300 dark:bg-stone-900 dark:border-stone-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-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex pdskdmsdnjw">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 me-2 max-w-full border-1 border-primary-200 bg-stone-300 dark:bg-stone-900 dark:border-stone-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-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex pdskdmsdnjw">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 me-2 max-w-full border-1 border-primary-200 bg-stone-300 dark:bg-stone-900 dark:border-stone-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-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex pdskdmsdnjw">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 me-2 max-w-full border-1 border-primary-200 bg-stone-300 dark:bg-stone-900 dark:border-stone-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-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex pdskdmsdnjw">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 me-2 max-w-full border-1 border-primary-200 bg-stone-300 dark:bg-stone-900 dark:border-stone-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-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex pdskdmsdnjw">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 me-2 max-w-full border-1 border-primary-200 bg-stone-300 dark:bg-stone-900 dark:border-stone-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-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex pdskdmsdnjw">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 me-2 max-w-full border-1 border-primary-200 bg-stone-300 dark:bg-stone-900 dark:border-stone-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-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex pdskdmsdnjw">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 me-2 max-w-full border-1 border-primary-200 bg-stone-300 dark:bg-stone-900 dark:border-stone-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-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-none focus:ring-0">
            <i class="bx bx-edit text-lg"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <label class="flex pdskdmsdnjw">
            <input type="checkbox" name="checkedall" value="1" class="checkedall form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded focus:outline-none">
            <span class="hidden">Checkbox</span>
          </label>
        </td>
        <td><img class="inline-block rounded-full shadow w-8 h-8 me-2 max-w-full border-1 border-primary-200 bg-stone-300 dark:bg-stone-900 dark:border-stone-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-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-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>