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 text-start 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 text-start 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 text-start 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

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
                      
                        <div class="hidden-header hidden-sort-after">
                        <table class="table-sorter table-sm text-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>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();