res_levis_frontend/assets/templates/Setting.html

<div class="h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">

   <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">

      <div>
         <span class="text-2xl text-[#008EED] leading-[80px]">{arguments:db}s</span>
      </div>


      <div role="alert" class="alert alert-info alert-soft hidden lg:flex">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            class="stroke-info h-6 w-6 shrink-0 stroke-[#008EED]">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
         </svg>
         <span class="text-[#008EED]" js-data="texts tables info {arguments:id}" js-text="test"
            js-do="{alert: 'test'}">{arguments:info}</span>
      </div>

      <div class="flex items-center gap-2">
         <label class="input input-primary w-[200px]">
            <span class="iconify lucide--search text-base-content/70 size-4.5 "></span>
            <input class="text-base placeholder:text-sm" type="search" x-model="search" @input="updateSearch"
               placeholder="Search" />
         </label>

         <div class="dropdown dropdown-bottom dropdown-end">
            <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
               <span class="iconify lucide--ellipsis-vertical size-4"></span>
            </div>

            <div
                  tabindex="0"
                  class="dropdown-content bg-base-100 rounded-box w-44 shadow">
                  <ul class="menu w-full">
                     <li class="update{arguments:db}" @click="updateData()">
                        <div>
                              <span
                                 class="iconify lucide--refresh-cw size-4"></span>
                              Refresh Data
                        </div>
                     </li>
                     <li>
                        <div>
                              <span
                                 class="iconify lucide--download size-4"></span>
                              Export
                        </div>
                     </li>
                  </ul>
            </div>

         </div>

         <button type="submit" class="btn btn-outline btn-primary" style="cursor: pointer;"
            onclick="js.part({'do':'{arguments:new}',arguments:{db:'{arguments:db}'}})">Add</button>

      </div>
   </div>

   <div class="flex w-full px-[30px]">

      <div
         class=" max-h-[calc(100vh-260px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">

         <div
            class="min-w-[480px] px-[20px] py-[20px] border-base-200 flex flex-wrap items-center justify-between gap-2">

            <div class="join border-solid border-1 border-[#008EED] rounded-md">
               <button class="btn btn-square btn-sm btn-outline border-base-300 join-item"
                  aria-label="Pagination controls" :disabled="!table.getCanPreviousPage()" @click="prevPage()">
                  <span class="iconify lucide--arrow-left"></span>
               </button>

               <input aria-label="Page number" min="1" :max="table.getPageCount()" :value="pageIndex + 1"
                  @input="setPageIndex($event.target.value - 1)"
                  class="input input-sm join-item w-10 text-center border-0" />

               <button class="btn btn-square btn-sm btn-outline border-base-300 join-item"
                  aria-label="Pagination controls" :disabled="!table.getCanNextPage()" @click="nextPage()">
                  <span class="iconify lucide--arrow-right"></span>
               </button>
            </div>

            <p class="text-base-content/70 text-sm max-md:hidden">
               <span class="text-base-content font-medium" x-text="`${start}–${end}`"></span>
               out of
               <span class="text-base-content font-medium" x-text="rowCount"></span>
            </p>

            <div class="flex items-center gap-2">
               <p class="text-base-content/70 text-sm max-md:hidden">
                  Per page
               </p>
               <select aria-label="Items per page" class="select select-sm w-16 border-solid border-1 border-[#008EED]"
                  @change="changePageSize(Number($event.target.value))">
                  <template x-for="size in pageSizes" :key="size">
                     <option :value="size" :selected="size === pageSize" x-text="size"></option>
                  </template>
               </select>
            </div>


         </div>

         <table class="table">
            <thead>
               <template x-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
                  <tr>
                     <template x-for="header in headerGroup.headers" :key="header.id">
                        <th class="text-[#008EED]" , x-show="!header.isPlaceholder"
                           x-text="flexRender(header.column.columnDef.header, header.getContext())"></th>
                     </template>
                  </tr>
               </template>
            </thead>

            <tbody>
               <template x-if="!visibleRows.length">
                  <tr>
                     <td :colspan="columns.length" class="h-24 text-center">
                        <p>
                           No results.
                           <span @click="clearFilters" class="text-primary cursor-pointer hover:underline">
                              Clear filters
                           </span>
                        </p>
                     </td>
                  </tr>
               </template>
               <template x-if="visibleRows.length">
                  <template x-for="row in visibleRows" :key="row.id">
                     <tr>
                        <template x-for="cell in getVisibleCells(row)" :key="cell.id">
                           <td>
                              <template x-if="cell.column.id === 'subject'">
                                 <div class="flex items-center gap-2">
                                    <div>
                                       <p class="leading-none font-medium" x-text="cell.row.original.subject"></p>
                                       <p class="text-base-content/70 mt-0.5 text-xs/none"
                                          x-text="cell.row.original.tracker"></p>
                                    </div>
                                 </div>
                              </template>

                              <template x-if="cell.column.id === 'id'">
                                 <span class="text-base-content/70 font-mono text-xs uppercase"
                                    x-text="cell.row.original.id"></span>
                              </template>

                              <template x-if="cell.column.id === 'name'">
                                 <div class="flex items-center gap-2">
                                    <div>
                                       <p class="leading-none font-medium" x-text="cell.row.original.name"></p>
                                       <p
                                                class="text-base-content/70 mt-0.5 text-xs/none"
                                                x-text="cell.row.original.role"></p>
                                    </div>
                                 </div>
                              </template>

                              <template x-if="cell.column.id === 'actions'">
                                 <div class="gap-2 text-right">
                                    <button aria-label="Show" class="saveButton btn btn-outline btn-primary"
                                       @click="viewRow(cell.row)">Open</button>
                                 </div>
                              </template>

                              <template
                                 x-if="!['id', 'name', 'status', 'model', 'ip', 'position', 'actions'].includes(cell.column.id)">
                                 <span
                                    x-html="cell.column.columnDef.cell ? cell.column.columnDef.cell(cell.getContext()) : cell.getValue()"></span>
                              </template>
                           </td>
                        </template>
                     </tr>
                  </template>
               </template>
            </tbody>
         </table>

      </div>

      <div
         class="post min-w-[400px] max-w-[600px] max-h-[calc(100vh-260px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
      </div>

   </div>

</div>