adminforth 2.26.0-test.5 → 2.26.0-test.7

package/dist/spa/src/components/ResourceListTable.vue

@@ -1,15 +1,22 @@
 <template>
   <!-- table -->
-  <div class="relative shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-auto "
+  <div 
+    class="relative shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-auto "
     :class="{'rounded-default': !noRoundings}"
+    :style="isVirtualScrollEnabled ? { maxHeight: `${containerHeight}px` } : {}"
+    @scroll="handleScroll"
+    ref="containerRef"
   >
     <!-- skelet loader -->
-    <div role="status" v-if="!resource || !resource.columns"
-        class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
-        <div role="status" class="max-w-sm animate-pulse">
-            <div class="h-2 bg-lightListSkeletLoader rounded-full dark:bg-darkListSkeletLoader max-w-[360px]"></div>
-        </div>      
+    <div 
+      role="status" v-if="!resource || !resource.columns"
+      class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700"
+    >
+      <div role="status" class="max-w-sm animate-pulse">
+        <div class="h-2 bg-lightListSkeletLoader rounded-full dark:bg-darkListSkeletLoader max-w-[360px]"></div>
+      </div>      
     </div>
+
     <table v-else class="w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default">
 
       <tbody>
@@ -27,27 +34,33 @@
 
           <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="list-table-header-cell px-2 md:px-3 lg:px-6 py-3" :class="{'sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading': c.listSticky}">
           
-            <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
-                class="flex items-center " :class="{'cursor-pointer':c.sortable}">
+            <div 
+              @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
+              class="flex items-center " :class="{'cursor-pointer':c.sortable}"
+            >
               {{ c.label }}
 
               <div v-if="c.sortable">
-                <svg v-if="ascArr.includes(c.name) || descArr.includes(c.name)" class="w-3 h-3 ms-1.5"
-                    fill='currentColor'
-                    :class="{'rotate-180':descArr.includes(c.name)}" viewBox="0 0 24 24">
-                  <path
-                    d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 0z"/>
+                <svg 
+                  v-if="ascArr.includes(c.name) || descArr.includes(c.name)" class="w-3 h-3 ms-1.5"
+                  fill='currentColor'
+                  :class="{'rotate-180':descArr.includes(c.name)}" viewBox="0 0 24 24"
+                >
+                  <path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 0z"/>
                 </svg>
-                <svg v-else class="w-3 h-3 ms-1.5 opacity-30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-                    fill='currentColor'
-                    viewBox="0 0 24 24">
-                  <path
-                    d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
+                <svg 
+                  v-else class="w-3 h-3 ms-1.5 opacity-30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                  fill='currentColor'
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
                 </svg>
               </div>
+
               <span
                 class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-                v-if="sort.findIndex((s: any) => s.field === c.name) !== -1 && sort?.length > 1">
+                v-if="sort.findIndex((s: any) => s.field === c.name) !== -1 && sort?.length > 1"
+              >
                 {{ sort.findIndex((s: any) => s.field === c.name) + 1 }}
               </span>
 
@@ -72,40 +85,45 @@
         
         <tr v-else-if="rows.length === 0" class="bg-lightListTable dark:bg-darkListTable dark:border-darkListTableBorder">
           <td :colspan="resource?.columns.length + 2">
-
-            <div id="toast-simple"
-                class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 divide-x rtl:divide-x-reverse divide-gray-200  dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800"
-                role="alert">
+            <div 
+              id="toast-simple"
+              class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 divide-x rtl:divide-x-reverse divide-gray-200  dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800"
+              role="alert"
+            >
               <IconInboxOutline class="w-6 h-6 text-gray-500 dark:text-gray-400"/>
               <div class="ps-4 text-sm font-normal">{{ $t('No items here yet') }}</div>
             </div>
-
           </td>
         </tr>
 
