adminforth 2.11.18 → 2.12.1

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

@@ -20,116 +20,131 @@
     <div class="py-4 ">
       <ul class="space-y-3 font-medium">
          <li v-for="c in columnsWithFilter" :key="c">
-            <p class="dark:text-gray-400">{{ c.label }}</p>
-            <component
-              v-if="c.components?.filter"
-              :is="getCustomComponent(c.components.filter)"
-              :meta="c?.components?.list?.meta"
-              :column="c"
-              class="w-full"
-              @update:modelValue="(filtersArray) => {
-                filtersStore.filters = filtersStore.filters.filter(f => f.field !== c.name);
-
-                for (const f of filtersArray) {
-                  filtersStore.filters.push({ field: c.name, ...f });
-                }
-                console.log('filtersStore.filters', filtersStore.filters);
-                emits('update:filters', [...filtersStore.filters]);
-              }"
-              :modelValue="filtersStore.filters.filter(f => f.field === c.name)"
-            />
-            <Select
-              v-else-if="c.foreignResource"
-              :multiple="c.filterOptions.multiselect"
-              class="w-full"
-              :options="columnOptions[c.name] || []"
-              :searchDisabled="!c.foreignResource.searchableFields"
-              @scroll-near-end="loadMoreOptions(c.name)"
-              @search="(searchTerm) => {
-                if (c.foreignResource.searchableFields && onSearchInput[c.name]) {
-                  onSearchInput[c.name](searchTerm);
-                }
-              }"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
-              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || (c.filterOptions.multiselect ? [] : '')"
-            >
-              <template #extra-item v-if="columnLoadingState[c.name]?.loading">
-                <div class="text-center text-gray-400 dark:text-gray-300 py-2 flex items-center justify-center gap-2">
-                  <Spinner class="w-4 h-4" />
-                  {{ $t('Loading...') }}
-                </div>
-              </template>
-            </Select>
-            <Select
-              :multiple="c.filterOptions.multiselect"
-              class="w-full"
-              v-else-if="c.type === 'boolean'"
-              :options="[
-                { label: $t('Yes'), value: true }, 
-                { label: $t('No'), value: false }, 
-                // if field is not required, undefined might be there, and user might want to filter by it
-                ...(c.required ? [] : [ { label: $t('Unset'), value: undefined } ])
-              ]"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event })"
-              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value !== undefined
-                ? filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value
-                : (c.filterOptions.multiselect ? [] : '')"
-            />
-            
-            <Select
-              :multiple="c.filterOptions.multiselect"
-              class="w-full"
-              v-else-if="c.enum"
-              :options="c.enum"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
-              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || (c.filterOptions.multiselect ? [] : '')"
-            />
-
-            <Input
-              v-else-if="['string', 'text', 'json', 'richtext', 'unknown'].includes(c.type)"
-              type="text"
-              full-width
-              :placeholder="$t('Search')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions?.substringSearch ? 'ilike' : 'eq', value: $event || undefined })"
-              :modelValue="getFilterItem({ column: c, operator: c.filterOptions?.substringSearch ? 'ilike' : 'eq' })"
-            />
-
-           <CustomDateRangePicker
-             v-else-if="['datetime', 'date', 'time'].includes(c.type)"
-             :column="c"
-             :valueStart="filtersStore.filters.find(f => f.field === c.name && f.operator === 'gte')?.value || undefined"
-             @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: $event || undefined })"
-             :valueEnd="filtersStore.filters.find(f => f.field === c.name && f.operator === 'lte')?.value || undefined"
-             @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: $event || undefined })"
-           />
-
-           <CustomRangePicker
-             v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
-             :min="getFilterMinValue(c.name)"
-             :max="getFilterMaxValue(c.name)"
-             :valueStart="getFilterItem({ column: c, operator: 'gte' })"
-             @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
-             :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
-             @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
-           />
-
-           <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
-            <Input
-              type="number"
-              aria-describedby="helper-text-explanation"
-              :placeholder="$t('From')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
-              :modelValue="getFilterItem({ column: c, operator: 'gte' })"
-            />
-            <Input
-              type="number"
-              aria-describedby="helper-text-explanation"
-              :placeholder="$t('To')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
-              :modelValue="getFilterItem({ column: c, operator: 'lte' })"
-            />
-           </div>
-            
+            <div class="flex flex-col">
+              <div class="flex justify-between items-center">
+                <p class="dark:text-gray-400 h-7 my-1">{{ c.label }}</p>
+                <Tooltip v-if="filtersStore.filters.find(f => f.field === c.name)">
+                <button 
+                  class=" flex items-center justify-center w-7 h-7 my-1 hover:border rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+                  :disabled="!filtersStore.filters.find(f => f.field === c.name)"
+                  @click="filtersStore.clearFilter(c.name);"
+                > 
+                  <IconCloseOutline /> 
+                </button>
+                <template #tooltip>
+                  Clear filter
+                </template>
+                </Tooltip> 
+              </div>
+              <component
+                v-if="c.components?.filter"
+                :is="getCustomComponent(c.components.filter)"
+                :meta="c?.components?.list?.meta"
+                :column="c"
+                class="w-full"
+                @update:modelValue="(filtersArray) => {
+                  filtersStore.filters = filtersStore.filters.filter(f => f.field !== c.name);
+
+                  for (const f of filtersArray) {
+                    filtersStore.filters.push({ field: c.name, ...f });
+                  }
+                  console.log('filtersStore.filters', filtersStore.filters);
+                  emits('update:filters', [...filtersStore.filters]);
+                }"
+                :modelValue="filtersStore.filters.filter(f => f.field === c.name)"
+              />
+              <Select
+                v-else-if="c.foreignResource"
+                :multiple="c.filterOptions.multiselect"
+                class="w-full"
+                :options="columnOptions[c.name] || []"
+                :searchDisabled="!c.foreignResource.searchableFields"
+                @scroll-near-end="loadMoreOptions(c.name)"
+                @search="(searchTerm) => {
+                  if (c.foreignResource.searchableFields && onSearchInput[c.name]) {
+                    onSearchInput[c.name](searchTerm);
+                  }
+                }"
+                @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
+                :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || (c.filterOptions.multiselect ? [] : '')"
+              >
+                <template #extra-item v-if="columnLoadingState[c.name]?.loading">
+                  <div class="text-center text-gray-400 dark:text-gray-300 py-2 flex items-center justify-center gap-2">
+                    <Spinner class="w-4 h-4" />
+                    {{ $t('Loading...') }}
+                  </div>
+                </template>
+              </Select>
+              <Select
+                :multiple="c.filterOptions.multiselect"
+                class="w-full"
+                v-else-if="c.type === 'boolean'"
+                :options="[
+                  { label: $t('Yes'), value: true }, 
+                  { label: $t('No'), value: false }, 
+                  // if field is not required, undefined might be there, and user might want to filter by it
+                  ...(c.required ? [] : [ { label: $t('Unset'), value: undefined } ])
+                ]"
+                @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event })"
+                :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value !== undefined
+                  ? filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value
+                  : (c.filterOptions.multiselect ? [] : '')"
+              />
+              
+              <Select
+                :multiple="c.filterOptions.multiselect"
+                class="w-full"
+                v-else-if="c.enum"
+                :options="c.enum"
+                @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
+                :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || (c.filterOptions.multiselect ? [] : '')"
+              />
+
+              <Input
+                v-else-if="['string', 'text', 'json', 'richtext', 'unknown'].includes(c.type)"
+                type="text"
+                full-width
+                :placeholder="$t('Search')"
+                @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions?.substringSearch ? 'ilike' : 'eq', value: $event || undefined })"
+                :modelValue="getFilterItem({ column: c, operator: c.filterOptions?.substringSearch ? 'ilike' : 'eq' })"
+              />
+
+              <CustomDateRangePicker
+                v-else-if="['datetime', 'date', 'time'].includes(c.type)"
+                :column="c"
+                :valueStart="filtersStore.filters.find(f => f.field === c.name && f.operator === 'gte')?.value || undefined"
+                @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: $event || undefined })"
+                :valueEnd="filtersStore.filters.find(f => f.field === c.name && f.operator === 'lte')?.value || undefined"
+                @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: $event || undefined })"
+              />
+
+              <CustomRangePicker
+                v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
+                :min="getFilterMinValue(c.name)"
+                :max="getFilterMaxValue(c.name)"
+                :valueStart="getFilterItem({ column: c, operator: 'gte' })"
+                @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
+                :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
+                @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
+              />
+
+              <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
+                <Input
+                  type="number"
+                  aria-describedby="helper-text-explanation"
+                  :placeholder="$t('From')"
+                  @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
+                  :modelValue="getFilterItem({ column: c, operator: 'gte' })"
+                />
+                <Input
+                  type="number"
+                  aria-describedby="helper-text-explanation"
+                  :placeholder="$t('To')"
+                  @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
+                  :modelValue="getFilterItem({ column: c, operator: 'lte' })"
+                />
+              </div>
+            </div>
          </li>
       </ul>
    </div>
