Tables
Documentation and examples for opt-in styling of tables.
Default Table
| Title | Author | Views |
|---|---|---|
| Intro to CSS | Adam | 858 |
| A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design | Adam | 112 |
| Intro to JavaScript | Chris | 1,280 |
<!-- 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="px-4 py-3">Title</th>
<th class="px-4 py-3">Author</th>
<th class="px-4 py-3">Views</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-200 px-4 py-3 dark:border-gray-700 font-medium">Intro to CSS</td>
<td class="border border-gray-200 px-4 py-3 dark:border-gray-700 font-medium">Adam</td>
<td class="border border-gray-200 px-4 py-3 dark:border-gray-700 font-medium">858</td>
</tr>
<tr>
<td class="border border-gray-200 px-4 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 px-4 py-3 dark:border-gray-700 font-medium">Adam</td>
<td class="border border-gray-200 px-4 py-3 dark:border-gray-700 font-medium">112</td>
</tr>
<tr>
<td class="border border-gray-200 px-4 py-3 dark:border-gray-700 font-medium">Intro to JavaScript</td>
<td class="border border-gray-200 px-4 py-3 dark:border-gray-700 font-medium">Chris</td>
<td class="border border-gray-200 px-4 py-3 dark:border-gray-700 font-medium">1,280</td>
</tr>
</tbody>
</table>
Tables Bordered
| Title | Author | Views |
|---|---|---|
| Intro to CSS | Adam | 858 |
| A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design | Adam | 112 |
| Intro to JavaScript | Chris | 1,280 |
<table class="table-bordered w-full ltr:text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead>
<tr class="bg-gray-200 dark:bg-gray-900 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>
Table small and Border bottom
| Title | Author | Views |
|---|---|---|
| Intro to CSS | Adam | 858 |
| A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design | Adam | 112 |
| Intro to JavaScript | Chris | 1,280 |
<table class="table-sm table-bordered-bottom w-full ltr:text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead>
<tr class="bg-gray-200 dark:bg-gray-900 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>
Table with Sorter
| Title | Author | Views |
|---|---|---|
| Intro to CSS | Adam | 858 |
| A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design | Adam | 112 |
| Intro to JavaScript | Chris | 1,280 |
<table class="table-sorter table-bordered w-full ltr:text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead>
<tr class="bg-gray-200 dark:bg-gray-900 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>
Table small with minimal Sorter
<div class="hidden-header hidden-sort-after">
<table class="table-sorter table-sm text-sm table-bordered-bottom w-full ltr:text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead>
<tr class="bg-gray-200 dark:bg-gray-900 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>
Demo config available in src/js/demo.js function myTablesorter();