-         <component
-            v-else
-            v-for="(row, rowI) in rows"
-            :is="tableRowReplaceInjection ? getCustomComponent(tableRowReplaceInjection) : 'tr'"
-            :key="`row_${row._primaryKeyValue}`"
-            :record="row"
-            :resource="resource"
-            :adminUser="coreStore.adminUser"
-            :meta="tableRowReplaceInjection ? tableRowReplaceInjection.meta : undefined"
-            @click="onClick($event, row)"
-            ref="rowRefs"
-            class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
-            :class="{'border-b': rowI !== rows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
-         >
-        <td class="w-4 p-4 cursor-default sticky-column bg-lightListTable dark:bg-darkListTable" @click="(e)=>e.stopPropagation()">
-          <Checkbox
-            :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
-            @change="(e: any)=>{addToCheckedValues(row._primaryKeyValue)}"
-            @click="(e: any)=>e.stopPropagation()"
-          >
-            <span class="sr-only">{{ $t('checkbox') }}</span>
-          </Checkbox>
-        </td>
+        <!-- Top spacer(virtual scroll) -->
+        <tr v-if="isVirtualScrollEnabled && spacerHeight > 0">
+          <td :colspan="resource?.columns.length + 2" :style="{ height: `${spacerHeight}px` }"></td>
+        </tr>
+
+        <component
+          v-for="(row, rowI) in rowsToRender"
+          :is="tableRowReplaceInjection ? getCustomComponent(formatComponent(tableRowReplaceInjection)) : 'tr'"
+          :key="`row_${row._primaryKeyValue}`"
+          :record="row"
+          :resource="resource"
+          :adminUser="coreStore.adminUser"
+          :meta="tableRowReplaceInjection ? formatComponent(tableRowReplaceInjection).meta : undefined"
+          @click="onClick($event, row)"
+          ref="rowRefs"
+          class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
+          :class="{'border-b': rowI !== rowsToRender.length - 1, 'cursor-pointer': row._clickUrl !== null}"
+          @mounted="(el: any) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
+        >
+          <td class="w-4 p-4 cursor-default sticky-column bg-lightListTable dark:bg-darkListTable" @click="(e)=>e.stopPropagation()">
+            <Checkbox
+              :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
+              @change="(e: any)=>{addToCheckedValues(row._primaryKeyValue)}"
+              @click="(e: any)=>e.stopPropagation()"
+            >
+              <span class="sr-only">{{ $t('checkbox') }}</span>
+            </Checkbox>
+          </td>
 
           <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4" :class="{'sticky-column bg-lightListTable dark:bg-darkListTable': c.listSticky}">
             <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
@@ -130,7 +148,6 @@
                       primaryKey: row._primaryKeyValue,
                     }
                   }"
-
                 >
                   <IconEyeSolid class="af-show-icon w-5 h-5 me-2"/>
                 </RouterLink>
@@ -186,17 +203,17 @@
                   :key="action.id"
                 >
                     <component
-                      :is="action.customComponent ? getCustomComponent(action.customComponent) : CallActionWrapper"
-                      :meta="action.customComponent?.meta"
+                      v-if="action.customComponent"
+                      :is="action.customComponent ? getCustomComponent(formatComponent(action.customComponent)) : CallActionWrapper"
+                      :meta="formatComponent(action.customComponent).meta"
                       :row="row"
                       :resource="resource"
-                      :adminUser="adminUser"
-                      @callAction="(payload? : Object) => startCustomAction(action.id, row, payload)"
+                      :adminUser="coreStore.adminUser"
+                      @callAction="(payload? : Object) => startCustomAction(action.id as string | number, row, payload)"
                     >
                       <button
                         type="button"
                         class="border border-gray-300 dark:border-gray-700 dark:border-opacity-0 border-opacity-0 hover:border-opacity-100 dark:hover:border-opacity-100 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
-                        :disabled="rowActionLoadingStates?.[action.id]"
                       >
                         <component
                           v-if="action.icon"
@@ -219,12 +236,18 @@
                 :deleteRecord="deleteRecord"
                 :resourceId="resource.resourceId"
                 :startCustomAction="startCustomAction"