@@ -138,8 +153,8 @@
       <button 
         :disabled="!filtersStore.visibleFiltersCount"
         type="button" 
-        class="flex items-center py-1 px-3 text-sm font-medium text-lightFiltersClearAllButtonText focus:outline-none bg-lightFiltersClearAllButtonBackground rounded border border-lightFiltersClearAllButtonBorder hover:bg-lightFiltersClearAllButtonBackgroundHover hover:text-lightFiltersClearAllButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightFiltersClearAllButtonFocus dark:focus:ring-darkFiltersClearAllButtonFocus dark:bg-darkFiltersClearAllButtonBackground dark:text-darkFiltersClearAllButtonText dark:border-darkFiltersClearAllButtonBorder dark:hover:text-darkFiltersClearAllButtonTextHover dark:hover:bg-darkFiltersClearAllButtonBackgroundHover disabled:opacity-50 disabled:cursor-not-allowed"
-        @click="clear">{{ $t('Clear all') }}</button>
+        class="flex gap-1 items-center py-1 pr-3 text-sm font-medium text-lightFiltersClearAllButtonText focus:outline-none bg-lightFiltersClearAllButtonBackground rounded border border-lightFiltersClearAllButtonBorder hover:bg-lightFiltersClearAllButtonBackgroundHover hover:text-lightFiltersClearAllButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightFiltersClearAllButtonFocus dark:focus:ring-darkFiltersClearAllButtonFocus dark:bg-darkFiltersClearAllButtonBackground dark:text-darkFiltersClearAllButtonText dark:border-darkFiltersClearAllButtonBorder dark:hover:text-darkFiltersClearAllButtonTextHover dark:hover:bg-darkFiltersClearAllButtonBackgroundHover disabled:opacity-50 disabled:cursor-not-allowed"
+        @click="clear"><IconCloseOutline class="ml-3"/> {{ $t('Clear all') }}</button>
 
    </div>
   </div>
