<!-- table -->
<table class="table-auto w-full">
  <thead class="bg-gray-100 border-t border-l border-r dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
    <tr>
      <th class="uajskeiolksb py-3 min-w-56">Title</th>
      <th class="uajskeiolksb py-3">Author</th>
      <th class="uajskeiolksb py-3">Views</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-200 uajskeiolksb py-3 dark:border-gray-700 font-medium">Intro to CSS</td>
      <td class="border border-gray-200 uajskeiolksb py-3 dark:border-gray-700 font-medium">Adam</td>
      <td class="border border-gray-200 uajskeiolksb py-3 dark:border-gray-700 font-medium">858</td>
    </tr>
    <tr>
      <td class="border border-gray-200 uajskeiolksb py-3 dark:border-gray-700 font-medium">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
      <td class="border border-gray-200 uajskeiolksb py-3 dark:border-gray-700 font-medium">Adam</td>
      <td class="border border-gray-200 uajskeiolksb py-3 dark:border-gray-700 font-medium">112</td>
    </tr>
    <tr>
      <td class="border border-gray-200 uajskeiolksb py-3 dark:border-gray-700 font-medium">Intro to JavaScript</td>
      <td class="border border-gray-200 uajskeiolksb py-3 dark:border-gray-700 font-medium">Chris</td>
      <td class="border border-gray-200 uajskeiolksb py-3 dark:border-gray-700 font-medium">1,280</td>
    </tr>
  </tbody>
</table>
                      
                    

                      
<table class="table-bordered w-full text-start text-gray-500 dark:text-gray-400">
  <thead>
    <tr class="bg-gray-200 dark:bg-gray-900 dark:bg-opacity-40">
      <th class="min-w-56">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>
                      
                    

                      
<table class="table-sm table-bordered-bottom w-full text-start text-gray-500 dark:text-gray-400">
  <thead>
    <tr class="bg-gray-200 dark:bg-gray-900 dark:bg-opacity-40">
      <th class="min-w-56">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>
                      
                    

                      
<table class="table-sorter table-bordered w-full text-start text-gray-500 dark:text-gray-400">
  <thead>
    <tr class="bg-gray-200 dark:bg-gray-900 dark:bg-opacity-40">
      <th class="min-w-56">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>

<!-- table sorter -->
<script src="../vendors/simple-datatables/dist/umd/simple-datatables.js"></script>
<script type="text/javascript">
  // Tables sorter
const myTablesorter = function () {
  const els = document.querySelectorAll(".table-sorter");
  if ( els != null) {
    for( let i = 0; i < els.length; i++)
    {
      const table = new simpleDatatables.DataTable((els[i]));
    }
  };
}
myTablesorter();
</script>