-                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems"
+                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems ?? []"
               />
             </div>
             
           </td>
-         </component>
+        </component>
+        <!-- Bottom spacer(virtual scroll) -->
+        <tr v-if="isVirtualScrollEnabled && totalHeight > 0">
+          <td :colspan="resource?.columns.length + 2"
+              :style="{ height: `${Math.max(0, totalHeight - (endIndex + 1) * (props.itemHeight || 52.5))}px` }">
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
@@ -236,85 +259,83 @@
     <div class="af-pagination-buttons-container inline-flex "
       v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
     >
-        <!-- Buttons -->
-        <button
-          class="af-pagination-prev-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0 rounded-s border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
-          @click="page--; pageInput = page.toString();" :disabled="page <= 1">
-          <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
-              viewBox="0 0 14 10">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M13 5H1m0 0 4 4M1 5l4-4"/>
-          </svg>
-          <span class="hidden sm:inline">
-            {{ $t('Prev') }}
-          </span>
-        </button>
-        <button
-          class="af-pagination-first-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
-          @click="page = 1; pageInput = page.toString();" :disabled="page <= 1">
-          <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
-          1
-        </button>
-        <input
-          type="text"
-          v-model="pageInput"
-          :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
-          class="af-pagination-input min-w-10 outline-none inline-block py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
-          @keydown="onPageKeydown($event)"
-          @blur="validatePageInput()"
-        />
-
-        <button
-          class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
-          @click="page = totalPages; pageInput = page.toString();" :disabled="page >= totalPages">
-          {{ totalPages }}
-
-          <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
-        </button>
-        <button
-          class="af-pagination-next-button  flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0 rounded-e border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
-          @click="page++; pageInput = page.toString();" :disabled="page >= totalPages">
-          <span class="hidden sm:inline">{{ $t('Next') }}</span>
-          <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
-              viewBox="0 0 14 10">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M1 5h12m0 0L9 1m4 4L9 9"/>
-          </svg>
-        </button>
+      <!-- Buttons -->
+      <button
+        class="af-pagination-prev-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0 rounded-s border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        @click="page--; pageInput = page.toString();" 
+        :disabled="page <= 1"
+      >
+        <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/>
+        </svg>
+        <span class="hidden sm:inline">
+          {{ $t('Prev') }}
+        </span>
+      </button>
+      <button
+        class="af-pagination-first-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        @click="page = 1; 
+        pageInput = page.toString();" 
+        :disabled="page <= 1"
+      >
+        1
+      </button>
+      <input
+        type="text"
+        v-model="pageInput"
+        :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
+        class="af-pagination-input min-w-10 outline-none inline-block py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
+        @keydown="onPageKeydown($event)"
+        @blur="validatePageInput()"
+      />
+
+      <button
+        class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        @click="page = totalPages; pageInput = page.toString();" :disabled="page >= totalPages">
+        {{ totalPages }}
+      </button>
+      <button
+        class="af-pagination-next-button  flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0 rounded-e border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        @click="page++; pageInput = page.toString();" :disabled="page >= totalPages">
+        <span class="hidden sm:inline">{{ $t('Next') }}</span>
+        <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+        </svg>
+      </button>
     </div>
 
     <!-- Help text -->
     <span class="ml-4 text-sm text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText">
