@usssa/component-library 1.0.0-beta.8 → 1.0.0-rc.1

package/src/components/core/UTable/UTable.vue

@@ -89,6 +89,10 @@ const props = defineProps({
       }
     },
   },
+  minOverflowLength: {
+    type: Number,
+    default: 12,
+  },
   rowCardHeight: {
     type: Number,
     default: 25,
@@ -131,11 +135,16 @@ const $q = useQuasar()
 const $screen = useScreenType()
 
 const activeMenuId = ref(null)
+const captionMaxWidth = ref('100%')
+const cellOverflowStates = ref({})
+const headerMaxWidth = ref('100%')
+const infiniteNoMoreShow = ref(false)
 const infiniteScrollProp = ref(props.infiniteScrollProperty)
 const isScrollActionActive = ref(false)
+const minOverflowLength = ref(props.minOverflowLength)
 const mobileActionsDialog = ref({})
 const moreActionsDialogs = ref({})
-const infiniteNoMoreShow = ref(false)
+const tableCardWrapperRef = ref(null)
 const tableContainer = ref(null)
 const tableDataChip = ref(true) // this is required to show chip
 const tailClass = ref(null)
@@ -158,6 +167,21 @@ const attachScroll = () => {
   }
 }
 
+const checkCellOverflow = (selector, key) => {
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      const element = document.querySelector(selector)
+
+      if (element) {
+        cellOverflowStates.value[key] =
+          element.scrollWidth > element.clientWidth
+      } else {
+        cellOverflowStates.value[key] = false
+      }
+    })
+  })
+}
+
 // checking the menu position after show
 const checkMenuPosition = (id) => {
   const menuElement = document.getElementById(`actionPopupRef-${id}`) // Access the menu by ID
@@ -255,6 +279,13 @@ const getMenuInlineActions = (col, option) => {
   })
 }
 
