# Tables

Documentation and examples for opt-in styling of tables.

### Default (less border)

| Customer | Email | Status | Group | Spend | Action
--- | --- | --- | --- | --- | --- | ---
| John Smith | john.smith@example.com | Active | military_techGold | $132 | edit
| Jane Doe | jane.doe@example.com | Active | military_techPlatinum | $442 | edit
| Michael Brown | michael.brown@example.com | Active | military_techSilver | $54 | edit
| Sarah Johnson | sarah.johnson@example.com | Active | military_techGold | $154 | edit

                    <!-- Table default -->
                    <table class="table-default table-hover">
                      <thead>
                        <tr>
                          <th>
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_x" id="checkall" class="w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </th>
                          <th>Customer</th>
                          <th>Email</th>
                          <th>Status</th>
                          <th>Group</th>
                          <th>Spend</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
                          <td class="!px-0">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </td>
                          <td>John Smith</td>
                          <td>
                            <a href="mailto:john.smith@example.com">john.smith@example.com</a>
                          </td>
                          <td>
                            <div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
                          </td>
                          <td>
                            <div class="flex flex-row items-center gap-1">
                              <span class="material-symbols-outlined !text-base text-yellow-500">military_tech</span>Gold
                            </div>
                          </td>
                          <td>$132</td>
                          <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
                        </tr>
                        <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
                          <td class="!px-0">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </td>
                          <td>Jane Doe</td>
                          <td>
                            <a href="mailto:jane.doe@example.com">jane.doe@example.com</a>
                          </td>
                          <td>
                            <div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
                          </td>
                          <td>
                            <div class="flex flex-row items-center gap-1">
                              <span class="material-symbols-outlined !text-base text-blue-500">military_tech</span>Platinum
                            </div>
                          </td>
                          <td>$442</td>
                          <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
                        </tr>
                        <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
                          <td class="!px-0">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </td>
                          <td>Michael Brown</td>
                          <td>
                            <a href="mailto:michael.brown@example.com">michael.brown@example.com</a>
                          </td>
                          <td>
                            <div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
                          </td>
                          <td>
                            <div class="flex flex-row items-center gap-1">
                              <span class="material-symbols-outlined !text-base text-gray-500">military_tech</span>Silver
                            </div>
                          </td>
                          <td>$54</td>
                          <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
                        </tr>
                        <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
                          <td class="!px-0">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </td>
                          <td>Sarah Johnson</td>
                          <td>
                            <a href="mailto:sarah.johnson@example.com">sarah.johnson@example.com</a>
                          </td>
                          <td>
                            <div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
                          </td>
                          <td>
                            <div class="flex flex-row items-center gap-1">
                              <span class="material-symbols-outlined !text-base text-yellow-500">military_tech</span>Gold
                            </div>
                          </td>
                          <td>$154</td>
                          <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
                        </tr>
                      </tbody>
                    </table>

### Bordered Bottom

|  | Company | Size | Email | Address | Action
--- | --- | --- | --- | --- | --- | ---
| star | #### Acme Inc. Manufacturing | Large | acme@example.com | Roma | edit
| star | #### Bazara Healthcare | Small | bazara@example.com | Madrid | edit
| star | #### Green Inc. Agriculture | Large | green@example.com | Jakarta | edit
| star | #### Zloo Corp Technology | Medium | zloo@example.com | Barcelona | edit

                    <!-- Table bordered bottom -->
                    <table class="table-bordered-bottom table-hover">
                      <thead>
                        <tr>
                          <th>
                            <div class="flex items-center justify-center">
                              <input id="checkall" type="checkbox" name="checked-a" class="w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </th>
                          <th class="!px-0"></th>
                          <th>Company</th>
                          <th>Size</th>
                          <th>Email</th>
                          <th>Address</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
                          <td class="!px-0">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_a" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </td>
                          <td class="!px-0">
                            <div class="hover:text-orange-500">
                              <input id="check_01" class="hidden peer toggle-star" type="checkbox" name="check_01" checked="">
                              <label for="check_01" class="peer-checked:text-orange-500 hover:cursor-pointer  starfill">
                                <span class="material-symbols-outlined">star</span>
                              </label>
                            </div>
                          </td>
                          <td>
                            <div class="flex items-center gap-3">
                              <img src="../src/img/brand/brand.png" class="w-8 h-8 rounded" alt="title">
                              <div class="flex flex-col">
                                <h4 class="font-semibold">Acme Inc.</h4>
                                <span class="body-sm text-gray-500">Manufacturing</span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div class="inline-block leading-tight text-center label-md py-1 px-3 text-green-800 bg-green-100 dark:text-green-100 dark:bg-green-800 rounded-full">Large</div>
                          </td>
                          <td><a href="mailto:acme@example.com" target="_blank">acme@example.com</a></td>
                          <td>Roma</td>
                          <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
                        </tr>
                        <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
                          <td class="!px-0">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_c" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </td>
                          <td class="!px-0">
                            <div class="hover:text-orange-500">
                              <input id="check_03" class="hidden peer toggle-star" type="checkbox" name="check_03" checked="">
                              <label for="check_03" class="peer-checked:text-orange-500 hover:cursor-pointer  starfill">
                                <span class="material-symbols-outlined">star</span>
                              </label>
                            </div>
                          </td>
                          <td>
                            <div class="flex items-center gap-3">
                              <img src="../src/img/brand/brand.png" class="w-8 h-8 rounded" alt="title">
                              <div class="flex flex-col">
                                <h4 class="font-semibold">Bazara</h4>
                                <span class="body-sm text-gray-500">Healthcare</span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div class="inline-block leading-tight text-center label-md py-1 px-3 text-yellow-800 bg-yellow-100 dark:text-yellow-100 dark:bg-yellow-800 rounded-full">Small</div>
                          </td>
                          <td><a href="mailto:bazara@example.com" target="_blank">bazara@example.com</a></td>
                          <td>Madrid</td>
                          <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
                        </tr>
                        <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
                          <td class="!px-0">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_d" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </td>
                          <td class="!px-0">
                            <div class="hover:text-orange-500">
                              <input id="check_04" class="hidden peer toggle-star" type="checkbox" name="check_04" checked="">
                              <label for="check_04" class="peer-checked:text-orange-500 hover:cursor-pointer  starfill">
                                <span class="material-symbols-outlined">star</span>
                              </label>
                            </div>
                          </td>
                          <td>
                            <div class="flex items-center gap-3">
                              <img src="../src/img/brand/brand.png" class="w-8 h-8 rounded" alt="title">
                              <div class="flex flex-col">
                                <h4 class="font-semibold">Green Inc.</h4>
                                <span class="body-sm text-gray-500">Agriculture</span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div class="inline-block leading-tight text-center label-md py-1 px-3 text-green-800 bg-green-100 dark:text-green-100 dark:bg-green-800 rounded-full">Large</div>
                          </td>
                          <td><a href="mailto:green@example.com" target="_blank">green@example.com</a></td>
                          <td>Jakarta</td>
                          <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
                        </tr>
                        <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
                          <td class="!px-0">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_e" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </td>
                          <td class="!px-0">
                            <div class="hover:text-orange-500">
                              <input id="check_05" class="hidden peer toggle-star" type="checkbox" name="check_05">
                              <label for="check_05" class="peer-checked:text-orange-500 hover:cursor-pointer  starfill">
                                <span class="material-symbols-outlined">star</span>
                              </label>
                            </div>
                          </td>
                          <td>
                            <div class="flex items-center gap-3">
                              <img src="../src/img/brand/brand.png" class="w-8 h-8 rounded" alt="title">
                              <div class="flex flex-col">
                                <h4 class="font-semibold">Zloo Corp</h4>
                                <span class="body-sm text-gray-500">Technology</span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div class="inline-block leading-tight text-center label-md py-1 px-3 text-primary-800 bg-primary-100 dark:text-primary-100 dark:bg-primary-800 rounded-full">Medium</div>
                          </td>
                          <td><a href="mailto:zloo@example.com" target="_blank">zloo@example.com</a></td>
                          <td>Barcelona</td>
                          <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
                        </tr>
                      </tbody>
                    </table>