@@ -162,6 +177,8 @@ import Input from '@/afcl/Input.vue';
 import Select from '@/afcl/Select.vue';
 import Spinner from '@/afcl/Spinner.vue';
 import debounce from 'debounce';
+import { Tooltip } from '@/afcl';
+import { IconCloseOutline } from '@iconify-prerendered/vue-flowbite';
 
 const filtersStore = useFiltersStore();
 const { t } = useI18n();

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

@@ -63,7 +63,7 @@
 
 <script setup lang="ts">
 
-import { applyRegexValidation, callAdminForthApi, loadMoreForeignOptions, searchForeignOptions, createSearchInputHandlers} from '@/utils';
+import { applyRegexValidation, callAdminForthApi, loadMoreForeignOptions, searchForeignOptions, createSearchInputHandlers, checkShowIf } from '@/utils';
 import { computedAsync } from '@vueuse/core';
 import { computed, onMounted, reactive, ref, watch, provide, type Ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
@@ -322,7 +322,7 @@ async function searchOptions(columnName: string, searchTerm: string) {
 
 
 const editableColumns = computed(() => {
-  return props.resource?.columns?.filter(column => column.showIn?.[mode.value]);
+  return props.resource?.columns?.filter(column => column.showIn?.[mode.value] && (currentValues.value ? checkShowIf(column, currentValues.value) : true));
 });
 
 const isValid = computed(() => {

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

@@ -14,8 +14,8 @@
 
       <tbody>
         <!-- table header -->
-        <tr class="t-header sticky z-10 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText">
-          <td scope="col" class="p-4">
+        <tr class="t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText">
+          <td scope="col" class="p-4 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
             <Checkbox
               :modelValue="allFromThisPageChecked"
               :disabled="!rows || !rows.length"
@@ -25,7 +25,7 @@
             </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}">
@@ -90,7 +90,7 @@
 
           :class="{'border-b': rowI !== rows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
         >
-        <td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
+        <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)}"
@@ -100,7 +100,7 @@
           </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(typeof c.components.list === 'string' ? { file: c.components.list } : c.components.list) : ValueRenderer"
@@ -172,22 +172,43 @@
                   :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)"
-                  >
-                    <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>
+                <Tooltip
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
+                  :key="action.id"
+                >
+                    <component
+                      :is="action.customComponent ? getCustomComponent(action.customComponent) : CallActionWrapper"
+                      :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>
+
+                  <template #tooltip>
                     {{ action.name }}
                   </template>
                 </Tooltip>
               </template>
             </div>
+            
           </td>
         </tr>
       </tbody>
@@ -250,7 +271,7 @@
     </div>
 
     <!-- Help text -->
-    <span class="text-sm text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText">
+    <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">
           
@@ -598,4 +619,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/ResourceListTableVirtual.vue

@@ -2,7 +2,7 @@
   <!-- 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"
   > 
@@ -14,12 +14,12 @@
             <div class="h-2 bg-lightListSkeletLoader rounded-full dark:bg-darkListSkeletLoader max-w-[360px]"></div>
         </div>      
     </div>
-    <table v-else class="h-full w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText 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">
+        <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"
@@ -29,7 +29,7 @@
             </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}">
