adminforth 2.4.0-next.31 → 2.4.0-next.310

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

@@ -2,34 +2,34 @@
   <!-- table -->
   <div class="relative shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-auto "
     :class="{'rounded-default': !noRoundings}"
-    :style="`height: ${containerHeight}px; will-change: transform;`"
+    :style="{ 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-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
+            <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-gray-500 dark:text-gray-400 rounded-default">
+    <table v-else class="w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default">
 
       <tbody>
         <!-- table header -->
-        <tr class="t-header sticky z-10 top-0 text-xs  bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
-          <td scope="col" class="p-4">
-            <div class="flex items-center">
-              <input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()" 
-                    :disabled="!rows || !rows.length"
-                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded
-                    focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-              <label for="checkbox-all-search" class="sr-only">{{ $t('checkbox') }}</label>
-            </div>
+        <tr class="t-header sticky z-20 top-0 text-xs  bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
+          <td scope="col" class="p-4 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
+            <Checkbox
+              :modelValue="allFromThisPageChecked"
+              :disabled="!rows || !rows.length"
+              @update:modelValue="selectAll"
+            >
+              <span class="sr-only">{{ $t('checkbox') }}</span>
+            </Checkbox>
           </td>
 
-          <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
+          <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="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}">
@@ -51,8 +51,8 @@
               </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) => s.field === c.name) !== -1 && sort?.length > 1">