+const handleCellOverflowResize = () => {
+  Object.keys(cellOverflowStates.value).forEach((key) => {
+    const selector = `#long-content-${key}`
+    checkCellOverflow(selector, key)
+  })
+}
+
 const handleItemClick = (action, row) => {
   moreActionsDialogs.value[row.id][0].open = false
   setTimeout(() => {
@@ -272,7 +303,6 @@ const handleMenuShow = (id) => {
   activeMenuId.value = id
   checkMenuPosition(id)
   window.addEventListener('scroll', onScroll, true)
-
 }
 
 const handleOpenMobileMoreActions = (id) => {
@@ -323,11 +353,6 @@ const handleScroll = async () => {
   }
 }
 
-// checking for tooltip is content is visible
-const isContentVisible = (field, id, type) => {
-  return document.getElementById(`long-${type}-${field}-${id}`)
-}
-
 const isGridLastRow = (row) => {
   const lastIndex = parseInt(pagination.value.rowsPerPage) - 1
   return row.rowIndex === lastIndex
@@ -339,6 +364,15 @@ const onScroll = () => {
   }
 }
 
+const updateHeaderMaxWidth = () => {
+  nextTick(() => {
+    if (tableCardWrapperRef.value) {
+      headerMaxWidth.value = tableCardWrapperRef.value.offsetWidth - 64 + 'px'
+      captionMaxWidth.value = headerMaxWidth.value
+    }
+  })
+}
+
 onMounted(() => {
   infiniteNoMoreShow.value = false
   nextTick(() => {
@@ -346,10 +380,14 @@ onMounted(() => {
       attachScroll()
     }
   })
+  updateHeaderMaxWidth()
+  window.addEventListener('resize', updateHeaderMaxWidth)
 })
 
 onBeforeUnmount(() => {
   detachScroll()
+  window.removeEventListener('resize', updateHeaderMaxWidth)
+  window.removeEventListener('resize', handleCellOverflowResize)
 })
 
 // Watch for changes in infiniteScroll or tableContainer
@@ -421,6 +459,9 @@ watch(
   },
   { immediate: true }
 )
+
+// Re-check on window resize
+window.addEventListener('resize', handleCellOverflowResize)
 </script>
 
 <template>
@@ -482,561 +523,628 @@ watch(
           :style="props.selected ? 'transform: scale(0.95);' : ''"
         >
           <q-card bordered flat>
-            <q-list
-              dense
-              :style="{
-                'min-height': `${rowCardHeight}rem`,
-                overflowX: 'hidden',
-              }"
-            >
-              <template v-for="(col, __k) in props.cols" :key="__k">
-                <q-item
-                  v-if="
-                    col.field === 'action' ||
-                    (typeof col.show === 'function'
-                      ? col.show()
-                      : typeof col.show === 'undefined' || col.show)
-                  "
-                  :class="col.doubleSpan ? 'mobile-centered-col' : ''"
-                >
-                  <q-item-section
-                    v-if="
-                      col.field === 'action' ||
-                      (typeof col.show === 'function'
-                        ? col.show()
-                        : typeof col.show === 'undefined' || col.show)
-                    "
-                  >
-                    <q-item-label> {{ col.label }}</q-item-label>
-                  </q-item-section>
-                  <q-item-section
+            <div class="table-card-wrapper" ref="tableCardWrapperRef">
+              <q-list
+                dense
+                :style="{
+                  'min-height': `${rowCardHeight}rem`,
+                  overflowX: 'hidden',
+                }"
+              >
+                <template v-for="(col, __k) in props.cols" :key="__k">
+                  <q-item
                     v-if="
                       col.field === 'action' ||
                       (typeof col.show === 'function'
                         ? col.show()
                         : typeof col.show === 'undefined' || col.show)
                     "
-                    side
+                    :class="col.doubleSpan ? 'mobile-centered-col' : ''"
                   >
-                    <template
-                      v-if="col.type === 'icon' && props.row[col.field]"
+                    <q-item-section
+                      v-if="
+                        col.field === 'action' ||
+                        (typeof col.show === 'function'
+                          ? col.show()
+                          : typeof col.show === 'undefined' || col.show)
+                      "
                     >
-                      <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>
-                    <template
-                      v-if="col.chipValues && col.chipValues.length > 0"
+                      <q-item-label> {{ col.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section
+                      v-if="
+                        col.field === 'action' ||
+                        (typeof col.show === 'function'
+                          ? col.show()
+                          : typeof col.show === 'undefined' || col.show)
+                      "
+                      side
                     >
-                      <UChip
-                        v-model="tableDataChip"
-                        class="u-table-chip"
-                        :anchor="col.anchor"
-                        avatarLabel=""
-                        :chipLabel="props.row[col.field].toString()"
-                        :dense="isMobile || isTablet ? true : col.denseChip"
-                        :is-show-tooltip="col.showChipTooltip"
-                        :offset="col.offset"
-                        :removable="false"
-                        :type="
-                          getChipColor(col.chipValues, props.row[col.field])
-                        "
-                      />
-                    </template>
-
-                    <template v-else>
-                      <div class="flex justify-center items-center no-wrap">
-                        <div
-                          class="flex justify-center items-center no-wrap"
-                          v-if="
-                            typeof col.showAvatar === 'undefined'
-                              ? col.avatarKey
-                              : col.showAvatar($screen, props.row)
+                      <template
+                        v-if="col.type === 'icon' && 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>
+                      <template
+                        v-if="col.chipValues && col.chipValues.length > 0"
+                      >
+                        <UChip
+                          v-model="tableDataChip"
+                          class="u-table-chip"
+                          :anchor="col.anchor"
+                          avatarLabel=""
+                          :chipLabel="props.row[col.field].toString()"
+                          :dense="isMobile || isTablet ? true : col.denseChip"
+                          :is-show-tooltip="col.showChipTooltip"
+                          :offset="col.offset"
+                          :removable="false"
+                          :type="
+                            getChipColor(col.chipValues, props.row[col.field])
                           "
-                        >
-                          <UChip
-                            v-if="
-                              !isDesktop &&
-                              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
-                            "
-                            :backgroundColor="
-                              col.showAlignedChip(props.row).backgroundColor
-                            "
-                            :chipLabel="
-                              col.showAlignedChip(props.row).chipLabel
-                            "
-                            :dense="col.showAlignedChip(props.row).dense"
-                            :removable="
-                              col.showAlignedChip(props.row).removable
-                            "
-                            :textColor="
-                              col.showAlignedChip(props.row).textColor
-                            "
-                            :type="col.showAlignedChip(props.row).type"
-                          />
+                        />
+                      </template>
+
+                      <template v-else>
+                        <div class="flex justify-center items-center no-wrap">
                           <div
+                            class="flex justify-center items-center no-wrap"
                             v-if="
-                              props.row[col.avatarKey] &&
-                              typeof props.row[col.avatarKey] === 'object'
+                              typeof col.showAvatar === 'undefined'
+                                ? col.avatarKey
+                                : col.showAvatar($screen, props.row)
                             "
-                            class="table-data-avatar"
                           >
-                            <UAvatar
+                            <UChip
                               v-if="
-                                props.row[col.avatarKey]?.type === 'initials'
+                                !isDesktop &&
+                                col.showAlignedChip &&
+                                typeof col.showAlignedChip === 'function' &&
+                                col.showAlignedChip(props.row)
                               "
-                              :indicatorColor="
-                                typeof col.indicatorColor === 'function' &&
-                                col.indicatorColor(props.row)
-                                  ? col.indicatorColor(props.row)
-                                  : ''
+                              v-model="tableDataChip"
+                              :class="[
+                                expansion ? 'q-ma-none' : 'q-mr-xs',
+                                col.showAlignedChip(props.row).class,
+                              ]"
+                              :avatarLabel="
+                                col.showAlignedChip(props.row).avatarLabel
                               "
-                              :indicatorIcon="
-                                typeof col.indicatorIcon === 'function' &&
-                                col.indicatorIcon(props.row)
-                                  ? col.indicatorIcon(props.row)
-                                  : ''
+                              :backgroundColor="
+                                col.showAlignedChip(props.row).backgroundColor
                               "
-                              :name="`${props.row[col.avatarKey]?.value}`"
-                              :showIndicator="col.showIndicator"
-                              size="lg"
-                            />
-                            <UAvatar
-                              v-else-if="
-                                props.row[col.avatarKey]?.type === 'image'
-                              "
-                              :image="`${props.row[col.avatarKey]?.value}`"
-                              :indicatorColor="
-                                typeof col.indicatorColor === 'function' &&
-                                col.indicatorColor(props.row)
-                                  ? col.indicatorColor(props.row)
-                                  : ''
+                              :chipLabel="
+                                col.showAlignedChip(props.row).chipLabel
                               "
-                              :indicatorIcon="
-                                typeof col.indicatorIcon === 'function' &&
-                                col.indicatorIcon(props.row)
-                                  ? col.indicatorIcon(props.row)
-                                  : ''
+                              :dense="col.showAlignedChip(props.row).dense"
+                              :removable="
+                                col.showAlignedChip(props.row).removable
                               "
-                              :name="
-                                props.row[col.avatarKey]?.name ??
-                                props.row[col.avatarKey]?.value
+                              :textColor="
+                                col.showAlignedChip(props.row).textColor
                               "
-                              :showIndicator="col.showIndicator"
-                              size="lg"
+                              :type="col.showAlignedChip(props.row).type"
                             />
-                          </div>
-                          <div v-else class="table-data-avatar">
-                            <UAvatar
-                              :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)
-                                  : ''
+                            <div
+                              v-if="
+                                props.row[col.avatarKey] &&
+                                typeof props.row[col.avatarKey] === 'object'
                               "
-                              :name="`${props.row[col.avatarKey]}`"
-                              :showIndicator="col.showIndicator"
-                              size="lg"
-                            />
+                              class="table-data-avatar"
+                            >
+                              <UAvatar
+                                v-if="
+                                  props.row[col.avatarKey]?.type === 'initials'
+                                "
+                                :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="lg"
+                              />
+                              <UAvatar
+                                v-else-if="
+                                  props.row[col.avatarKey]?.type === 'image'
+                                "
+                                :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
+                                "
+                                :showIndicator="col.showIndicator"
+                                size="lg"
+                              />
+                            </div>
+                            <div v-else class="table-data-avatar">
+                              <UAvatar
+                                :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="lg"
+                              />
+                            </div>
                           </div>
-                        </div>
 
-                        <q-item-label v-if="col.type !== 'icon'" caption>
-                          <span
-                            :class="[
-                              col.value ? 'long-text-content' : '',
-                              col.noEllipsis ? 'no-ellipsis-content' : '',
-                              col.doubleSpan && col.noEllipsis
-                                ? 'full-width-text-content'
-                                : '',
-                              !isResponsiveTablet &&
-                              isTablet &&
-                              col.classes &&
-                              col.classes.length > 0 &&
-                              col.classes[0] === 'no-wrap-text'
-                                ? 'tablet-event-text'
-                                : '',
-                              typeof col.combineColoumn === 'function' &&
-                              col.combineColoumn(props.row)
-                                ? 'combine-col-small-device-wrapper'
-                                : '',
-                            ]"
-                            :id="`long-content-${col.field}-${props.row.id}`"
-                          >
-                            {{ col.value }}
-                          </span>
-                          <template
-                            v-if="
-                              typeof col.combineColoumn === 'function' &&
-                              col.combineColoumn(props.row)
-                            "
+                          <q-item-label
+                            v-if="col.type !== 'icon'"
+                            caption
+                            class="row items-center"
                           >
-                            <template
-                              v-for="(combineCol, colKey) in col.combineColoumn(
-                                props.row
-                              )"
-                              :key="colKey"
+                            <span
+                              :class="[
+                                col.value &&
+                                col.value.length > minOverflowLength &&
+                                !col.header
+                                  ? 'long-text-content'
+                                  : 'card-header-table',
+
+                                col.noEllipsis ? 'no-ellipsis-content' : '',
+                                isTablet && col.header
+                                  ? 'tablet-header-table'
+                                  : '',
+                                isMobile && col.header
+                                  ? 'mobile-header-table'
+                                  : '',
+                                col.doubleSpan && col.noEllipsis
+                                  ? 'full-width-text-content'
+                                  : '',
+                                col.classes,
+                                !isResponsiveTablet &&
+                                isTablet &&
+                                col.classes &&
+                                col.classes.length > 0 &&
+                                col.classes[0] === 'no-wrap-text'
+                                  ? 'tablet-event-text'
+                                  : '',
+                                typeof col.combineColoumn === 'function' &&
+                                col.combineColoumn(props.row)
+                                  ? 'combine-col-small-device-wrapper'
+                                  : '',
+                              ]"
+                              :id="`long-content-${col.field}-${props.row.id}`"
+                              :ref="
+                                (el) =>
+                                  checkCellOverflow(
+                                    `#long-content-${col.field}-${props.row.id}`,
+                                    `${col.field}-${props.row.id}`
+                                  )
+                              "
+                              :style="{ maxWidth: headerMaxWidth }"
+                            >
+                              {{ col.value }}
+                              <span
+                                v-if="col.captionKey && col.type !== 'icon'"
+                                class="td-caption text-body-xs"
+                              >
+                                <span class="text-strike">
+                                  {{ props.row[col.strikeCaptionKey] }}
+                                </span>
+                                {{ props.row[col.captionKey] }}
+                              </span>
+                            </span>
+                            <div
+                              v-if="col.colIcon"
+                              class="q-ml-xs icon-secondary-opacity"
                             >
                               <q-icon
