@usssa/component-library 1.0.0-alpha.21 → 1.0.0-alpha.210

package/src/components/core/UTableStd.vue

@@ -1,109 +1,209 @@
 <script setup>
-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 { useQuasar } from 'quasar'
+import { computed, ref, watch } from 'vue'
+import { useScreenType } from '../../composables/useScreenType'
 import UAvatar from './UAvatar.vue'
+import UBtnIcon from './UBtnIcon.vue'
 import UBtnStd from './UBtnStd.vue'
-import UTooltip from './UTooltip.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 UTooltip from './UTooltip.vue'
+import UTr from './UTable/UTr.vue'
+
+const emit = defineEmits(['onCustomSort', 'onLoadMore', 'parentPageChange'])
+
+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: {
+  actionBtnAriaLabel: {
     type: String,
-    default: '',
+    default: 'More actions',
   },
-  tableRowHover: {
+  applyLabel: {
+    type: String,
+    default: 'Apply',
+  },
+  bordered: {
     type: Boolean,
     default: false,
   },
-  separator: {
+  cancelLabel: {
     type: String,
-    default: 'horizontal',
+    default: 'Cancel',
   },
-  multiSelection: {
+  closeIconLabel: {
+    type: String,
+    default: 'Close Icon',
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+  dataTestId: {
+    type: String,
+    default: 'table-std',
+  },
+  enableIconToggle: {
+    type: Boolean,
+    default: false,
+  },
+
+  enableGridOn: {
+    type: Array,
+    default: () => ['tablet', 'mobile'],
+  },
+  enableMultiColMobileExpansion: {
+    type: Boolean,
+    default: false,
+  },
+  expansion: {
     type: Boolean,
     default: false,
   },
+  filter: {
+    type: String,
+    default: '',
+  },
   flat: {
     type: Boolean,
     default: false,
   },
-  bordered: {
+  infiniteScroll: {
     type: Boolean,
     default: false,
   },
-  grid: {
+  infiniteScrollProperty: {
+    type: Object,
+    default: () => {
+      return {
+        color: 'primary',
+        height: '55rem',
+        image: '',
+        loading: false,
+        loadingMessage: 'Loading data',
+        noMoreData: false,
+        noMoreDataText: 'No more data',
+        padding: true,
+        size: '1rem',
+        type: 'default',
+      }
+    },
+  },
+  isCustomSort: {
     type: Boolean,
     default: false,
   },
-  virtualScroll: {
+  multiSelection: {
     type: Boolean,
     default: false,
   },
+  noDataFound: {
+    type: String,
+    default: 'No Data Found',
+  },
+  pageOptions: {
+    type: Array,
+    default: () => [
+      { label: '5 / per page', value: 5 },
+      { label: '10 / per page', value: 10 },
+      { label: '15 / per page', value: 15 },
+      { label: '20 / per page', value: 20 },
+      { label: '25 / per page', value: 25 },
+    ],
+  },
+  rowCardHeight: {
+    type: Number,
+    default: 25,
+  },
+  selectMoreOptions: {
+    type: String,
+    default: 'Select More Options',
+  },
+  separator: {
+    type: String,
+    default: 'horizontal',
+  },
+  sheetLabel: {
+    type: String,
+    default: 'Selections Per Page',
+  },
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
   stickyHeader: {
     type: Boolean,
     default: false,
   },
-  isCustomSort: {
+  tableRowHover: {
     type: Boolean,
     default: false,
   },
-  customClass: {
+  title: {
     type: String,
     default: '',
   },
-  showPagination: {
+  verticalMoreActions: {
     type: Boolean,
-    default: true,
+    default: false,
+  },
+  viewMoreLabel: {
+    type: String,
+    default: 'View More',
+  },
+  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: { page: 1, rowsPerPage: 15 },
-  type: Object,
-})
-const loading = defineModel('loading', {
-  default: () => {},
-  type: Boolean,
-})
-const customLoading = ref(false)
-const rowsPerPageOptions = ref([
-  { label: '5 / per page', value: 5 },
-  { label: '10 / per page', value: 10 },
-  { label: '15 / per page', value: 15 },
-  { label: '20 / per page', value: 20 },
-  { label: '25 / per page', value: 25 },
-])
+const $q = useQuasar()
+const $screen = useScreenType()
 
+const customLoading = ref(false)
+const rowsPerPageOptions = ref(props.pageOptions)
 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 currentScreen = computed(() => {
+  if ($screen.value.isDesktop) return 'desktop'
+  if ($screen.value.isTablet) return 'tablet'
+  return 'mobile'
+})
+
+// if virtual scroll is enabled then adding large rows per page to view in virtual scroll
 const getRowsPerPageOptions = computed(() => {
   if (props.virtualScroll) {
     return [
@@ -117,6 +217,76 @@ const getRowsPerPageOptions = computed(() => {
   }
 })
 
+const isMobileOrTablet = computed(
+  () => $screen.value.isMobile || $screen.value.isTablet
+)
+const isSmallDevices = computed(() => $q.screen.width < 390)
+
+const updatedRows = computed(() => {
+  if (props.filter.length && filteredRows.value?.length)
+    return filteredRows.value
+  else if (props.filter.length) return []
+  return rows.value
+})
+
+// checking the menu position after show menu
+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 function 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'
+  }
+}
+
+// Methods to filter actions based on responsiveDisplay
+const getInlineActions = (col) => {
+  return col.actions.filter((action) => {
+    const display = action.responsiveDisplay?.[currentScreen.value] || 'menu'
+    return display === 'inline'
+  })
+}
+
+const getMenuActions = (col) => {
+  return col.actions.filter((action) => {
+    const display = action.responsiveDisplay?.[currentScreen.value] || 'menu'
+    return display === 'menu'
+  })
+}
+
 //getting the sorted icon according the order
 const getSortingIcon = (col) => {
   if (col) {
@@ -128,45 +298,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.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
-              }
-            })
-        }
-      },
-    })
-  }
+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
@@ -199,23 +343,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)
@@ -226,154 +353,258 @@ 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 onRowClick = (event, row) => {
-  if (props.multiSelection) {
-    event.stopPropagation()
-    handleToSelectRow(row)
+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)
+    }
   }
 }
 
-//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']
+// 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 'neutral-3'
+    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
+            }
+          })
+        }
+      },
+    })
+  }
+}
+
+// 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
 const onPageChange = (value) => {
   pagination.value.page = value
+  emit('parentPageChange', 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
 }
+
+// watchers
+watch(
+  () => currentScreen.value,
+  (newVal) => {
+    grid.value = props.enableGridOn.includes(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"
-    :grid="grid"
-    :virtualScroll="virtualScroll"
-    :stickyHeader="stickyHeader"
+    v-model:rows="rows"
     :class="customClass"
-    :showPagination="showPagination"
+    :bordered="bordered"
+    :close-icon-label="closeIconLabel"
+    :dataTestId="dataTestId"
+    :enable-icon-toggle="enableIconToggle"
+    :enable-multi-col-mobile-expansion="enableMultiColMobileExpansion"
+    :expansion="expansion"
+    :filter="filter"
+    :flat="flat"
+    :grid="grid"
+    :infinite-scroll="infiniteScroll"
+    :infinite-scroll-property="infiniteScrollProperty"
+    :loading="loading"
+    :row-card-height="rowCardHeight"
+    :select-more-options="selectMoreOptions"
+    :separator="separator"
+    :show-pagination="showPagination"
+    :sticky-header="stickyHeader"
+    :title="title"
+    :view-more-label="viewMoreLabel"
+    :virtual-scroll="virtualScroll"
+    @on-load-more="(payload) => $emit('onLoadMore', payload)"
   >
     <!-- 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="
+              typeof col.headerStyle === 'function'
+                ? col.headerStyle($screen)
+                : 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">
+                <UChip
+                  v-if="
+                    isMobileOrTablet &&
+                    col.showAlignedChip &&
+                    typeof col.showAlignedChip === 'function' &&
+                    col.showAlignedChip(props.row)
+                  "
+                  v-model="tableDataChip"
+                  :class="[
+                    expansion ? 'q-ma-none' : 'q-mr-xs',
+                    col.showAlignedChip(props.row).class,
+                  ]"
+                  :avatarLabel="col.showAlignedChip(props.row).avatarLabel"
+                  :chipLabel="col.showAlignedChip(props.row).chipLabel"
+                  :dense="col.showAlignedChip(props.row).dense"
+                  :removable="col.showAlignedChip(props.row).removable"
+                  :type="col.showAlignedChip(props.row).type"
+                />
                 <div
                   v-if="
                     props.row[col.avatarKey] &&
@@ -383,106 +614,578 @@ const onRowPerPageChange = (value) => {
                 >
                   <UAvatar
                     v-if="props.row[col.avatarKey]?.type === 'initials'"
-                    size="md"
+                    :indicatorColor="
+                      typeof col.indicatorColor === 'function' &&
+                      col.indicatorColor(props.row)
+                        ? col.indicatorColor(props.row)
+                        : ''
+                    "
+                    :indicatorIcon="
+                      typeof col.indicatorIcon === 'function' &&
+                      col.indicatorIcon(props.row)
+                        ? col.indicatorIcon(props.row)
+                        : ''
+                    "
                     :name="`${props.row[col.avatarKey]?.value}`"
+                    :showIndicator="col.showIndicator"
+                    size="md"
                   />
                   <UAvatar
                     v-else-if="props.row[col.avatarKey]?.type === 'image'"
-                    size="md"
+                    :image="`${props.row[col.avatarKey]?.value}`"
+                    :indicatorColor="
+                      typeof col.indicatorColor === 'function' &&
+                      col.indicatorColor(props.row)
+                        ? col.indicatorColor(props.row)
+                        : ''
+                    "
+                    :indicatorIcon="
+                      typeof col.indicatorIcon === 'function' &&
+                      col.indicatorIcon(props.row)
+                        ? col.indicatorIcon(props.row)
+                        : ''
+                    "
                     :name="
                       props.row[col.avatarKey]?.name ??
                       props.row[col.avatarKey]?.value
                     "
-                    :image="`${props.row[col.avatarKey]?.value}`"
+                    :showIndicator="col.showIndicator"
+                    size="md"
                   />
                 </div>
                 <div v-else class="table-data-avatar">
                   <UAvatar
-                    size="md"
-                    :name="`${props.row[col.avatarKey]}`"
                     :image="`${props.row[col.avatarKey]}`"
+                    :indicatorColor="
+                      typeof col.indicatorColor === 'function' &&
+                      col.indicatorColor(props.row)
+                        ? col.indicatorColor(props.row)
+                        : ''
+                    "
+                    :indicatorIcon="
+                      typeof col.indicatorIcon === 'function' &&
+                      col.indicatorIcon(props.row)
+                        ? col.indicatorIcon(props.row)
+                        : ''
+                    "
+                    :name="`${props.row[col.avatarKey]}`"
+                    :showIndicator="col.showIndicator"
+                    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">
-                    {{ props.row[col.captionKey] }}
+                  <div>
+                    {{ props.row[col.field] }}
+                  </div>
+
+                  <div
+                    v-if="
+                      col.captionKey &&
+                      typeof col.showCaption === 'function' &&
+                      col.showCaption(props.row)
+                        ? col.showCaption(props.row)
+                        : false
+                    "
+                    class="td-caption mobile-primary-caption text-body-xs"
+                  >
+                    <span v-if="col.captionKeyTitle">
+                      {{ col.captionKeyTitle }}:
+                    </span>
+                    <span> {{ props.row[col.captionKey] }}</span>
+                    <UTooltip
+                      v-if="props.row[col.captionKey].length > 15"
+                      anchor="top middle"
+                      :description="props.row[col.captionKey]"
+                      :offset="[0, 0]"
+                      self="bottom middle"
+                    />
                   </div>
                 </div>
               </div>
             </template>
             <!-- to show other cell data -->
             <template v-else>
-              <div class="td-grid-content">
-                <div>{{ props.row[col.field] }}</div>
-                <div class="td-caption text-body-xs" v-if="col.captionKey">
+              <div
+                :class="`td-grid-content${
+                  typeof col.combineColoumn === 'function' &&
+                  col.combineColoumn(props.row)
+                    ? ' combine-col-wrapper'
+                    : ''
+                }`"
+              >
+                <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>
+                <template
+                  v-if="
+                    typeof col.combineColoumn === 'function' &&
+                    col.combineColoumn(props.row)
+                  "
+                >
+                  <template
+                    v-for="(combineCol, colKey) in col.combineColoumn(
+                      props.row
+                    )"
+                    :key="colKey"
+                  >
+                    <q-icon
+                      v-if="combineCol.icon"
+                      :class="combineCol.icon"
+                      :alt="combineCol.ariaLabel"
+                      :aria-label="combineCol.ariaLabel"
+                      :color="combineCol?.iconColor ?? 'primary'"
+                      :key="colKey"
+                      size="1rem"
+                    />
+                    <div v-else>{{ props.row[combineCol.key] }}</div>
+                  </template>
+                </template>
               </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)"
-              />
+            <!-- Responsive actions logic -->
+            <template v-if="col.useResponsiveActions">
+              <div class="table-desktop-multi-actions">
+                <!-- Inline actions -->
+                <template
+                  v-for="(action, key) in getInlineActions(col)"
+                  :key="key"
+                >
+                  <UBtnStd
+                    v-if="
+                      typeof action.hide === 'function'
+                        ? !action.hide(props.row)
+                        : true
+                    "
+                    :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
+                    "
+                    :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
+                    "
+                    :label="
+                      typeof action.label === 'function'
+                        ? action.label(props.row)
+                        : action.label
+                    "
+                    :loading="
+                      typeof action.loading === 'function'
+                        ? action.loading(props.row)
+                        : action.loading
+                    "
+                    :offset="action.offset ? action.offset : [10, 40]"
+                    :outline="
+                      typeof action.outline === 'function'
+                        ? action.outline()
+                        : action.outline
+                    "
+                    :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>
+                <!-- Three-dot menu for menu actions -->
+                <UBtnIcon
+                  v-if="getMenuActions(col).length > 0"
+                  :class="`action-icon cursor-pointer`"
+                  iconClass="fa-kit fa-ellipsis-vertical"
+                  :aria-label="actionBtnAriaLabel"
+                  :id="`actionPopupRefBtn-${props.row.id}`"
+                  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 getMenuActions(col)"
+                          :key="key"
+                        >
+                          <UBtnIcon
+                            v-if="
+                              typeof action.hide === 'function'
+                                ? !action.hide(props.row)
+                                : true
+                            "
+                            :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="
+                          getMenuActions(col).map((action) => ({
+                            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>
+              </div>
             </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"
-              >
-                <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-if="col.actions && col.actions.length === 1">
+                <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 v-for="(action, key) in col.actions" :key="key">
+                    <template #tooltip>
                       <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"
+                        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>
-                  </div>
+                  </UBtnStd>
+                </template>
+              </template>
+              <!-- to show the actions list if the actions are multiple -->
+              <template v-else>
+                <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)"
+                >
+                  <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>
-              </q-icon>
+
+                <UBtnIcon
+                  :class="`action-icon cursor-pointer`"
+                  iconClass="fa-kit fa-ellipsis-vertical"
+                  :aria-label="actionBtnAriaLabel"
+                  :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>
             </template>
           </UTd>
         </template>
@@ -491,7 +1194,7 @@ const onRowPerPageChange = (value) => {
     <!-- slot to show if there is no data in rows -->
     <template v-slot:no-data>
       <div class="full-width row flex-center text-accent q-gutter-sm">
-        <span> No Data Found </span>
+        <span> {{ props.noDataFound }} </span>
       </div>
     </template>
     <!-- to add the custom loading state -->
@@ -501,20 +1204,33 @@ const onRowPerPageChange = (value) => {
   </UTable>
   <!-- customized pagination with the vitual scroll functionality and rows per page selection -->
   <div
-    v-if="showPagination"
-    class="row justify-end items-center pagination-wrapper"
+    v-if="showPagination && !infiniteScroll"
+    :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"
+      :apply-label="applyLabel"
+      :cancel-label="cancelLabel"
+      :close-icon-label="closeIconLabel"
+      :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"
+      :sheet-label="sheetLabel"
       @onPageChange="onPageChange"
       @onRowChange="onRowPerPageChange"
-      :maxPageLink="
-        Number(Math.ceil(rows.length / pagination.rowsPerPage > 10 ? 6 : 3))
-      "
-      :maxPages="Number(Math.ceil(rows.length / pagination.rowsPerPage))"
     />
   </div>
   <q-inner-loading :showing="customLoading" class="custom-table-loader" />
@@ -522,9 +1238,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
@@ -532,23 +1255,54 @@ 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
   gap: $xs
   border-bottom: 1.5px solid $neutral-4
   background: $surface-bg-1
-  box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+  box-shadow: 0px 0px $xxs 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
@@ -570,9 +1324,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-y: 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,
@@ -588,10 +1430,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
@@ -622,4 +1464,190 @@ const onRowPerPageChange = (value) => {
 .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 $sm 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 $sm 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 $xxs 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 !important
+  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
+
+.combine-col-wrapper
+  display: flex
+  justify-content: center
+  align-items: center
+  gap: $xxs
+
+.combine-col-small-device-wrapper
+  display: flex
+  justify-content: flex-start
+  align-items: center
+  gap: $xxs
+
+.q-table__grid-content .u-expansion-table
+  .u-expansion-body
+    display: flex
+    flex-wrap: wrap
+    gap: $xs
+
+    > *:not(:last-child)
+      margin-bottom: $ba
+
+    .table-data-avatar
+      display: flex
+      align-items: center
+      .u-avatar
+        margin-right: $xxs !important
+
+.u-table-infinite-scroll-container
+  color: #000
+  background-color: #fff
+  border-radius: $xxs
+  box-shadow: 0px 0px $xs 0px rgba(16, 17, 20, 0.12)
+
+.table-desktop-multi-actions
+  display: flex
+  justify-content: space-between
+  align-items: center
+  flex-wrap: nowrap
+  gap: $ba
+
+.mobile-expansion-item
+  flex: calc(50% - 8px)
 </style>