-        <span v-if="((((page || 1) - 1) * pageSize + 1 > totalRows) && totalRows > 0)">{{ $t('Wrong Page') }} </span>
-        <template v-else-if="resource && totalRows > 0">
-          
-          <span class="af-pagination-info hidden sm:inline">
-            <i18n-t keypath="Showing {from} to {to} of {total} Entries" tag="p"  >
-              <template v-slot:from>
-                <strong>{{ from }}</strong>
-              </template>
-              <template v-slot:to>
-                <strong>{{ to }}</strong>
-              </template>
-              <template v-slot:total>
-                <strong>{{ totalRows }}</strong>
-              </template>
-            </i18n-t>
-          </span>
-          <span class="sm:hidden">
-            <i18n-t keypath="{from} - {to} of {total}" tag="p"  >
-              <template v-slot:from>
-                <strong>{{ from }}</strong>
-              </template>
-              <template v-slot:to>
-                <strong>{{ to }}</strong>
-              </template>
-              <template v-slot:total>
-                <strong>{{ totalRows }}</strong>
-              </template>
-            </i18n-t>
-          </span> 
-        </template>
+      <span v-if="((((page || 1) - 1) * pageSize + 1 > totalRows) && totalRows > 0)">{{ $t('Wrong Page') }} </span>
+      <template v-else-if="resource && totalRows > 0">
+        
+        <span class="af-pagination-info hidden sm:inline">
+          <i18n-t keypath="Showing {from} to {to} of {total} Entries" tag="p"  >
+            <template v-slot:from>
+              <strong>{{ from }}</strong>
+            </template>
+            <template v-slot:to>
+              <strong>{{ to }}</strong>
+            </template>
+            <template v-slot:total>
+              <strong>{{ totalRows }}</strong>
+            </template>
+          </i18n-t>
+        </span>
+        <span class="sm:hidden">
+          <i18n-t keypath="{from} - {to} of {total}" tag="p"  >
+            <template v-slot:from>
+              <strong>{{ from }}</strong>
+            </template>
+            <template v-slot:to>
+              <strong>{{ to }}</strong>
+            </template>
+            <template v-slot:total>
+              <strong>{{ totalRows }}</strong>
+            </template>
+          </i18n-t>
+        </span> 
+      </template>
     </span>
   </div>
 </template>
@@ -326,7 +347,7 @@ import { computed, onMounted, ref, watch, useTemplateRef, nextTick, type Ref } f
 import { callAdminForthApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
 import ValueRenderer from '@/components/ValueRenderer.vue';
-import { getCustomComponent } from '@/utils';
+import { getCustomComponent, formatComponent } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
@@ -339,7 +360,7 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull, AdminForthComponentDeclaration } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
@@ -359,10 +380,23 @@ const props = defineProps<{
   noRoundings?: boolean,
   customActionsInjection?: any[],
   tableBodyStartInjection?: any[],
-  customActionIconsThreeDotsMenuItems?: any[]
-  tableRowReplaceInjection?: AdminForthComponentDeclarationFull,
+  containerHeight?: number,
+  itemHeight?: number,
+  bufferSize?: number,
+  customActionIconsThreeDotsMenuItems?: AdminForthComponentDeclaration[]
+  tableRowReplaceInjection?: AdminForthComponentDeclaration,
+  isVirtualScrollEnabled: boolean
 }>();
 
+//select between all rows or rows, that should be rendered in virtual scroll
+const rowsToRender = computed(() => {
+  if (!props.isVirtualScrollEnabled) {
+    return props.rows || [];
+  } else {
+    return visibleRows.value;
+  }
+});
+
 // emits, update page
 const emits = defineEmits([
   'update:page',
@@ -380,7 +414,7 @@ const sort: Ref<Array<{field: string, direction: string}>> = ref([]);
 const showListActionsThreeDots = computed(() => {
   return  props.resource?.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) // show if any action is set to show in three dots menu
     || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) // or if there are custom action icons for three dots menu
-    || !props.resource?.options.baseActionsAsQuickIcons // or if there is no baseActionsAsQuickIcons
+    || !props.resource?.options?.baseActionsAsQuickIcons // or if there is no baseActionsAsQuickIcons
     || (props.resource?.options.baseActionsAsQuickIcons && props.resource?.options.baseActionsAsQuickIcons.length < 3) // if there all 3 base actions are shown as quick icons - hide three dots icon
 })
 