-                                v-if="combineCol.icon"
-                                :class="combineCol.icon"
-                                :alt="combineCol.ariaLabel"
-                                :aria-label="combineCol.ariaLabel"
-                                :color="combineCol?.iconColor ?? 'primary'"
+                                :class="col.colIcon.icon"
+                                :ariaLabel="
+                                  typeof col.colIcon.ariaLabel === 'function'
+                                    ? col.colIcon.ariaLabel(props.row)
+                                    : col.colIcon.ariaLabel
+                                "
+                                color="primary"
+                                size="16px"
+                                ref="btn-icon"
+                                @click.stop="col.colIcon.colIconClick()"
+                                @on-click="col.colIcon.colIconClick()"
+                              >
+                              </q-icon>
+                            </div>
+                            <template
+                              v-if="
+                                typeof col.combineColoumn === 'function' &&
+                                col.combineColoumn(props.row)
+                              "
+                            >
+                              <template
+                                v-for="(
+                                  combineCol, colKey
+                                ) in col.combineColoumn(props.row)"
                                 :key="colKey"
-                                size="1rem"
-                              />
-                              <div v-else>
-                                {{ props.row[combineCol.key] }}
-                              </div>
+                              >
+                                <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>
-                          </template>
-                          <UTooltip
+
+                            <UTooltip
+                              v-if="
+                                col.value &&
+                                col.value.length > minOverflowLength &&
+                                cellOverflowStates[
+                                  `${col.field}-${props.row.id}`
+                                ]
+                              "
+                              anchor="bottom middle"
+                              :description="col.value"
+                              :offset="[10, 40]"
+                              self="bottom middle"
+                              :target="`#long-content-${col.field}-${props.row.id}`"
+                            />
+                            <div
+                              v-if="
+                                col.captionKey &&
+                                typeof col.showCaption === 'function' &&
+                                col.showCaption(props.row)
+                              "
+                              class="td-caption mobile-primary-caption text-body-sm"
+                              :id="`long-caption-${col.field}-${props.row.id}`"
+                              :ref="
+                                (el) =>
+                                  checkCellOverflow(
+                                    `#long-caption-${col.field}-${props.row.id}`,
+                                    `caption-${col.field}-${props.row.id}`
+                                  )
+                              "
+                              :style="{
+                                maxWidth: captionMaxWidth,
+                                width: '100%',
+                              }"
+                            >
+                              <template v-if="col.captionKeyTitle">
+                                {{ col.captionKeyTitle }}:
+                              </template>
+                              {{ props.row[col.captionKey] }}
+                            </div>
+                            <UTooltip
+                              v-if="
+                                props.row[col.captionKey] &&
+                                props.row[col.captionKey].length >
+                                  minOverflowLength &&
+                                cellOverflowStates[
+                                  `caption-${col.field}-${props.row.id}`
+                                ]
+                              "
+                              anchor="bottom middle"
+                              :description="props.row[col.captionKey]"
+                              :offset="[10, 40]"
+                              self="bottom middle"
+                              :target="`#long-caption-${col.field}-${props.row.id}`"
+                            />
+                          </q-item-label>
+                        </div>
+                      </template>
+
+                      <template v-if="col.actions && col.actions.length === 1">
+                        <template
+                          v-for="(action, key) in col.actions"
+                          :key="key"
+                        >
+                          <UBtnStd
                             v-if="
