@usssa/component-library 1.0.0-alpha.15 → 1.0.0-alpha.151

package/src/components/core/UTableStd.vue

@@ -1,86 +1,117 @@
 <script setup>
+import { useQuasar } from 'quasar'
+import { computed, ref, watch } from 'vue'
+import { useScreenType } from '..'
+import UAvatar from './UAvatar.vue'
+import UBtnIcon from './UBtnIcon.vue'
+import UBtnStd from './UBtnStd.vue'
+import UCheckboxStd from './UCheckboxStd.vue'
+import UChip from './UChip.vue'
+import UMenuDropdown from './UMenuDropdown.vue'
+import UPagination from './UPagination.vue'
+import UTable from './UTable/UTable.vue'
 import UTd from './UTable/UTd.vue'
 import UTh from './UTable/UTh.vue'
 import UTr from './UTable/UTr.vue'
-import UTable from './UTable/UTable.vue'
-import { computed, ref } from 'vue'
-import UCheckboxStd from './UCheckboxStd.vue'
-import UChip from './UChip.vue'
-import UAvatar from './UAvatar.vue'
-import UBtnStd from './UBtnStd.vue'
 import UTooltip from './UTooltip.vue'
-import UPagination from './UPagination.vue'
+
+const emit = defineEmits(['onCustomSort'])
+const columns = defineModel('columns', {
+  default: () => [],
+  type: Array,
+})
+const filteredRows = defineModel('filteredRows', { default: [], type: Array })
+const grid = defineModel('grid', {
+  default: false,
+  type: Boolean,
+})
+const loading = defineModel('loading', {
+  default: () => {},
+  type: Boolean,
+})
+const moreActionDialogData = defineModel('moreActionDialogData', {
+  type: Object,
+  default: null,
+})
+const pagination = defineModel('pagination', {
+  default: { page: 1, rowsPerPage: 5 },
+  type: Object,
+})
+const rows = defineModel('rows', {
+  default: () => [],
+  type: Array,
+})
+const selectedRows = defineModel('selectedRows', {
+  default: () => [],
+  type: Array,
+})
+
 const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  tableRowHover: {
+  bordered: {
     type: Boolean,
     default: false,
   },
-  separator: {
+  customClass: {
     type: String,
-    default: 'horizontal',
+    default: '',
   },
-  multiSelection: {
-    type: Boolean,
-    default: false,
+  dataTestId: {
+    type: String,
+    default: 'table-std',
+  },
+  filter: {
+    type: String,
+    default: '',
   },
   flat: {
     type: Boolean,
     default: false,
   },
-  bordered: {
+  isCustomSort: {
     type: Boolean,
     default: false,
   },
-  grid: {
+  multiSelection: {
     type: Boolean,
     default: false,
   },
-  virtualScroll: {
+  rowCardHeight: {
+    type: Number,
+    default: 25,
+  },
+  separator: {
+    type: String,
+    default: 'horizontal',
+  },
+  showPagination: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   stickyHeader: {
     type: Boolean,
     default: false,
   },
-  isCustomSort: {
+  tableRowHover: {
     type: Boolean,
     default: false,
   },
-  customClass: {
+  title: {
     type: String,
     default: '',
   },
-  maxPageLink: {
-    type: Number,
-    default: 3,
+  verticalMoreActions: {
+    type: Boolean,
+    default: false,
+  },
+  virtualScroll: {
+    type: Boolean,
+    default: false,
   },
 })
 
-const selectedRows = defineModel('selectedRows', {
-  default: () => [],
-  type: Array,
-})
-const rows = defineModel('rows', {
-  default: () => [],
-  type: Array,
-})
-const columns = defineModel('columns', {
-  default: () => [],
-  type: Array,
-})
-const pagination = defineModel('pagination', {
-  default: () => {},
-  type: Object,
-})
-const loading = defineModel('loading', {
-  default: () => {},
-  type: Boolean,
-})
+const $q = useQuasar()
+const $screen = useScreenType()
+
 const customLoading = ref(false)
 const rowsPerPageOptions = ref([
   { label: '5 / per page', value: 5 },
@@ -89,20 +120,9 @@ const rowsPerPageOptions = ref([
   { label: '20 / per page', value: 20 },
   { label: '25 / per page', value: 25 },
 ])
-
 const tableDataChip = ref(true) // this is required to show chip
+const tailClass = ref(null)
 
-//adding a new row to selectedRows
-const handleToSelectRow = (row) => {
-  if (row) {
-    const index = selectedRows.value.findIndex((item) => item._id === row._id)
-    if (index === -1) {
-      selectedRows.value.push(row)
-    } else {
-      selectedRows.value.splice(index, 1)
-    }
-  }
-}
 // if virtual scroll is enbaled then adding large rows per page to view in virtual scroll
 const getRowsPerPageOptions = computed(() => {
   if (props.virtualScroll) {
@@ -117,6 +137,55 @@ const getRowsPerPageOptions = computed(() => {
   }
 })
 
+const isMobile = computed(() => $screen.value.isMobile)
+const isMobileOrTablet = computed(
+  () => $screen.value.isMobile || $screen.value.isTablet
+)
+const isSmallDevices = computed(() => $q.screen.width < 390)
+
+// chekcing the menu position after show
+const checkMenuPosition = (id) => {
+  const menuElement = document.getElementById(`actionPopupRef-${id}`) // Access the menu by ID
+  const buttonElement = document.getElementById(`actionPopupRefBtn-${id}`) // Access the button element
+
+  if (menuElement && buttonElement) {
+    const menuRect = menuElement.getBoundingClientRect() // Menu position
+    const buttonRect = buttonElement.getBoundingClientRect() // Button position
+
+    // Determine if the menu opens above or below
+    if (menuRect.top < buttonRect.top) {
+      tailClass.value = 'tail-bottom' // Menu opens below, tail at the bottom
+    } else {
+      tailClass.value = 'tail-top' // Menu opens above, tail at the top
+    }
+  }
+}
+
+// sorting funtion to handle text and number type of data
+const dataSort = (data, key, order, type) => {
+  if (type === 'text') {
+    return data.sort((a, b) =>
+      order === 'asc'
+        ? a[key].localeCompare(b[key])
+        : b[key].localeCompare(a[key])
+    )
+  } else {
+    return data.sort((a, b) =>
+      order === 'asc' ? a[key] - b[key] : b[key] - a[key]
+    )
+  }
+}
+
+//getting the chip color accroding to value of chip from row
+const getChipColor = (data, value) => {
+  const foundObject = data.find((chip) => chip.value === value)
+  if (foundObject) {
+    return foundObject['color']
+  } else {
+    return 'neutral-3'
+  }
+}
+
 //getting the sorted icon according the order
 const getSortingIcon = (col) => {
   if (col) {
@@ -128,59 +197,19 @@ const getSortingIcon = (col) => {
   }
 }
 
-// it is giving the selected row and setting the new selection
-const isRowSelected = (row) => {
-  if (row) {
-    const index = selectedRows.value.findIndex((item) => item._id === row._id)
-    return computed({
-      get: () => {
-        return index === -1 ? false : true
-      },
-      set: () => {
-        if (index === -1) {
-          selectedRows.value.push(row)
-        } else {
-          selectedRows.value.splice(index, 1)
-        }
-      },
-    })
-  } else {
-    return computed({
-      get: () => {
-        let dataLength = props.virtualScroll
-          ? pagination.value.rowsPerPage
-          : props.rows.length
-        return selectedRows.value.length === dataLength
-          ? true
-          : selectedRows.value.length === 0
-          ? false
-          : null
-      },
-      set: (value) => {
-        if (value !== null) {
-          selectedRows.value.splice(0, selectedRows.value.length)
-        } else {
-          if (props.virtualScroll) {
-            handleSelectAllData().then((res) => {
-              if (res === 200) {
-                customLoading.value = false
-              }
-            })
-          } else {
-            props.rows.forEach((element) => {
-              if (
-                selectedRows.value.findIndex(
-                  (item) => item._id === element._id
-                ) === -1
-              ) {
-                selectedRows.value.push(element)
-              }
-            })
-          }
-        }
-      },
-    })
-  }
+const handleActionColClick = (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+//if user want to add custom sort on data
+const handleCustomSort = (key, sortOrder, type) => {
+  emit('onCustomSort', key, sortOrder, type)
+}
+
+const handleMenuEventStop = (e) => {
+  e.preventDefault()
+  e.stopPropagation()
 }
 
 // handling the large selection data in chunks
@@ -189,7 +218,7 @@ const handleSelectAllData = () => {
   return new Promise((resolve, reject) => {
     let index = 0
     function processChunk() {
-      if (index >= pagination.value.rowsPerPage) {
+      if (index >= rows.value.length) {
         resolve(200)
         return
       }
@@ -213,23 +242,6 @@ const handleSelectAllData = () => {
   })
 }
 
-const emit = defineEmits(['onCustomSort'])
-
-// sorting funtion to handle text and number type of data
-const dataSort = (data, key, order, type) => {
-  if (type === 'text') {
-    return data.sort((a, b) =>
-      order === 'asc'
-        ? a[key].localeCompare(b[key])
-        : b[key].localeCompare(a[key])
-    )
-  } else {
-    return data.sort((a, b) =>
-      order === 'asc' ? a[key] - b[key] : b[key] - a[key]
-    )
-  }
-}
-
 //it is sorting the data according to type like text or number type of data
 const handleSort = (key, sortOrder, type) => {
   rows.value = dataSort(rows.value, key, sortOrder, type)
@@ -240,22 +252,64 @@ const handleSort = (key, sortOrder, type) => {
   })
 }
 
-//if user want to add custom sort on data
-const handleCustomSort = (key, sortOrder, type) => {
-  emit('onCustomSort', key, sortOrder, type)
+//adding a new row to selectedRows
+const handleToSelectRow = (row) => {
+  if (row) {
+    const index = selectedRows.value.findIndex((item) => item._id === row._id)
+    if (index === -1) {
+      selectedRows.value.push(row)
+    } else {
+      selectedRows.value.splice(index, 1)
+    }
+  }
 }
 
-//adding a new row to selectedRows
-const onRowClick = (event, row) => {
-  if (props.multiSelection) {
-    event.stopPropagation()
-    handleToSelectRow(row)
+// it is giving the selected row and setting the new selection
+const isRowSelected = (row) => {
+  if (row) {
+    const index = selectedRows.value.findIndex((item) => item._id === row._id)
+    return computed({
+      get: () => {
+        return index === -1 ? false : true
+      },
+      set: () => {
+        if (index === -1) {
+          selectedRows.value.push(row)
+        } else {
+          selectedRows.value.splice(index, 1)
+        }
+      },
+    })
+  } else {
+    return computed({
+      get: () => {
+        let dataLength = props.rows.length
+        return selectedRows.value.length === dataLength
+          ? true
+          : selectedRows.value.length === 0
+          ? false
+          : null
+      },
+      set: (value) => {
+        if (value !== null) {
+          selectedRows.value.splice(0, selectedRows.value.length)
+        } else {
+          handleSelectAllData().then((res) => {
+            if (res === 200) {
+              customLoading.value = false
+            }
+          })
+        }
+      },
+    })
   }
 }
 
-//getting the chip color accroding to value of chip from row
-const getChipColor = (data, value) => {
-  return data.find((chip) => chip.value === value)['color']
+// removing console error for show dialog
+const onMoreActionButtonClick = (id) => {
+  if (moreActionDialogData.value) {
+    moreActionDialogData.value.showDialog[id] = false
+  }
 }
 
 // handle to change the page, and if virtual scroll is enabled and user scrolled to bottom it will take user to the top
@@ -263,125 +317,168 @@ const onPageChange = (value) => {
   pagination.value.page = value
 }
 
+//adding a new row to selectedRows
+const onRowClick = (event, row) => {
+  if (props.multiSelection) {
+    event.stopPropagation()
+    handleToSelectRow(row)
+  }
+}
+
 //handle to change the rows per page
 const onRowPerPageChange = (value) => {
   pagination.value.rowsPerPage = value
 }
+
+const updatedRows = computed(() => {
+  if (props.filter.length && filteredRows.value?.length)
+    return filteredRows.value
+  else if (props.filter.length) return []
+  return rows.value
+})
+
+// watchers
+watch(
+  isMobileOrTablet,
+  (newVal) => {
+    grid.value = newVal
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
   <UTable
-    :title="title"
-    v-model:rows="rows"
     v-model:columns="columns"
-    :separator="separator"
-    :loading="loading"
-    :flat="flat"
-    :bordered="bordered"
+    v-model:filteredRows="filteredRows"
+    v-model:moreActionDialogData="moreActionDialogData"
     v-model:pagination="pagination"
+    v-model:rows="rows"
+    :class="customClass"
+    :bordered="bordered"
+    :dataTestId="dataTestId"
+    :filter="filter"
+    :flat="flat"
     :grid="grid"
-    :virtualScroll="virtualScroll"
+    :loading="loading"
+    :row-card-height="rowCardHeight"
+    :separator="separator"
+    :showPagination="showPagination"
     :stickyHeader="stickyHeader"
-    :class="customClass"
+    :title="title"
+    :virtualScroll="virtualScroll"
   >
     <!-- custom header slot to add customized header -->
     <template v-slot:header="props">
       <UTr :props="props" :tableRowHover="tableRowHover">
         <UTh
           v-if="multiSelection"
+          :separator="separator"
           style="width: 3% !important"
-          :tableHeaderAutoWidth="false"
           tableHeadAlignment="left"
-          :separator="separator"
+          :tableHeaderAutoWidth="false"
         >
           <UCheckboxStd
-            :id="`u-checkbox-table-header`"
             v-model="isRowSelected(null).value"
-            name="Table Header"
+            id="u-checkbox-table-header"
             :indeterminate="true"
+            name="Table Header"
           />
         </UTh>
-        <UTh
-          v-for="(col, key) in props.cols"
-          :class="`${col.sortable ? 'cursor-pointer' : ''} ${
-            col.headerClasses
-          }`"
-          :key="key"
-          :tableHeaderAutoWidth="col.autoWidth"
-          :tableHeadAlignment="col.field === 'action' ? col.align : col.align"
-          @click="
-            col.sortable
-              ? isCustomSort
-                ? handleCustomSort(col.field, col.sortOrder, col.type)
-                : handleSort(col.field, col.sortOrder, col.type)
-              : null
-          "
-          :separator="separator"
-          :style="col.headerStyle"
-        >
-          {{ col.label }}
-          <span v-if="col.sortable && col.field !== 'action'">
-            <q-btn label="Sorting Button" :ripple="false" class="u-sorting-btn">
-              <q-icon
-                size="xs"
-                :class="`${getSortingIcon(col)} sorting-icon`"
-                :aria-label="col.label"
-                alt="sort-desc"
-                tabindex="0"
-              ></q-icon>
-            </q-btn>
-          </span>
-        </UTh>
+        <template v-for="(col, key) in props.cols">
+          <UTh
+            v-if="typeof col.show === 'undefined' || col.show"
+            :class="`${col.sortable ? 'cursor-pointer' : ''} ${
+              col.headerClasses
+            }`"
+            :key="key"
+            :separator="separator"
+            :style="col.headerStyle"
+            :tableHeadAlignment="col.field === 'action' ? col.align : col.align"
+            :tableHeaderAutoWidth="col.autoWidth"
+            @click="
+              col.sortable
+                ? isCustomSort
+                  ? handleCustomSort(col.field, col.sortOrder, col.type)
+                  : handleSort(col.field, col.sortOrder, col.type)
+                : null
+            "
+          >
+            <span
+              :class="`${col.field === 'action' ? 'hidden-header-label' : ''}`"
+            >
+              {{ col.field === 'action' ? 'Action' : col.label }}
+            </span>
+
+            <span v-if="col.sortable && col.field !== 'action'">
+              <UBtnIcon
+                :class="`more-action-icon cursor-pointer`"
+                :iconClass="`${getSortingIcon(col)}`"
+                :aria-label="`Sort ${col.label}`"
+                ref="btn-icon"
+                size="sm"
+              />
+            </span>
+          </UTh>
+        </template>
       </UTr>
     </template>
     <!-- custom body slots to add customized cell data -->
     <template v-slot:body="props">
       <UTr
+        :class="`${isRowSelected(props.row).value ? 'selected-data-row' : ''}`"
         :props="props"
-        @click="onRowClick($event, props.row)"
         :tableRowHover="tableRowHover"
-        :class="`${isRowSelected(props.row).value ? 'selected-data-row' : ''}`"
+        @click="onRowClick($event, props.row)"
       >
         <UTd
           v-if="multiSelection"
           :index="-1"
+          :separator="separator"
           tableDataAlignment="left"
           :tableHeaderAutoWidth="false"
-          :separator="separator"
         >
           <UCheckboxStd
-            :id="`u-checkbox-${props.row._id}`"
             v-model="isRowSelected(props.row).value"
+            :id="`u-checkbox-${props.row._id}`"
             :name="props.row._id"
           />
         </UTd>
+
         <template v-for="(col, index) in props.cols" :key="index">
           <!-- to show the cell data without the action cell -->
           <UTd
-            v-if="col.field !== 'action'"
-            :row="props.row"
+            v-if="
+              col.field !== 'action' &&
+              (typeof col.show === 'undefined' || col.show)
+            "
+            :class="col.classes"
             :col="col"
             :index="index"
-            :tableDataAlignment="col.align"
-            :tableDataAutoWidth="col.autoWidth"
+            :row="props.row"
             :separator="separator"
             :style="col.style"
-            :class="col.classes"
+            :tableDataAlignment="col.align"
+            :tableDataAutoWidth="col.autoWidth"
           >
             <!-- to show the chips with different variant -->
             <template v-if="col.chipValues && col.chipValues.length > 0">
               <UChip
                 v-model="tableDataChip"
-                :type="getChipColor(col.chipValues, props.row[col.field])"
+                class="u-table-chip"
+                :anchor="col.anchor"
                 avatarLabel=""
                 :chipLabel="props.row[col.field].toString()"
+                :dense="col.denseChip"
+                :is-show-tooltip="col.showChipTooltip"
+                :offset="col.offset"
                 :removable="false"
-                class="u-table-chip"
+                :type="getChipColor(col.chipValues, props.row[col.field])"
               />
             </template>
             <!-- to show the avatar of user image with name and other details -->
             <template v-else-if="col.avatarKey">
-              <div class="flex justify-start items-center">
+              <div class="flex justify-start items-center no-wrap">
                 <div
                   v-if="
                     props.row[col.avatarKey] &&
@@ -391,29 +488,31 @@ const onRowPerPageChange = (value) => {
                 >
                   <UAvatar
                     v-if="props.row[col.avatarKey]?.type === 'initials'"
-                    size="md"
                     :name="`${props.row[col.avatarKey]?.value}`"
+                    size="md"
                   />
                   <UAvatar
                     v-else-if="props.row[col.avatarKey]?.type === 'image'"
-                    size="md"
+                    :image="`${props.row[col.avatarKey]?.value}`"
                     :name="
                       props.row[col.avatarKey]?.name ??
                       props.row[col.avatarKey]?.value
                     "
-                    :image="`${props.row[col.avatarKey]?.value}`"
+                    size="md"
                   />
                 </div>
                 <div v-else class="table-data-avatar">
                   <UAvatar
-                    size="md"
-                    :name="`${props.row[col.avatarKey]}`"
                     :image="`${props.row[col.avatarKey]}`"
+                    :name="`${props.row[col.avatarKey]}`"
+                    size="md"
                   />
                 </div>
                 <div class="td-grid-content">
-                  <div>{{ props.row[col.field] }}</div>
-                  <div class="td-caption text-body-xs" v-if="col.captionKey">
+                  <div>
+                    {{ props.row[col.field] }}
+                  </div>
+                  <div v-if="col.captionKey" class="td-caption text-body-xs">
                     {{ props.row[col.captionKey] }}
                   </div>
                 </div>
@@ -421,76 +520,290 @@ const onRowPerPageChange = (value) => {
             </template>
             <!-- to show other cell data -->
             <template v-else>
-              <div>
-                <div>{{ props.row[col.field] }}</div>
-                <div class="td-caption text-body-xs" v-if="col.captionKey">
+              <div class="td-grid-content">
+                <div v-if="col.type !== 'icon'">
+                  {{ props.row[col.field] }}
+                </div>
+                <div v-else-if="col.type === 'icon'">
+                  <template v-if="props.row[col.field]">
+                    <q-icon
+                      :class="props.row[col.field]"
+                      :alt="props.row.ariaLabel"
+                      :aria-label="props.row.ariaLabel"
+                      :color="props?.row?.iconColor ?? 'primary'"
+                      size="1.5rem"
+                    />
+                  </template>
+                </div>
+                <div
+                  v-if="col.captionKey && col.type !== 'icon'"
+                  class="td-caption text-body-xs"
+                >
                   {{ props.row[col.captionKey] }}
                 </div>
               </div>
             </template>
           </UTd>
           <!-- to the action cell, it can have single and multiple  -->
+
           <UTd
-            v-else
+            v-else-if="typeof col.show === 'undefined' || col.show"
+            :class="col.classes"
             :index="index"
-            :tableDataAlignment="col.align"
-            :tableDataAutoWidth="false"
-            style="width: 3%"
             :separator="separator"
             :style="col.style"
-            :class="col.classes"
+            style="width: 3%"
+            :tableDataAlignment="col.align"
+            :tableDataAutoWidth="false"
+            @click="handleActionColClick"
           >
             <template v-if="col.actions && col.actions.length === 1">
-              <UBtnStd
-                v-for="(action, key) in col.actions"
-                :key="key"
-                :size="action.size"
-                :flat="action.flat"
-                :label="action.label"
-                :color="action.color"
-                :leftIcon="action.icon"
-                @onClick="action.handler(props.row)"
-              />
+              <template v-for="(action, key) in col.actions" :key="key">
+                <UBtnStd
+                  v-if="
+                    typeof action.hide === 'function'
+                      ? !action.hide(props.row)
+                      : true
+                  "
+                  :color="
+                    typeof action.color === 'function'
+                      ? action.color(props.row)
+                      : action.color
+                  "
+                  :disable="
+                    typeof action.disable === 'function' &&
+                    action.disable(props.row)
+                  "
+                  :flat="
+                    typeof action.flat === 'function'
+                      ? action.flat(props.row)
+                      : action.flat
+                  "
+                  :key="key"
+                  :label="
+                    typeof action.label === 'function'
+                      ? action.label(props.row)
+                      : action.label
+                  "
+                  :leftIcon="
+                    typeof action.icon === 'function'
+                      ? action.icon(props.row)
+                      : action.icon
+                  "
+                  :loading="
+                    typeof action.loading === 'function'
+                      ? action.loading(props.row)
+                      : action.loading
+                  "
+                  :outline="
+                    typeof action.outline === 'function'
+                      ? action.outline(props.row)
+                      : action.outline
+                  "
+                  :size="action.size"
+                  @on-click="action.handler(props.row)"
+                >
+                  <template #tooltip>
+                    <UTooltip
+                      v-if="
+                        typeof action.tooltip === 'function'
+                          ? action.tooltip(props.row)
+                          : action.tooltip
+                      "
+                      :anchor="action.anchor"
+                      :description="
+                        typeof action.tooltip === 'function'
+                          ? action.tooltip(props.row)
+                          : action.tooltip
+                      "
+                      :offset="action.offset ? action.offset : [10, 40]"
+                      :self="action.self"
+                    />
+                  </template>
+                </UBtnStd>
+              </template>
             </template>
             <!-- to show the actions list if the actions are multiple -->
             <template v-else>
-              <q-icon
-                size="xs"
-                class="fa-kit fa-ellipsis-vertical action-icon cursor-pointer"
-                aria-label="more-action-icon"
-                alt="action-icon-more"
-                tabindex="0"
+              <q-menu
+                v-if="
+                  moreActionDialogData &&
+                  moreActionDialogData.showDialog[props.row.id]
+                "
+                v-model="moreActionDialogData.showDialog[props.row.id]"
+                :class="`more-action-popup q-px-ba q-py-ba`"
+                anchor="top left"
+                :cover="false"
+                :fit="true"
+                :id="`actionPopupRef-${props.row.id}`"
+                :offset="[85, 0]"
+                role="list"
+                self="bottom middle"
+                transition-hide="scale"
+                transition-show="scale"
+                @show="checkMenuPosition(props.row.id)"
               >
-                <UTooltip description="More Actions" />
-                <q-menu
-                  transition-show="slide-left"
-                  transition-hide="slide-right"
-                  anchor="center start"
-                  self="center left"
-                >
-                  <div
-                    class="flex justify-end items-center more-action-wrapper"
-                  >
-                    <template v-for="(action, key) in col.actions" :key="key">
-                      <UTooltip
-                        :target="`#more-action-${key}`"
-                        :description="action.tooltip"
-                      />
-                      <q-icon
-                        :size="action.size"
-                        :id="`more-action-${key}`"
-                        :class="`more-action-icon ${
-                          action.icon
-                        } cursor-pointer ${key > 0 ? 'q-ml-sm' : ''}`"
-                        :aria-label="action.label"
-                        :alt="`${action.label}-key`"
-                        @click="action.handler(props.row)"
-                        tabindex="0"
-                      />
-                    </template>
-                  </div>
-                </q-menu>
-              </q-icon>
+                <div :class="tailClass"></div>
+                <q-card class="more-action-popup-wrapper">
+                  <q-card-section>
+                    <div class="content-wrapper text-center">
+                      <div class="q-pb-ba flex justify-center items-center">
+                        <div
+                          :class="`remove-icon-wrapper ${
+                            moreActionDialogData.row.iconColor === 'accent'
+                              ? 'icon-bg-accent'
+                              : 'icon-bg-primary'
+                          }`"
+                        >
+                          <q-icon
+                            :class="`${moreActionDialogData.row.icon} ${
+                              moreActionDialogData.row.iconColor === 'accent'
+                                ? 'icon-text-accent'
+                                : 'icon-text-primary'
+                            }`"
+                            alt="confirmation icon"
+                            aria-label="confirmation icon"
+                            size="1.5rem"
+                          />
+                        </div>
+                      </div>
+
+                      <div
+                        class="text-heading-xxs primary-content-text q-pb-xxs"
+                      >
+                        {{ moreActionDialogData.row.title }}
+                      </div>
+                      <div
+                        v-if="moreActionDialogData.row.description"
+                        class="text-body-sm secondary-content-text q-pb-xs"
+                      >
+                        {{ moreActionDialogData.row.description }}
+                      </div>
+                    </div>
+                    <!-- <p class="hidden-scope-value">{{ scope.value }}</p> -->
+                  </q-card-section>
+
+                  <q-card-actions align="right">
+                    <UBtnStd
+                      v-if="moreActionDialogData.secondaryAction"
+                      :color="moreActionDialogData.secondaryAction.color"
+                      :disable="moreActionDialogData.secondaryAction.disable"
+                      :flat="moreActionDialogData.secondaryAction.flat"
+                      :label="moreActionDialogData.secondaryAction.label"
+                      :loading="moreActionDialogData.secondaryAction.loading"
+                      :outline="moreActionDialogData.secondaryAction.outline"
+                      :size="moreActionDialogData.secondaryAction.size"
+                      @on-click="
+                        moreActionDialogData.secondaryAction.handler(props.row)
+                      "
+                    />
+                    <UBtnStd
+                      v-if="moreActionDialogData.primaryAction"
+                      class="confirm-primary-action"
+                      :color="moreActionDialogData.primaryAction.color"
+                      :disable="moreActionDialogData.primaryAction.disable"
+                      :flat="moreActionDialogData.primaryAction.flat"
+                      :label="moreActionDialogData.primaryAction.label"
+                      :loading="moreActionDialogData.primaryAction.loading"
+                      :outline="moreActionDialogData.primaryAction.outline"
+                      :size="moreActionDialogData.primaryAction.size"
+                      @on-click="
+                        moreActionDialogData.primaryAction.handler(props.row)
+                      "
+                    />
+                  </q-card-actions>
+                </q-card>
+              </q-menu>
+
+              <UBtnIcon
+                :class="`action-icon cursor-pointer`"
+                iconClass="fa-kit fa-ellipsis-vertical"
+                ariaLabel="More action"
+                :id="`actionPopupRefBtn-${props.row.id}`"
+                :key="index"
+                ref="btn-icon"
+                @click.stop="handleMenuEventStop"
+                @on-click="onMoreActionButtonClick(props.row.id)"
+              >
+                <template #menu>
+                  <q-menu v-if="!verticalMoreActions" auto-close role="list">
+                    <div
+                      :class="`${
+                        verticalMoreActions ? 'vertical' : 'horizontal'
+                      }-more-action-wrapper more-action-common`"
+                    >
+                      <template v-for="(action, key) in col.actions" :key="key">
+                        <UBtnIcon
+                          v-if="
+                            typeof action.hide === 'function'
+                              ? !action.hide(props.row)
+                              : true && !verticalMoreActions
+                          "
+                          :class="`more-action-icon cursor-pointer table-more-action`"
+                          :iconClass="
+                            typeof action.icon === 'function'
+                              ? action.icon(props.row)
+                              : action.icon
+                          "
+                          :anchor="action.anchor"
+                          :ariaLabel="
+                            typeof action.label === 'function'
+                              ? action.label(props.row)
+                              : action.label
+                          "
+                          :disable="
+                            typeof action.disable === 'function' &&
+                            action.disable(props.row)
+                          "
+                          :id="`more-action-${key}`"
+                          :offset="action.offset ? action.offset : [10, 40]"
+                          ref="btn-icon"
+                          :self="action.self"
+                          :size="action.size"
+                          :tooltip="
+                            typeof action.tooltip === 'function'
+                              ? action.tooltip(props.row)
+                              : action.tooltip
+                          "
+                          @click.stop="handleMenuEventStop"
+                          @on-click="action.handler(props.row)"
+                        />
+                      </template>
+                    </div>
+                  </q-menu>
+
+                  <q-menu v-else auto-close role="list">
+                    <UMenuDropdown
+                      v-if="verticalMoreActions"
+                      :data="
+                        col.actions.map((action) => {
+                          return {
+                            destructive: action.destructive,
+                            disable:
+                              typeof action.disable === 'function' &&
+                              action.disable(props.row),
+                            hide: !(typeof action.hide === 'function'
+                              ? !action.hide(props.row)
+                              : true),
+                            label:
+                              typeof action.label === 'function'
+                                ? action.label(props.row)
+                                : action.label,
+                            leftIcon:
+                              typeof action.icon === 'function'
+                                ? action.icon(props.row)
+                                : action.icon,
+                            positive: action.positive,
+                            handler: function () {
+                              return action.handler(props.row)
+                            },
+                          }
+                        })
+                      "
+                    />
+                  </q-menu>
+                </template>
+              </UBtnIcon>
             </template>
           </UTd>
         </template>
@@ -508,16 +821,30 @@ const onRowPerPageChange = (value) => {
     </template> -->
   </UTable>
   <!-- customized pagination with the vitual scroll functionality and rows per page selection -->
-  <div class="row justify-end items-center pagination-wrapper">
+  <div
+    v-if="showPagination"
+    :class="`row justify-end items-center pagination-wrapper${
+      grid ? ' grid-row-pagination' : ''
+    }${isSmallDevices ? ' small-device-pagination' : ''}`"
+    dataTestId="table-pagination"
+  >
     <UPagination
-      v-if="rows.length >= 6"
+      v-if="updatedRows.length >= 6"
       v-model="pagination.page"
-      :rowPerPage="pagination.rowsPerPage"
+      :maxPageLink="
+        Number(
+          Math.ceil(updatedRows.length / pagination.rowsPerPage) > 10
+            ? grid
+              ? 3
+              : 6
+            : 3
+        )
+      "
+      :maxPages="Number(Math.ceil(updatedRows.length / pagination.rowsPerPage))"
       :perPageOptions="getRowsPerPageOptions"
+      :rowPerPage="pagination.rowsPerPage"
       @onPageChange="onPageChange"
       @onRowChange="onRowPerPageChange"
-      :maxPageLink="Number(maxPageLink)"
-      :maxPages="Number(Math.ceil(rows.length / pagination.rowsPerPage))"
     />
   </div>
   <q-inner-loading :showing="customLoading" class="custom-table-loader" />
@@ -525,9 +852,16 @@ const onRowPerPageChange = (value) => {
 
 <style lang="sass">
 .action-icon
-  height: $md
-  width: $md
-  color: $neutral-9
+  &:hover
+    background: $blue-1
+
+  .q-icon
+    height: $md !important
+    width: $md !important
+    color: $neutral-9 !important
+    font-size: $ba !important
+    &:hover
+      color: $primary !important
 
 .table-data-avatar
   padding: $xs
@@ -535,8 +869,10 @@ const onRowPerPageChange = (value) => {
 
 .td-caption
   color: $description
+  width: 12.5rem
+  word-break: break-word
 
-.more-action-wrapper
+.more-action-common
   min-width: 3.125rem
   padding: $xs
   min-height: $xl
@@ -545,13 +881,42 @@ const onRowPerPageChange = (value) => {
   background: $surface-bg-1
   box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
 
-.more-action-icon
-  color: $neutral-9
+.vertical-more-action-wrapper
+  display: grid
+  place-items: flex-start
+  place-content: center
+  padding: $xxs
+  gap: $xxs
 
-.sorting-icon
-  color: $description
-  padding-left: $xs
-  font-size: $ba !important
+.horizontal-more-action-wrapper
+  display: flex
+  align-items: center
+  justify-content: start
+
+.vertical-single-action
+  width: 100%
+  gap: $xs
+  padding: 0 $xs
+  height: $lg
+
+  .q-item__section--main
+    color: $neutral-9
+    white-space: nowrap
+
+  .q-item__section--avatar
+    min-width: 0px
+
+  .q-item__section--side
+    padding-right: 0
+
+  .q-icon
+    color: $neutral-9
+    font-size: $ba
+
+.more-action-icon
+  .q-icon
+    color: $neutral-9 !important
+    font-size: $ba !important
 
 .selected-data-row
   background: #F7F7F7
@@ -573,9 +938,97 @@ const onRowPerPageChange = (value) => {
 .u-virtualscroll-table
   height: 50rem
 
+.u-virtualscroll-grid-table.grid-card-mobile
+  .q-table__grid-content
+    .grid-style-transition
+      padding-left: 0px
+      padding-right: 0px
+
+.u-virtualscroll-grid-table.grid-card-tablet
+  .q-table__grid-content
+    > :nth-child(odd)
+      padding-left: 0px
+    > :nth-child(even)
+      padding-right: 0px
+
 .u-virtualscroll-grid-table
-  max-height: 50rem
-  overflow: auto
+  // max-height: 50rem
+  // overflow: auto
+  .q-table__middle
+    display: none
+
+  .q-item.q-item-type .q-item__section--main
+    padding-bottom: $xxs !important
+
+  .q-list
+    display: grid
+    row-gap: $xs
+    column-gap: $xs
+    grid-template-columns: 1fr 1fr
+    padding-left: $ba
+    padding-right: $ba
+    height: 100%
+    min-height: 26.125rem
+
+  .q-item__label
+    color: $neutral-9
+    font-size: 0.875rem
+    font-weight: 500
+    line-height: 1.063rem !important
+    opacity: 1
+    word-break: break-word
+
+  .q-item__label.q-item__label--caption
+    color: $dark
+    font-size: $ba
+    font-weight: 400
+    line-height: 1.188rem !important
+    word-break: break-word
+
+  .q-table__grid-content
+    .q-table__grid-item
+      padding: $xs
+
+  .q-card
+    overflow: auto
+    padding-top: 0px !important
+    border-radius: $xs
+    border: 1px solid $neutral-4
+    box-shadow: none
+
+    .mobile-centered-col
+      grid-column: span 2
+
+    .q-item.q-item-type
+      margin-top: 0px !important
+      align-self: start
+      height: auto
+      display: grid !important
+      padding: 0px !important
+      .q-item__section--side
+        align-items: flex-start
+        padding-left: 0px
+
+    .q-item.q-item-type:last-child
+      grid-column: span 2
+      padding-top: $ba !important
+      margin-bottom: $ba !important
+
+      .column.q-item__section--main
+        display: none
+
+    .q-item.q-item-type:first-child
+      grid-column: span 2
+      padding-top: $sm !important
+      padding-bottom: $sm !important
+      .q-item__section--main
+        display: none
+      .q-item__label.q-item__label--caption span
+        color: $dark
+        font-size: 1rem
+        font-weight: 500
+        line-height: 1.063rem
+        width: 100%
 
 .u-sticky-table-header
   .q-table__top,
@@ -591,10 +1044,10 @@ const onRowPerPageChange = (value) => {
     top: 0
 
   &.q-table--loading thead tr:last-child th
-    top: 48px
+    top: 3rem
 
   tbody
-    scroll-margin-top: 48px
+    scroll-margin-top: 3rem
 
 .u-sorting-btn
   padding: 0
@@ -621,4 +1074,151 @@ const onRowPerPageChange = (value) => {
 .custom-table-loader
   .q-spinner
     color: $primary
+
+.td-grid-content
+  text-wrap: balance
+  word-break: break-all
+
+.hidden-header-label
+  visibility: hidden
+
+.confirmation-dialog-wrapper
+  border-radius: $border-radius-sm !important
+  background: $neutral-1
+  box-shadow: 0rem 0rem 0.75rem 0rem rgba(16, 17, 20, 0.16) !important
+
+.confirmation-dialog-wrapper.mobile-confirmation-dialog
+  max-width: 100% !important
+  padding: 0px !important
+
+.more-action-popup
+  border-radius: $border-radius-sm
+  background: $neutral-1
+  box-shadow: 0rem 0rem 0.75rem 0rem rgba(16, 17, 20, 0.16)
+  max-width: 18.375rem !important
+  width: 100%
+  position: relative
+  overflow: visible
+
+.more-action-popup-wrapper
+  box-shadow: none !important
+  max-width: 18.375rem !important
+  width: 100%
+  .hidden-scope-value
+    display: none
+  .q-card__section
+    padding: 0
+  .q-card__actions
+    flex-wrap: nowrap
+    padding: $ba 0 0 0
+    .q-btn
+      width: 50%
+
+.content-wrapper
+  display: grid
+  place-content: center
+  place-items: center
+
+.secondary-content-text
+  color: $description
+
+.primary-content-text
+  color: $dark
+
+.remove-icon-wrapper
+  border-radius: 7.75rem
+  padding: $sm
+  width: 3.125rem
+  height: 3.125rem
+  .q-icon
+    color: $accent
+
+.confirm-primary-action
+  margin-left: $ba !important
+
+.icon-bg-accent
+  background-color: $red-1
+
+.icon-bg-primary
+  background-color: $blue-1
+
+.icon-text-accent
+  color: $accent
+
+.icon-text-primary
+  color: $primary !important
+
+.tail-top
+  width: 1.25rem
+  height: 1.25rem
+  transform: rotate(45deg)
+  position: absolute
+  right: 1.304rem
+  top: -0.604rem
+  border-top-left-radius: $border-radius-xs
+  background: $neutral-1
+  box-shadow: -3px -2px 5px -3px rgba(0, 0, 0, 0.2)
+
+.tail-bottom
+  width: 1.25rem
+  height: 1.25rem
+  transform: rotate(45deg)
+  position: absolute
+  right: 1.304rem
+  bottom: -0.604rem
+  border-bottom-right-radius: $border-radius-xs
+  background: $neutral-1
+  box-shadow: 3px 4px 5px -3px rgba(0, 0, 0, 0.2)
+
+.mobile-tail-top
+  right: 1.304rem !important
+
+.mobile-tail-bottom
+  right: 1.304rem !important
+
+.grid-row-pagination
+  .u-pagination-container
+    flex-wrap: nowrap
+  .q-pagination__middle
+    flex-wrap: nowrap
+
+.small-device-pagination
+  .u-pagination-container
+    flex-wrap: wrap
+    gap: $xs
+    justify-content: flex-end
+
+.mobile-grid-more-action
+  padding: 0px !important
+  .q-item
+    border-radius: $xs
+
+.grid-more-action
+  padding: $ba
+  .q-item__section--avatar
+    min-width: 0
+  .q-item
+    border-radius: $xs
+
+.long-text-content
+  display: block
+  white-space: nowrap
+  width: 5.5rem
+  overflow: hidden
+  text-overflow: ellipsis
+
+.no-ellipsis-content
+  white-space: normal !important
+
+.full-width-text-content
+  width: 19.5rem !important
+
+.tablet-event-text
+  width: 10.5rem
+
+.mobile-primary-caption
+  width: 11.5rem !important
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
 </style>