@@ -575,7 +609,7 @@ async function deleteRecord(row: any) {
 
 const actionLoadingStates = ref<Record<string | number, boolean>>({});
 
-async function startCustomAction(actionId: string, row: any, extraData: Record<string, any> = {}) {
+async function startCustomAction(actionId: string | number, row: any, extraData: Record<string, any> = {}) {
 
   actionLoadingStates.value[actionId] = true;
 
@@ -628,6 +662,119 @@ function validatePageInput() {
   page.value = validPage;
   pageInput.value = validPage.toString();
 }
+/*
+*___________________________________________________________________
+*                                                                   |
+*                 Virtual Scroll Implementation                     |
+*___________________________________________________________________|
+*/
+// Add throttle utility
+const throttle = (fn: Function, delay: number) => { 
+  let lastCall = 0;
+  return (...args: any[]) => {
+    const now = Date.now();
+    if (now - lastCall >= delay) {
+      lastCall = now;
+      fn(...args);
+    }
+  };
+};
+// Virtual scroll state
+const containerRef = ref<HTMLElement | null>(null);
+const scrollTop = ref(0);
+const visibleRows = ref<any[]>([]);
+const startIndex = ref(0);
+const endIndex = ref(0);
+const totalHeight = ref(0);
+const spacerHeight = ref(0);
+const rowHeightsMap = ref<{[key: string]: number}>({});
+const rowPositions = ref<number[]>([]);
+// Calculate row positions based on heights
+const calculateRowPositions = () => {
+  if (!props.rows) return;
+  
+  let currentPosition = 0;
+  rowPositions.value = props.rows.map((row) => {
+    const height = rowHeightsMap.value[`row_${row._primaryKeyValue}`] || props.itemHeight || 52.5;
+    const position = currentPosition;
+    currentPosition += height;
+    return position;
+  });
+  totalHeight.value = currentPosition;
+};
+// Calculate visible rows based on scroll position
+const calculateVisibleRows = () => {
+  if (!props.rows?.length) {
+    visibleRows.value = props.rows || [];
+    return;
+  }
+  const buffer = props.bufferSize || 5;
+  const containerHeight = props.containerHeight || 900;
+  
+  // For single item or small datasets, show all rows
+  if (props.rows.length <= buffer * 2 + 1) {
+    startIndex.value = 0;
+    endIndex.value = props.rows.length - 1;
+    visibleRows.value = props.rows;
+    spacerHeight.value = 0;
+    return;
+  }
+  
+  // Binary search for start index
+  let low = 0;
+  let high = rowPositions.value.length - 1;
+  const targetPosition = scrollTop.value;
+  
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    if (rowPositions.value[mid] <= targetPosition) {
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  
+  const newStartIndex = Math.max(0, low - 1 - buffer);
+  const newEndIndex = Math.min(
+    props.rows.length - 1,
+    newStartIndex + Math.ceil(containerHeight / (props.itemHeight || 52.5)) + buffer * 2
+  );
+  // Ensure at least one row is visible
+  if (newEndIndex < newStartIndex) {
+    startIndex.value = 0;
+    endIndex.value = Math.min(props.rows.length - 1, Math.ceil(containerHeight / (props.itemHeight || 52.5)));
+  } else {
+    startIndex.value = newStartIndex;
+    endIndex.value = newEndIndex;
+  }
+  
+  visibleRows.value = props.rows.slice(startIndex.value, endIndex.value + 1);
+  spacerHeight.value = startIndex.value > 0 ? rowPositions.value[startIndex.value - 1] : 0;
+};
+// Throttled scroll handler
+const handleScroll = throttle((e: Event) => {
+  if (!props.isVirtualScrollEnabled) return;
+  const target = e.target as HTMLElement;
+  scrollTop.value = target.scrollTop;
+  calculateVisibleRows();
+}, 16);
+// Update row height when it changes
+const updateRowHeight = (rowId: string, height: number) => {
+  if (!props.isVirtualScrollEnabled) return;
+  if (rowHeightsMap.value[rowId] !== height) {
+    rowHeightsMap.value[rowId] = height;
+    calculateRowPositions();
+    calculateVisibleRows();
+  }
+};
+// Watch for changes in rows
+watch(() => props.rows, () => {
+  if (props.rows) {
+    calculateRowPositions();
+    calculateVisibleRows();
+  }
+}, { immediate: true });
+
 
 </script>
 

package/dist/spa/src/components/Sidebar.vue

@@ -52,7 +52,7 @@
         </div>
       </div>
 
-     <div v-if="coreStore.config.defaultUserExists && !isLocalhost" class="p-4 mb-4 text-white rounded-lg bg-red-700/80 fill-white text-sm"> 
+     <div v-if="coreStore?.config?.defaultUserExists && !isLocalhost" class="p-4 mb-4 text-white rounded-lg bg-red-700/80 fill-white text-sm"> 
       <IconExclamationCircleOutline class="inline-block align-text-bottom mr-0,5 w-5 h-5" />
       Default user <strong>"adminforth"</strong> detected. Delete it and create your own account.
     </div>

package/dist/spa/src/components/ThreeDotsMenu.vue

@@ -1,5 +1,5 @@
 <template >
-  <div class="relative" v-if="threeDotsDropdownItems?.length || customActions?.length || (bulkActions?.some((action: AdminForthBulkActionCommon) => action.showInThreeDotsDropdown))">
+  <div class="relative" v-if="threeDotsDropdownItems?.length || customActions?.length || (bulkActions?.some((action: AdminForthBulkActionFront) => action.showInThreeDotsDropdown))">
     <button 
       ref="buttonTriggerRef"
       @click="toggleDropdownVisibility"
@@ -46,11 +46,12 @@
           <li v-for="action in customActions" :key="action.id">
             <div class="wrapper"> 
               <component
-                :is="(action.customComponent && getCustomComponent(action.customComponent)) || CallActionWrapper"
-                :meta="action.customComponent?.meta"
+                v-if="action.customComponent"
+                :is="(action.customComponent && getCustomComponent(formatComponent(action.customComponent))) || CallActionWrapper"
+                :meta="formatComponent(action.customComponent).meta"
                 @callAction="(payload? : Object) => handleActionClick(action, payload)"
               >
-                <a href="#" @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
+                <a @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
                   <div class="flex items-center gap-2">
                     <component 
                       v-if="action.icon" 
@@ -64,7 +65,7 @@
             </div>
           </li>
           <li v-for="action in (bulkActions ?? []).filter(a => a.showInThreeDotsDropdown)" :key="action.id">
-            <a href="#" @click.prevent="startBulkAction(action.id)" 
+            <a @click.prevent="startBulkAction(action.id)" 
                 class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
                 :class="{
                   'pointer-events-none': checkboxes && checkboxes.length === 0,
@@ -88,14 +89,14 @@
 
 
 <script setup lang="ts">
-import { getCustomComponent, getIcon } from '@/utils';
+import { getCustomComponent, getIcon, formatComponent } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import { useAdminforth } from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 import { ref, type ComponentPublicInstance, onMounted, onUnmounted } from 'vue';
-import type { AdminForthBulkActionCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
+import type { AdminForthActionFront, AdminForthBulkActionFront, AdminForthComponentDeclarationFull } from '@/types/Common';
 import type { AdminForthActionInput } from '@/types/Back';
 
 const { list, alert} = useAdminforth();
@@ -109,8 +110,8 @@ const buttonTriggerRef = ref<HTMLElement | null>(null);
 
 const props = defineProps({
   threeDotsDropdownItems: Array<AdminForthComponentDeclarationFull>,
-  customActions: Array<AdminForthActionInput>,
-  bulkActions: Array<AdminForthBulkActionCommon>,
+  customActions: Array<AdminForthActionFront>,
+  bulkActions: Array<AdminForthBulkActionFront>,
   checkboxes: Array,
   updateList: {
     type: Function,

package/dist/spa/src/i18n.ts

@@ -51,6 +51,6 @@ export function initI18n(app: ReturnType<typeof createApp>) {
     },
   });
   app.use(i18n);
-  i18nInstance = i18n 
+  i18nInstance = i18n as typeof i18nInstance
   return i18n
 }