-                              col.value &&
-                              col.value.length > 12 &&
-                              isContentVisible(
-                                col.field,
-                                props.row.id,
-                                'content'
-                              )
+                              typeof action.hide === 'function'
+                                ? !action.hide(props.row)
+                                : true
                             "
-                            anchor="bottom middle"
-                            :description="col.value"
-                            :offset="[10, 40]"
-                            self="bottom middle"
-                            :target="`#long-content-${col.field}-${props.row.id}`"
-                          />
-                          <div
-                            v-if="
-                              col.captionKey &&
-                              typeof col.showCaption === 'function' &&
-                              col.showCaption(props.row)
+                            :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
+                            "
+                            full-width
+                            :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
                             "
-                            class="td-caption mobile-primary-caption text-body-sm"
-                            :id="`long-caption-${col.field}-${props.row.id}`"
+                            :outline="
+                              typeof action.outline === 'function'
+                                ? action.outline(props.row)
+                                : action.outline
+                            "
+                            :size="action.size"
+                            @on-click="action.handler(props.row)"
                           >
-                            <template v-if="col.captionKeyTitle">
-                              {{ col.captionKeyTitle }}:
+                            <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.anchor"
+                              />
                             </template>
-                            {{ props.row[col.captionKey] }}
-                          </div>
-                          <UTooltip
-                            v-if="
-                              props.row[col.captionKey] &&
-                              props.row[col.captionKey].length > 12 &&
-                              isContentVisible(
-                                col.field,
-                                props.row.id,
-                                'caption'
-                              )
-                            "
-                            anchor="bottom middle"
-                            :description="props.row[col.captionKey]"
-                            :offset="[10, 40]"
-                            self="bottom middle"
-                            :target="`#long-caption-${col.field}-${props.row.id}`"
-                          />
-                        </q-item-label>
-                      </div>
-                    </template>
-                    <template v-if="col.actions && col.actions.length === 1">
-                      <template v-for="(action, key) in col.actions" :key="key">
-                        <UBtnStd
+                          </UBtnStd>
+                        </template>
+                      </template>
+                      <template v-if="col.actions && col.actions.length > 1">
+                        <q-dialog
                           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
-                          "
-                          full-width
-                          :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
+                            isTablet &&
+                            moreActionDialogData &&
+                            moreActionDialogData.showDialog[props.row.id]
                           "
-                          :outline="
-                            typeof action.outline === 'function'
-                              ? action.outline(props.row)
-                              : action.outline
+                          v-model="
+                            moreActionDialogData.showDialog[props.row.id]
                           "
-                          :size="action.size"
-                          @on-click="action.handler(props.row)"
+                          class="more-action-popup"
+                          persistent
                         >