@@ -74,7 +74,7 @@
           :column-widths="columnWidths"
         />
         
-        <tr v-else-if="rows.length === 0" class="h-full bg-lightListTable dark:bg-darkListTable dark:border-darkListTableBorder">
+        <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"
@@ -101,7 +101,7 @@
           :class="{'border-b': rowI !== visibleRows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
           @mounted="(el: any) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
         >
-        <td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
+        <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)}"
@@ -110,7 +110,7 @@
             <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(typeof c.components.list === 'string' ? { file: c.components.list } : c.components.list) : ValueRenderer"
@@ -182,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>
@@ -267,7 +292,7 @@
     </div>
 
     <!-- Help text -->
-    <span class="text-sm text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText">
+    <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">
           
@@ -733,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

@@ -24,14 +24,14 @@
               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>
@@ -59,14 +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';
-  import type { AdminForthResourceCommon } from '@/types/Common';
+  import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon } from '@/types/Common';
   const props = withDefaults(defineProps<{ 
     columns: Array<{
         name: string;
         label?: string;
+        showIf?: AdminForthResourceColumnInputCommon['showIf'];
         components?: {
           show?: {
             file: string;

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

@@ -4,7 +4,7 @@
     @mouseover="!isTogglingSidebar && (isSidebarHovering = true)" 
     @mouseleave="!isTogglingSidebar && (isSidebarHovering = false)"
     id="logo-lightSidebar" 
-    class="sidebar-container fixed border-none top-0 left-0 z-30 h-screen transition-all duration-300 ease-in-out bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder sm:translate-x-0 dark:border-darkSidebarBorder"
+    class="sidebar-container fixed border-none top-0 left-0 z-40 h-screen transition-all duration-300 ease-in-out bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder sm:translate-x-0 dark:border-darkSidebarBorder"
     :class="{ 
       '-translate-x-full': !sideBarOpen, 
       'transform-none': sideBarOpen,
@@ -13,10 +13,10 @@
      }"
     aria-label="Sidebar"
   >
-    <div class="h-full px-3 pb-4 bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder" :class="{'sidebar-scroll':!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)}">
-      <div class="af-logo-title-wrapper flex ms-2 relative transition-all duration-300 ease-in-out h-8 items-center" :class="{'my-4 ': isSidebarIconOnly && !isSidebarHovering, 'm-4': !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)}">
-        <img v-if="coreStore.config?.showBrandLogoInSidebar !== false && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))" :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-logo h-8 me-3"  />
-        <img v-if="coreStore.config?.showBrandLogoInSidebar !== false && coreStore.config?.iconOnlySidebar?.logo && iconOnlySidebarEnabled && isSidebarIconOnly && !isSidebarHovering" :src="loadFile(coreStore.config?.iconOnlySidebar?.logo || '')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-sidebar-icon-only-logo h-8 me-3"  />
+    <div class="h-full px-3 pb-20 md:pb-4 bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder" :class="{'sidebar-scroll':!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)}">
+      <div class="af-logo-title-wrapper flex relative transition-all duration-300 ease-in-out h-8 items-center" :class="{'my-4 ': isSidebarIconOnly && !isSidebarHovering, 'm-4': !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)}">
+        <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-logo h-8 me-3" :class="{ 'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))) }" />
+        <img :src="loadFile(coreStore.config?.iconOnlySidebar?.logo || '')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-sidebar-icon-only-logo h-8 me-3" :class="{ 'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && coreStore.config?.iconOnlySidebar?.logo && iconOnlySidebarEnabled && isSidebarIconOnly && !isSidebarHovering) }" />
         <span 
           v-if="coreStore.config?.showBrandNameInSidebar && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))"
           class="af-title self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText"
@@ -430,6 +430,11 @@ onMounted(() => {
 
 onUnmounted(() => {
   smQuery.removeEventListener('change', handleBreakpointChange);
+  if (isMobile.value && props.sideBarOpen) {
+    document.body.style.overflow = '';
+    document.body.style.position = '';
+    document.body.style.width = '';
+  }
 })
 
 watch(() => props.forceIconOnly, (force) => {
@@ -445,4 +450,21 @@ watch(() => props.forceIconOnly, (force) => {
     isSidebarIconOnly.value = false;
   }
 }, { immediate: true })
+
+watch(() => props.sideBarOpen, (isOpen) => {
+  if (isMobile.value) {
+    if (isOpen) {
+      // Lock body scroll
+      document.body.style.overflow = 'hidden';
+      document.body.style.position = 'fixed';
+      document.body.style.width = '100%';
+    } else {
+      // Unlock body scroll
+      document.body.style.overflow = '';
+      document.body.style.position = '';
+      document.body.style.width = '';
+    }
+  }
+}, { immediate: true })
+
 </script>