-                {{ sort.findIndex((s) => s.field === c.name) + 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>
 
             </div>
@@ -68,7 +68,7 @@
         <!-- table header end -->
         <SkeleteLoader 
           v-if="!rows" 
-          :columns="resource?.columns.filter(c => c.showIn.list).length + 2"
+          :columns="resource?.columns.filter((c: AdminForthResourceColumnCommon) => c.showIn?.list).length + 2"
           :rows="rowHeights.length || 20"
           :row-heights="rowHeights"
           :column-widths="columnWidths"
@@ -99,25 +99,22 @@
           ref="rowRefs"
           class="bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
           :class="{'border-b': rowI !== visibleRows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
-          @mounted="(el) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
+          @mounted="(el: any) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
         >
-          <td class="w-4 p-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
-            <div class="flex items center ">
-              <input
-                @click="(e)=>{e.stopPropagation()}"
-                id="checkbox-table-search-1"
-                type="checkbox"
-                :checked="checkboxesInternal.includes(row._primaryKeyValue)"
-                @change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
-                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer">
-              <label for="checkbox-table-search-1" class="sr-only">{{ $t('checkbox') }}</label>
-            </div>
+        <td class="w-4 p-4 cursor-default sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading" @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">
+          <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 -->
             <component
-              :is="c?.components?.list ? getCustomComponent(c.components.list) : ValueRenderer"
-              :meta="c?.components?.list?.meta"
+              :is="c?.components?.list ? getCustomComponent(typeof c.components.list === 'string' ? { file: c.components.list } : c.components.list) : ValueRenderer"
+              :meta="typeof c?.components?.list === 'object' ? c.components.list.meta : undefined"
               :column="c"
               :record="row"
               :adminUser="coreStore.adminUser"
@@ -128,7 +125,7 @@
             <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
               <Tooltip>
                 <RouterLink
-                  v-if="resource.options?.allowedActions.show"
+                  v-if="resource.options?.allowedActions?.show"
                   :to="{ 
                     name: 'resource-show', 
                     params: { 
@@ -148,7 +145,7 @@
 
               <Tooltip>
                 <RouterLink
-                  v-if="resource.options?.allowedActions.edit"
+                  v-if="resource.options?.allowedActions?.edit"
                   :to="{ 
                     name: 'resource-edit', 
                     params: { 
@@ -166,7 +163,7 @@
 
               <Tooltip>
                 <button
-                  v-if="resource.options?.allowedActions.delete"
+                  v-if="resource.options?.allowedActions?.delete"
                   @click="deleteRecord(row)"
                 >
                   <IconTrashBinSolid class="w-5 h-5 me-2"/>
@@ -185,17 +182,42 @@
                   :resource="coreStore.resource" 
                   :adminUser="coreStore.adminUser"
                   :record="row"
+                  :updateRecords="()=>emits('update:records', true)"
                 />
               </template>
 
-              <template v-if="resource.options?.actions">
-                <Tooltip v-for="action in resource.options.actions.filter(a => a.showIn?.list)" :key="action.id">
-                  <button
-                    @click="startCustomAction(action.id, row)"
+                            <template v-if="resource.options?.actions">
+                <Tooltip
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
+                  :key="action.id"
+                >
+                  <CallActionWrapper
+                    :disabled="rowActionLoadingStates?.[action.id]"
+                    @callAction="startCustomAction(action.id, row)"
                   >
-                    <component v-if="action.icon" :is="getIcon(action.icon)" class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"></component>
-                  </button>
-                  <template v-slot:tooltip>
+                    <component
+                      :is="action.customComponent ? getCustomComponent(action.customComponent) : 'span'"
+                      :meta="action.customComponent?.meta"
+                      :row="row"
+                      :resource="resource"
+                      :adminUser="adminUser"
+                      @callAction="(payload? : Object) => startCustomAction(action.id, payload ?? row)"
+                    >
+                      <button
+                        type="button"
+                        :disabled="rowActionLoadingStates?.[action.id]"
+                        @click.stop.prevent
+                      >
+                        <component
+                          v-if="action.icon"
+                          :is="getIcon(action.icon)"
+                          class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"
+                        />
+                      </button>
+                    </component>
+                  </CallActionWrapper>
+
+                  <template #tooltip>
                     {{ action.name }}
                   </template>
                 </Tooltip>
@@ -223,7 +245,7 @@
     >
         <!-- Buttons -->
         <button
-          class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          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">
@@ -235,14 +257,14 @@
           </span>
         </button>
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          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>
         <div
           contenteditable="true" 
-          class="min-w-10 outline-none inline-block w-auto min-w-10 py-1.5 px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10"
+          class="af-pagination-input min-w-10 outline-none inline-block w-auto 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)"
           @input="onPageInput($event)"
           @blur="validatePageInput()"
@@ -251,14 +273,14 @@
         </div>
 
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          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="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          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"
@@ -270,9 +292,9 @@
     </div>
 
     <!-- Help text -->
-    <span class="text-sm text-gray-700 dark:text-gray-400">
-        <span v-if="((page || 1) - 1) * pageSize + 1 > totalRows">{{ $t('Wrong Page') }} </span>
-        <template v-else>
+    <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="hidden sm:inline">
             <i18n-t keypath="Showing {from} to {to} of {total} Entries" tag="p"  >
@@ -328,8 +350,9 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon } from '@/types/Common';
 import adminforth from '@/adminforth';
+import Checkbox from '@/afcl/Checkbox.vue';
 
 const coreStore = useCoreStore();
 const { t } = useI18n();
@@ -361,7 +384,7 @@ const emits = defineEmits([
 const checkboxesInternal: Ref<any[]> = ref([]);
 const pageInput = ref('1');
 const page = ref(1);
-const sort = ref([]);
+const sort: Ref<Array<{field: string, direction: string}>> = ref([]);
 
 
 const from = computed(() => ((page.value || 1) - 1) * props.pageSize + 1);
@@ -370,11 +393,11 @@ const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.tot
 watch(() => page.value, (newPage) => {
   emits('update:page', newPage);
 });
-async function onPageKeydown(event) {
+async function onPageKeydown(event: any) {
   // page input should accept only numbers, arrow keys and backspace
   if (['Enter', 'Space'].includes(event.code) ||
     (!['Backspace', 'ArrowRight', 'ArrowLeft'].includes(event.code)
-    && isNaN(String.fromCharCode(event.keyCode)))) {
+    && isNaN(Number(String.fromCharCode(event.keyCode || 0))))) {
     event.preventDefault();
     if (event.code === 'Enter') {
       validatePageInput();
@@ -395,7 +418,7 @@ watch(() => props.checkboxes, (newCheckboxes) => {
   checkboxesInternal.value = newCheckboxes;
 });
 
-watch(() => props.sort, (newSort) => {
+watch(() => props.sort, (newSort: any) => {
   sort.value = newSort;
 });
 
@@ -406,17 +429,17 @@ watch(() => props.page, (newPage) => {
   page.value = newPage;
 });
 
-const rowRefs = useTemplateRef('rowRefs');
-const headerRefs = useTemplateRef('headerRefs');
-const rowHeights = ref([]);
-const columnWidths = ref([]);
+const rowRefs = useTemplateRef<HTMLElement[]>('rowRefs');
+const headerRefs = useTemplateRef<HTMLElement[]>('headerRefs');
+const rowHeights = ref<number[]>([]);
+const columnWidths = ref<number[]>([]);
 watch(() => props.rows, (newRows) => {
   // rows are set to null when new records are loading
-  rowHeights.value = newRows || !rowRefs.value ? [] : rowRefs.value.map((el) => el.offsetHeight);
-  columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el) => el.offsetWidth)];
+  rowHeights.value = newRows || !rowRefs.value ? [] : rowRefs.value.map((el: HTMLElement) => el.offsetHeight);
+  columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el: HTMLElement) => el.offsetWidth)];
 });
 
-function addToCheckedValues(id) {
+function addToCheckedValues(id: any) {
   if (checkboxesInternal.value.includes(id)) {
     checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);
   } else {
@@ -425,17 +448,17 @@ function addToCheckedValues(id) {
   checkboxesInternal.value = [ ...checkboxesInternal.value ]
 }
 
-const columnsListed = computed(() => props.resource?.columns?.filter(c => c.showIn.list));
+const columnsListed = computed(() => props.resource?.columns?.filter((c: AdminForthResourceColumnCommon) => c.showIn?.list));
 
-async function selectAll(value) {
+async function selectAll() {
   if (!allFromThisPageChecked.value) {
-    props.rows.forEach((r) => {
+    props.rows?.forEach((r) => {
       if (!checkboxesInternal.value.includes(r._primaryKeyValue)) {
         checkboxesInternal.value.push(r._primaryKeyValue)
       } 
     });
   } else {
-    props.rows.forEach((r) => {
+    props.rows?.forEach((r) => {
       checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== r._primaryKeyValue);
     });
   }
@@ -448,15 +471,15 @@ const allFromThisPageChecked = computed(() => {
   if (!props.rows || !props.rows.length) return false;
   return props.rows.every((r) => checkboxesInternal.value.includes(r._primaryKeyValue));
 });
-const ascArr = computed(() => sort.value.filter((s) => s.direction === 'asc').map((s) => s.field));
-const descArr = computed(() => sort.value.filter((s) => s.direction === 'desc').map((s) => s.field));
+const ascArr = computed(() => sort.value.filter((s: any) => s.direction === 'asc').map((s: any) => s.field));
+const descArr = computed(() => sort.value.filter((s: any) => s.direction === 'desc').map((s: any) => s.field));
 
 
-function onSortButtonClick(event, field) {
+function onSortButtonClick(event: any, field: any) {
   // if ctrl key is pressed, add to sort otherwise sort by this field
   // in any case if field is already in sort, toggle direction
   
-  const sortIndex = sort.value.findIndex((s) => s.field === field);
+  const sortIndex = sort.value.findIndex((s: any) => s.field === field);
   if (sortIndex === -1) {
     // field is not in sort, add it
     if (event.ctrlKey) {
@@ -477,11 +500,11 @@ function onSortButtonClick(event, field) {
 
 const clickTarget = ref(null);
 
-async function onClick(e,row) {
+async function onClick(e: any,row: any) {
   if(clickTarget.value === e.target) return;
   clickTarget.value = e.target;
   await new Promise((resolve) => setTimeout(resolve, 100));
-  if (window.getSelection().toString()) return;
+  if (window.getSelection()?.toString()) return;
   else {
     if (row._clickUrl === null) {
       // user asked to nothing on click
@@ -496,7 +519,7 @@ async function onClick(e,row) {
           router.resolve({
             name: 'resource-show',
             params: {
-              resourceId: props.resource.resourceId,
+              resourceId: props.resource?.resourceId,
               primaryKey: row._primaryKeyValue,
             },
           }).href,
@@ -514,7 +537,7 @@ async function onClick(e,row) {
         router.push({
           name: 'resource-show',
           params: {
-            resourceId: props.resource.resourceId,
+            resourceId: props.resource?.resourceId,
             primaryKey: row._primaryKeyValue,
           },
         });
@@ -523,7 +546,7 @@ async function onClick(e,row) {
   }
 }
 
-async function deleteRecord(row) {
+async function deleteRecord(row: any) {
   const data = await adminforth.confirm({
     message: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
@@ -535,7 +558,7 @@ async function deleteRecord(row) {
         path: '/delete_record',
         method: 'POST',
         body: {
-          resourceId: props.resource.resourceId,
+          resourceId: props.resource?.resourceId,
           primaryKey: row._primaryKeyValue,
         }
       });
@@ -553,16 +576,16 @@ async function deleteRecord(row) {
   }
 }
 
-const actionLoadingStates = ref({});
+const actionLoadingStates = ref<Record<string | number, boolean>>({});
 
-async function startCustomAction(actionId, row) {
+async function startCustomAction(actionId: string, row: any) {
   actionLoadingStates.value[actionId] = true;
 
   const data = await callAdminForthApi({
     path: '/start_custom_action',
     method: 'POST',
     body: {
-      resourceId: props.resource.resourceId,
+      resourceId: props.resource?.resourceId,
       actionId: actionId,
       recordId: row._primaryKeyValue
     }
@@ -600,7 +623,7 @@ async function startCustomAction(actionId, row) {
   }
 }
 
-function onPageInput(event) {
+function onPageInput(event: any) {
   pageInput.value = event.target.innerText;
 }
 
@@ -735,4 +758,15 @@ input[type="checkbox"][disabled] {
 input[type="checkbox"]:not([disabled]) {
   @apply cursor-pointer;
 }
+td.sticky-column {
+  @apply sticky left-0 z-10;
+  &:not(:first-child) {
+    @apply left-[56px];
+  }
+}
+tr:not(:first-child):hover {
+  td.sticky-column {
+    @apply bg-lightListTableRowHover dark:bg-darkListTableRowHover;
+  }
+}
 </style>

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

@@ -1,10 +1,12 @@
 <template>
-    <div class="overflow-x-auto rounded-default shadow-resourseFormShadow dark:shadow-darkResourseFormShadow">
-        <div v-if="groupName && !noTitle"  class="text-md font-semibold px-6 py-3 flex flex-1 items-center dark:border-gray-600 text-gray-700 bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400 rounded-t-lg">
+      <div class="overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow"
+        :class="{'rounded-default' : isRounded}"
+      >
+        <div v-if="groupName && !noTitle"  class="text-md font-semibold px-6 py-3 flex flex-1 items-center text-lightShowTableHeadingText bg-lightShowTableHeadingBackground dark:bg-darkShowTableHeadingBackground  dark:text-darkShowTableHeadingText rounded-t-lg">
         {{ groupName }}
         </div>
-      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 table-fixed">
-        <thead v-if="!allColumnsHaveCustomComponent"  class="text-gray-700 dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group">
+      <table class="w-full text-sm text-left rtl:text-right text-lightShowTableBodyText dark:text-darkShowTableBodyText table-fixed">
+        <thead v-if="!allColumnsHaveCustomComponent"  class="text-lightShowTableUnderHeadingText dark:text-darkShowTableUnderHeadingText bg-lightShowTableUnderHeadingBackground dark:bg-darkShowTableUnderHeadingBackground dark:border-darkFormBorder block md:table-row-group">
           <tr>
             <th scope="col" class="px-6 py-3 text-xs uppercase hidden md:w-52 md:table-cell">
               {{ $t('Field') }}
@@ -18,18 +20,18 @@
           <tr
             v-for="column in columns"
             :key="column.name"
-            class="bg-lightForm border-t border-gray-100 
-              dark:bg-gray-800 dark:border-gray-700 block md:table-row"
+            class="bg-lightShowTablesBodyBackground border-t border-lightShowTableBodyBorder 
+              dark:bg-darkShowTablesBodyBackground dark:border-darkShowTableBodyBorder block md:table-row"
           >
             <component
-                v-if="column.components?.showRow"
+                v-if="column.components?.showRow && checkShowIf(column, record)"
                   :is="getCustomComponent(column.components.showRow)"
                   :meta="column.components.showRow.meta"
                   :column="column"
                   :resource="coreStore.resource"
                   :record="coreStore.record"
               />
-            <template v-else>
+            <template v-else-if="checkShowIf(column, record)">
               <td class="px-6 py-4 relative block md:table-cell font-bold md:font-normal pb-0 md:pb-4">
                 {{ column.label }}
               </td>
@@ -57,13 +59,15 @@
   
   <script setup lang="ts">
   import ValueRenderer from '@/components/ValueRenderer.vue';
-  import { getCustomComponent } from '@/utils';
+  import { getCustomComponent, checkShowIf } from '@/utils';
   import { useCoreStore } from '@/stores/core';
   import { computed } from 'vue';
-  const props = defineProps<{ 
+  import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon } from '@/types/Common';
+  const props = withDefaults(defineProps<{ 
     columns: Array<{
         name: string;
-        label: string;
+        label?: string;
+        showIf?: AdminForthResourceColumnInputCommon['showIf'];
         components?: {
           show?: {
             file: string;
@@ -75,13 +79,15 @@
           };
         };
     }>;
-    source: string;
     groupName?: string | null;
     noTitle?: boolean;
-    resource: Record<string, any>;
+    resource: AdminForthResourceCommon | null;
     record: Record<string, any>;
-  }>();
-
+    isRounded?: boolean;
+  }>(), {
+    isRounded: true
+  });
+  
   const coreStore = useCoreStore();
   const allColumnsHaveCustomComponent = computed(() => {
     return props.columns.every(column => {