-                          <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.anchor"
-                            />
-                          </template>
-                        </UBtnStd>
-                      </template>
-                    </template>
-                    <template v-if="col.actions && col.actions.length > 1">
-                      <q-dialog
-                        v-if="
-                          isTablet &&
-                          moreActionDialogData &&
-                          moreActionDialogData.showDialog[props.row.id]
-                        "
-                        v-model="moreActionDialogData.showDialog[props.row.id]"
-                        class="more-action-popup"
-                        persistent
-                      >
-                        <q-card
-                          class="more-action-popup-wrapper confirmation-dialog-wrapper q-px-ba q-py-ba"
-                        >
-                          <q-card-section>
-                            <div class="content-wrapper text-center">
-                              <div
-                                class="q-pb-ba flex justify-center items-center"
-                              >
+                          <q-card
+                            class="more-action-popup-wrapper confirmation-dialog-wrapper q-px-ba q-py-ba"
+                          >
+                            <q-card-section>
+                              <div class="content-wrapper text-center">
                                 <div
-                                  :class="`remove-icon-wrapper ${
-                                    moreActionDialogData.row.iconColor ===
-                                    'accent'
-                                      ? 'icon-bg-accent'
-                                      : 'icon-bg-primary'
-                                  }`"
+                                  class="q-pb-ba flex justify-center items-center"
                                 >
-                                  <q-icon
-                                    :class="`${moreActionDialogData.row.icon} ${
+                                  <div
+                                    :class="`remove-icon-wrapper ${
                                       moreActionDialogData.row.iconColor ===
                                       'accent'
-                                        ? 'icon-text-accent'
-                                        : 'icon-text-primary'
+                                        ? 'icon-bg-accent'
+                                        : 'icon-bg-primary'
                                     }`"
-                                    alt="confirmation icon"
-                                    aria-label="confirmation icon"
-                                    size="1.5rem"
-                                  />
+                                  >
+                                    <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>
 
-                              <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
+                                  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>
-                            </div>
-                            <!-- <p class="hidden-scope-value">{{ scope.value }}</p> -->
-                          </q-card-section>
+                              <!-- <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-dialog>
+                            <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-dialog>
 
-                      <UBtnStd
-                        v-if="!isMobile"
-                        color="primary"
-                        full-width
-                        :id="`actionPopupRefBtn-${props.row.id}`"
-                        :label="viewMoreLabel"
-                        outline
-                      >
-                        <template #menu>
-                          <q-menu
-                            class="more-action-popup"
-                            auto-close
-                            fit
-                            :id="`actionPopupRef-${props.row.id}`"
-                            :offset="[10, 20]"
-                            :target="`#actionPopupRefBtn-${props.row.id}`"
-                            transition-hide="jump-up"
-                            transition-show="jump-down"
-                            @show="handleMenuShow(props.row.id)"
-                            @hide="handleMenuHide"
-                          >
-                            <div :class="tailClass" />
-                            <div
-                              class="q-pt-ba q-px-ba q-pb-none text-heading-xxs text-dark"
-                            >
-                              Select More Options
-                            </div>
-                            <q-list class="grid-more-action">
-                              <template v-for="(action, __i) in col.actions">
-                                <q-item
-                                  v-if="
-                                    typeof action.hide === 'function'
-                                      ? !action.hide(props.row)
-                                      : true
-                                  "
-                                  class="q-px-sm q-py-ba bg-neutral-2 q-mb-xs"
-                                  :aria-label="
-                                    typeof action.label === 'function'
-                                      ? action.label(props.row)
-                                      : action.label
-                                  "
-                                  clickable
-                                  :key="__i"
-                                  tabindex="-1"
-                                  @click="action.handler(props.row)"
-                                >
-                                  <q-item-section class="q-pr-xs" avatar>
-                                    <q-icon
-                                      v-if="
-                                        typeof action.icon === 'function'
-                                          ? action.icon(props.row)
-                                          : action.icon
-                                      "
-                                      :class="`${
-                                        typeof action.icon === 'function'
-                                          ? action.icon(props.row)
-                                          : action.icon
-                                      } text-${getActionItemColor(
-                                        action,
-                                        props.row
-                                      )}`"
-                                      size="1.5rem"
-                                      tabindex="-1"
-                                    />
-                                  </q-item-section>
-                                  <q-item-section
-                                    :class="`text-caption-lg text-${getActionItemColor(
-                                      action,
-                                      props.row
-                                    )}`"
-                                    tabindex="0"
-                                  >
-                                    {{
-                                      typeof action.label === 'function'
-                                        ? action.label(props.row)
-                                        : action.label
-                                    }}
-                                  </q-item-section>
-                                </q-item>
-                              </template>
-                            </q-list>
-                          </q-menu>
-                        </template>
-                      </UBtnStd>
-                      <template v-if="isMobile">
-                        <!-- To show a single button in bottom of card -->
                         <UBtnStd
-                          v-if="!col.useResponsiveActions"
+                          v-if="!isMobile"
                           color="primary"
                           full-width
-                          :id="`view-more-actions-${props.row['id']}`"
+                          :id="`actionPopupRefBtn-${props.row.id}`"
                           :label="viewMoreLabel"
                           outline
-                          @on-click="
-                            handleOpenMobileMoreActions(props.row['id'])
-                          "
-                        />
-
-                        <!-- To show two button in bottom of card -->
-                        <div v-else class="expansion-table-card-action">
+                        >
+                          <template #menu>
+                            <q-menu
+                              class="more-action-popup"
+                              auto-close
+                              fit
+                              :id="`actionPopupRef-${props.row.id}`"
+                              :offset="[10, 20]"
+                              :target="`#actionPopupRefBtn-${props.row.id}`"
+                              transition-hide="jump-up"
+                              transition-show="jump-down"
+                              @show="handleMenuShow(props.row.id)"
+                              @hide="handleMenuHide"
+                            >
+                              <div :class="tailClass" />
+                              <div
+                                class="q-pt-ba q-px-ba q-pb-none text-heading-xxs text-dark"
+                              >
+                                Select More Options
+                              </div>
+                              <q-list class="grid-more-action">
+                                <template v-for="(action, __i) in col.actions">
+                                  <q-item
+                                    v-if="
+                                      typeof action.hide === 'function'
+                                        ? !action.hide(props.row)
+                                        : true
+                                    "
+                                    class="q-px-sm q-py-ba bg-neutral-2 q-mb-xs"
+                                    :aria-label="
+                                      typeof action.label === 'function'
+                                        ? action.label(props.row)
+                                        : action.label
+                                    "
+                                    clickable
+                                    :key="__i"
+                                    tabindex="-1"
+                                    @click="action.handler(props.row)"
+                                  >
+                                    <q-item-section class="q-pr-xs" avatar>
+                                      <q-icon
+                                        v-if="
+                                          typeof action.icon === 'function'
+                                            ? action.icon(props.row)
+                                            : action.icon
+                                        "
+                                        :class="`${
+                                          typeof action.icon === 'function'
+                                            ? action.icon(props.row)
+                                            : action.icon
+                                        } text-${getActionItemColor(
+                                          action,
+                                          props.row
+                                        )}`"
+                                        size="1.5rem"
+                                        tabindex="-1"
+                                      />
+                                    </q-item-section>
+                                    <q-item-section
+                                      :class="`text-caption-lg text-${getActionItemColor(
+                                        action,
+                                        props.row
+                                      )}`"
+                                      tabindex="0"
+                                    >
+                                      {{
+                                        typeof action.label === 'function'
+                                          ? action.label(props.row)
+                                          : action.label
+                                      }}
+                                    </q-item-section>
+                                  </q-item>
+                                </template>
+                              </q-list>
+                            </q-menu>
+                          </template>
+                        </UBtnStd>
+                        <template v-if="isMobile">
+                          <!-- To show a single button in bottom of card -->
                           <UBtnStd
+                            v-if="!col.useResponsiveActions"
                             color="primary"
                             full-width
                             :id="`view-more-actions-${props.row['id']}`"
@@ -1046,254 +1154,282 @@ watch(
                               handleOpenMobileMoreActions(props.row['id'])
                             "
                           />
-                          <template
-                            v-for="(action, key) in getMenuInlineActions(
-                              col,
-                              'inline'
-                            ).slice(0, 1)"
-                            :key="key"
-                          >
+
+                          <!-- To show two button in bottom of card -->
+                          <div v-else class="expansion-table-card-action">
                             <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)
-                                  : false
-                              "
-                              :flat="
-                                typeof action.flat === 'function'
-                                  ? action.flat(props.row)
-                                  : action.flat
-                              "
+                              color="primary"
                               full-width
-                              :label="
-                                typeof action.label === 'function'
-                                  ? action.label(props.row)
-                                  : action.label
-                              "
-                              :loading="
-                                typeof action.loading === 'function'
-                                  ? action.loading(props.row)
-                                  : action.loading
-                              "
-                              :outline="
-                                typeof action.outline === 'function'
-                                  ? action.outline(props.row)
-                                  : action.outline
+                              :id="`view-more-actions-${props.row['id']}`"
+                              :label="viewMoreLabel"
+                              outline
+                              @on-click="
+                                handleOpenMobileMoreActions(props.row['id'])
                               "
-                              @on-click="action.handler(props.row)"
+                            />
+                            <template
+                              v-for="(action, key) in getMenuInlineActions(
+                                col,
+                                'inline'
+                              ).slice(0, 1)"
+                              :key="key"
                             >
-                            </UBtnStd>
-                          </template>
-                        </div>
+                              <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)
+                                    : false
+                                "
+                                :flat="
+                                  typeof action.flat === 'function'
+                                    ? action.flat(props.row)
+                                    : action.flat
+                                "
+                                full-width
+                                :label="
+                                  typeof action.label === 'function'
+                                    ? action.label(props.row)
+                                    : action.label
+                                "
+                                :loading="
+                                  typeof action.loading === 'function'
+                                    ? action.loading(props.row)
+                                    : action.loading
+                                "
+                                :outline="
+                                  typeof action.outline === 'function'
+                                    ? action.outline(props.row)
+                                    : action.outline
+                                "
+                                @on-click="action.handler(props.row)"
+                              >
+                              </UBtnStd>
+                            </template>
+                          </div>
 
-                        <USheet
-                          v-if="
-                            moreActionDialogData &&
-                            moreActionDialogData.showDialog[props.row.id]
-                          "
-                          v-model:dialogs="mobileActionsDialog[props.row['id']]"
-                          :close-icon-label="closeIconLabel"
-                          :heading="moreActionDialogData.row.title"
-                          :is-left-icon="false"
-                          :show-action-buttons="true"
-                        >
-                          <template #content>
-                            <q-card
-                              class="more-action-popup-wrapper confirmation-dialog-wrapper mobile-confirmation-dialog q-px-ba q-py-ba"
-                            >
-                              <q-card-section>
-                                <div class="content-wrapper text-center">
-                                  <div
-                                    class="q-pb-ba flex justify-center items-center"
-                                  >
+                          <USheet
+                            v-if="
+                              moreActionDialogData &&
+                              moreActionDialogData.showDialog[props.row.id]
+                            "
+                            v-model:dialogs="
+                              mobileActionsDialog[props.row['id']]
+                            "
+                            :close-icon-label="closeIconLabel"
+                            :heading="moreActionDialogData.row.title"
+                            :is-left-icon="false"
+                            :show-action-buttons="true"
+                          >
+                            <template #content>
+                              <q-card
+                                class="more-action-popup-wrapper confirmation-dialog-wrapper mobile-confirmation-dialog q-px-ba q-py-ba"
+                              >
+                                <q-card-section>
+                                  <div class="content-wrapper text-center">
                                     <div
-                                      :class="`remove-icon-wrapper ${
-                                        moreActionDialogData.row.iconColor ===
-                                        'accent'
-                                          ? 'icon-bg-accent'
-                                          : 'icon-bg-primary'
-                                      }`"
+                                      class="q-pb-ba flex justify-center items-center"
                                     >
-                                      <q-icon
-                                        :class="`${
-                                          moreActionDialogData.row.icon
-                                        } ${
+                                      <div
+                                        :class="`remove-icon-wrapper ${
                                           moreActionDialogData.row.iconColor ===
                                           'accent'
-                                            ? 'icon-text-accent'
-                                            : 'icon-text-primary'
+                                            ? 'icon-bg-accent'
+                                            : 'icon-bg-primary'
                                         }`"
-                                        alt="confirmation icon"
-                                        aria-label="confirmation icon"
-                                        size="1.5rem"
-                                      />
+                                      >
+                                        <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>
 
-                                  <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
+                                      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>
-                                </div>
-                              </q-card-section>
-                            </q-card>
-                          </template>
-                          <template
-                            v-if="
-                              moreActionDialogData &&
-                              moreActionDialogData.showDialog[props.row.id] &&
-                              moreActionDialogData.secondaryAction
-                            "
-                            #action_primary_one
-                          >
-                            <UBtnStd
-                              :color="
-                                moreActionDialogData.secondaryAction.color
-                              "
-                              :disable="
-                                moreActionDialogData.secondaryAction.disable
-                              "
-                              :flat="moreActionDialogData.secondaryAction.flat"
-                              :label="
-                                moreActionDialogData.secondaryAction.label
-                              "
-                              :loading="
-                                moreActionDialogData.secondaryAction.loading
-                              "
-                              :outline="
-                                moreActionDialogData.secondaryAction.outline
+                                </q-card-section>
+                              </q-card>
+                            </template>
+                            <template
+                              v-if="
+                                moreActionDialogData &&
+                                moreActionDialogData.showDialog[props.row.id] &&
+                                moreActionDialogData.secondaryAction
                               "
-                              :size="moreActionDialogData.secondaryAction.size"
-                              @on-click="
-                                moreActionDialogData.secondaryAction.handler(
-                                  props.row
-                                )
+                              #action_primary_one
+                            >
+                              <UBtnStd
+                                :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
+                                  )
+                                "
+                              />
+                            </template>
+                            <template
+                              v-if="
+                                moreActionDialogData &&
+                                moreActionDialogData.showDialog[props.row.id] &&
+                                moreActionDialogData.primaryAction
                               "
-                            />
-                          </template>
-                          <template
-                            v-if="
-                              moreActionDialogData &&
-                              moreActionDialogData.showDialog[props.row.id] &&
-                              moreActionDialogData.primaryAction
+                              #action_primary_two
+                            >
+                              <UBtnStd
+                                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
+                                  )
+                                "
+                              />
+                            </template>
+                          </USheet>
+                          <USheet
+                            v-model:dialogs="
+                              moreActionsDialogs[props.row['id']]
                             "
-                            #action_primary_two
+                            :close-icon-label="closeIconLabel"
+                            :heading="selectMoreOptions"
+                            :is-left-icon="false"
+                            :show-action-buttons="false"
                           >
-                            <UBtnStd
-                              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
-                                )
-                              "
-                            />
-                          </template>
-                        </USheet>
-                        <USheet
-                          v-model:dialogs="moreActionsDialogs[props.row['id']]"
-                          :close-icon-label="closeIconLabel"
-                          :heading="selectMoreOptions"
-                          :is-left-icon="false"
-                          :show-action-buttons="false"
-                        >
-                          <template #content>
-                            <q-list class="mobile-grid-more-action">
-                              <template
-                                v-for="(action, __i) in getMenuInlineActions(
-                                  col,
-                                  'menu'
-                                )"
-                              >
-                                <q-item
-                                  v-if="
-                                    typeof action.hide === 'function'
-                                      ? !action.hide(props.row)
-                                      : true
-                                  "
-                                  class="q-px-sm q-py-ba bg-neutral-2 q-mb-xs"
-                                  :aria-label="
-                                    typeof action.label === 'function'
-                                      ? action.label(props.row)
-                                      : action.label
-                                  "
-                                  clickable
-                                  :key="__i"
-                                  tabindex="-1"
-                                  @click="handleItemClick(action, props.row)"
+                            <template #content>
+                              <q-list class="mobile-grid-more-action">
+                                <template
+                                  v-for="(action, __i) in getMenuInlineActions(
+                                    col,
+                                    'menu'
+                                  )"
                                 >
-                                  <q-item-section class="q-pr-xs" avatar>
-                                    <q-icon
-                                      v-if="
-                                        typeof action.icon === 'function'
-                                          ? action.icon(props.row)
-                                          : action.icon
-                                      "
-                                      :class="`${
-                                        typeof action.icon === 'function'
-                                          ? action.icon(props.row)
-                                          : action.icon
-                                      } text-${getActionItemColor(
-                                        action,
-                                        props.row
-                                      )}`"
-                                      size="1.5rem"
-                                      tabindex="-1"
-                                    />
-                                  </q-item-section>
-                                  <q-item-section
-                                    :class="`text-caption-lg text-${getActionItemColor(
-                                      action,
-                                      props.row
-                                    )}`"
-                                    tabindex="0"
-                                  >
-                                    {{
+                                  <q-item
+                                    v-if="
+                                      typeof action.hide === 'function'
+                                        ? !action.hide(props.row)
+                                        : true
+                                    "
+                                    class="q-px-sm q-py-ba bg-neutral-2 q-mb-xs"
+                                    :aria-label="
                                       typeof action.label === 'function'
                                         ? action.label(props.row)
                                         : action.label
-                                    }}
-                                  </q-item-section>
-                                </q-item>
-                              </template>
-                            </q-list>
-                          </template>
-                        </USheet>
+                                    "
+                                    clickable
+                                    :key="__i"
+                                    tabindex="-1"
+                                    @click="handleItemClick(action, props.row)"
+                                  >
+                                    <q-item-section class="q-pr-xs" avatar>
+                                      <q-icon
+                                        v-if="
+                                          typeof action.icon === 'function'
+                                            ? action.icon(props.row)
+                                            : action.icon
+                                        "
+                                        :class="`${
+                                          typeof action.icon === 'function'
+                                            ? action.icon(props.row)
+                                            : action.icon
+                                        } text-${getActionItemColor(
+                                          action,
+                                          props.row
+                                        )}`"
+                                        size="1.5rem"
+                                        tabindex="-1"
+                                      />
+                                    </q-item-section>
+                                    <q-item-section
+                                      :class="`text-caption-lg text-${getActionItemColor(
+                                        action,
+                                        props.row
+                                      )}`"
+                                      tabindex="0"
+                                    >
+                                      {{
+                                        typeof action.label === 'function'
+                                          ? action.label(props.row)
+                                          : action.label
+                                      }}
+                                    </q-item-section>
+                                  </q-item>
+                                </template>
+                              </q-list>
+                            </template>
+                          </USheet>
+                        </template>
                       </template>
-                    </template>
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-list>
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-list>
+            </div>
           </q-card>
         </div>
         <UExpansionStd
@@ -1425,7 +1561,7 @@ watch(
                     ]"
                   >
                     <!-- Label -->
-                    <div class="text-caption text-description">
+                    <div class="text-caption text-description q-mb-xxs">
                       {{ col.label }}
                     </div>
                     <!-- Content -->
@@ -1503,11 +1639,21 @@ watch(
                           />
                           <span
                             :class="[
-                              col.value ? 'long-text-content' : '',
+                              col.value &&
+                              col.value.length > minOverflowLength &&
+                              !col.header
+                                ? 'long-text-content'
+                                : 'card-header-table',
                               col.noEllipsis ? 'no-ellipsis-content' : '',
                               col.doubleSpan && col.noEllipsis
                                 ? 'full-width-text-content'
                                 : '',
+                              isTablet && col.header
+                                ? 'tablet-header-table'
+                                : '',
+                              isMobile && col.header
+                                ? 'mobile-header-table'
+                                : '',
                               !isResponsiveTablet &&
                               isTablet &&
                               col.classes &&
@@ -1521,6 +1667,14 @@ watch(
                                 : '',
                             ]"
                             :id="`long-content-${col.field}-${props.row.id}`"
+                            :ref="
+                              (el) =>
+                                checkCellOverflow(
+                                  `#long-content-${col.field}-${props.row.id}`,
+                                  `${col.field}-${props.row.id}`
+                                )
+                            "
+                            :style="{ maxWidth: headerMaxWidth }"
                           >
                             {{ col.value }}
                             <template
@@ -1553,12 +1707,8 @@ watch(
                           <UTooltip
                             v-if="
                               col.value &&
-                              col.value.length > 12 &&
-                              isContentVisible(
-                                col.field,
-                                props.row.id,
-                                'content'
-                              )
+                              col.value.length > minOverflowLength &&
+                              cellOverflowStates[`${col.field}-${props.row.id}`]
                             "
                             anchor="bottom middle"
                             :description="col.value"
@@ -1613,10 +1763,27 @@ watch(
                         :color="props?.row?.iconColor ?? 'primary'"
                         size="1.5rem"
                       />
+                      <div
+                        v-if="typeof col?.colorMap === 'function'"
+                        class="flex items-baseline"
+                        :style="{ gap: '0.25rem' }"
+                      >
+                        <span
+                          :class="`table-text-colormap-${
+                            col?.colorMap(props.row)?.color
+                          } text-caption-md`"
+                        >
+                          {{ col?.colorMap(props.row)?.value }}</span
+                        >
+                        <span class="text-body-sm">{{
+                          props.row[col.field]
+                        }}</span>
+                      </div>
+
                       <!-- Text -->
-                      <span v-else class="text-body-sm">
-                        {{ props.row[col.field] }}
-                      </span>
+                      <span v-else class="text-body-sm">{{
+                        props.row[col.field]
+                      }}</span>
                     </div>
                     <!-- Caption (if any) -->
                     <div