### Table with sorter

| Customer | Email | Status | Group | Spend | Action
--- | --- | --- | --- | --- | --- | ---
| John Smith | john.smith@example.com | Active | military_techGold | $132 | edit
| Jane Doe | jane.doe@example.com | Active | military_techPlatinum | $442 | edit
| Michael Brown | michael.brown@example.com | Active | military_techSilver | $54 | edit
| Sarah Johnson | sarah.johnson@example.com | Active | military_techGold | $154 | edit

                    <!-- Table default -->
                    <table class="table-sorter table-default table-hover">
                      <thead>
                        <tr>
                          <th data-sortable="false">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_x" id="checkall" class="w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </th>
                          <th data-sortable="false">Customer</th>
                          <th data-sortable="false">Email</th>
                          <th>Status</th>
                          <th>Group</th>
                          <th>Spend</th>
                          <th data-sortable="false">Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
                          <td class="!px-0">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </td>
                          <td>John Smith</td>
                          <td>
                            <a href="mailto:john.smith@example.com">john.smith@example.com</a>
                          </td>
                          <td>
                            <div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
                          </td>
                          <td>
                            <div class="flex flex-row items-center gap-1">
                              <span class="material-symbols-outlined !text-base text-yellow-500">military_tech</span>Gold
                            </div>
                          </td>
                          <td>$132</td>
                          <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
                        </tr>
                        <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
                          <td class="!px-0">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </td>
                          <td>Jane Doe</td>
                          <td>
                            <a href="mailto:jane.doe@example.com">jane.doe@example.com</a>
                          </td>
                          <td>
                            <div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
                          </td>
                          <td>
                            <div class="flex flex-row items-center gap-1">
                              <span class="material-symbols-outlined !text-base text-blue-500">military_tech</span>Platinum
                            </div>
                          </td>
                          <td>$442</td>
                          <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
                        </tr>
                        <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
                          <td class="!px-0">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </td>
                          <td>Michael Brown</td>
                          <td>
                            <a href="mailto:michael.brown@example.com">michael.brown@example.com</a>
                          </td>
                          <td>
                            <div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
                          </td>
                          <td>
                            <div class="flex flex-row items-center gap-1">
                              <span class="material-symbols-outlined !text-base text-gray-500">military_tech</span>Silver
                            </div>
                          </td>
                          <td>$54</td>
                          <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
                        </tr>
                        <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
                          <td class="!px-0">
                            <div class="flex items-center justify-center">
                              <input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
                            </div>
                          </td>
                          <td>Sarah Johnson</td>
                          <td>
                            <a href="mailto:sarah.johnson@example.com">sarah.johnson@example.com</a>
                          </td>
                          <td>
                            <div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
                          </td>
                          <td>
                            <div class="flex flex-row items-center gap-1">
                              <span class="material-symbols-outlined !text-base text-yellow-500">military_tech</span>Gold
                            </div>
                          </td>
                          <td>$154</td>
                          <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
                        </tr>
                      </tbody>
                    </table>

                    <!-- table sorter -->
                    <script src="../vendors/simple-datatables/dist/umd/simple-datatables.js"></script><!--sort table-->
                    <script>
                    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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts