feat: Integrated table with mobile and fixed column not loading issue in mobile

packages/nc-gui/components/smartsheet/Toolbar.vue

@@ -34,19 +34,19 @@ const isViewSidebarAvailable = computed(
       <a-skeleton-input :active="true" class="!w-44 !h-4 ml-2 !rounded overflow-hidden" />
     </template>
     <template v-else>
-      <template v-if="!isMobileMode">
-        <LazySmartsheetToolbarMappedBy v-if="isMap" />
+      <LazySmartsheetToolbarMappedBy v-if="isMap" />
 
-        <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap" :show-system-fields="false" />
+      <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap" :show-system-fields="false" />
 
-        <LazySmartsheetToolbarStackedBy v-if="isKanban" />
+      <LazySmartsheetToolbarStackedBy v-if="isKanban" />
 
-        <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
+      <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
 
-        <LazySmartsheetToolbarGroupByMenu v-if="isGrid" />
+      <LazySmartsheetToolbarGroupByMenu v-if="isGrid" />
 
-        <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
+      <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
 
+      <template v-if="!isMobileMode">
         <LazySmartsheetToolbarRowHeight v-if="isGrid" />
 
         <!-- <LazySmartsheetToolbarQrScannerButton v-if="isMobileMode && (isGrid || isKanban || isGallery)" /> -->

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -121,6 +121,8 @@ const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
 
 const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
 
+useViewColumns(view, meta, () => reloadViewDataHook.trigger())
+
 const { isMobileMode } = useGlobal()
 
 const scrollParent = inject(ScrollParentInj, ref<undefined>())
@@ -1196,14 +1198,18 @@ const expandAndLooseFocus = (row: Row, col: Record<string, any>) => {
                   @xcresized="resizingCol = null"
                 >
                   <div class="w-full h-full flex items-center">
-                    <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
-                    <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
+                    <LazySmartsheetHeaderVirtualCell
+                      v-if="isVirtualCol(col)"
+                      :column="col"
+                      :hide-menu="readOnly || isMobileMode"
+                    />
+                    <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly || isMobileMode" />
                   </div>
                 </th>
                 <th
                   v-if="isAddingColumnAllowed"
                   v-e="['c:column:add']"
-                  class="cursor-pointer !border-0 relative"
+                  class="cursor-pointer !border-0 relative !sm:hidden"
                   :style="{
                     borderWidth: '0px !important',
                   }"
@@ -1322,7 +1328,7 @@ const expandAndLooseFocus = (row: Row, col: Record<string, any>) => {
                 <LazySmartsheetRow v-for="(row, rowIndex) of dataRef" ref="rowRefs" :key="rowIndex" :row="row">
                   <template #default="{ state }">
                     <tr
-                      class="nc-grid-row"
+                      class="nc-grid-row !sm:h-14"
                       :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
                       :data-testid="`grid-row-${rowIndex}`"
                     >
@@ -1454,7 +1460,7 @@ const expandAndLooseFocus = (row: Row, col: Record<string, any>) => {
               <tr
                 v-if="isAddingEmptyRowAllowed && !isGroupBy"
                 v-e="['c:row:add:grid-bottom']"
-                class="text-left nc-grid-add-new-cell cursor-pointer group relative z-3"
+                class="text-left nc-grid-add-new-cell cursor-pointer group relative z-3 sm:hidden"
                 :class="{
                   '!border-r-2 !border-r-gray-100': visibleColLength === 1,
                 }"

packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

@@ -54,7 +54,12 @@ useMenuCloseOnEsc(open)
 </script>
 
 <template>
-  <NcDropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu nc-toolbar-dropdown">
+  <NcDropdown
+    v-model:visible="open"
+    :trigger="['click']"
+    overlay-class-name="nc-dropdown-filter-menu nc-toolbar-dropdown"
+    class="!sm:hidden"
+  >
     <div :class="{ 'nc-active-btn': filtersLength }">
       <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex items-center gap-2">

packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@@ -286,7 +286,12 @@ useMenuCloseOnEsc(open)
 </script>
 
 <template>
-  <NcDropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu nc-toolbar-dropdown">
+  <NcDropdown
+    v-model:visible="open"
+    :trigger="['click']"
+    overlay-class-name="nc-dropdown-fields-menu nc-toolbar-dropdown"
+    class="!sm:hidden"
+  >
     <div :class="{ 'nc-active-btn': numberOfHiddenFields }">
       <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-2">

packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue

@@ -151,6 +151,7 @@ watch(open, () => {
     v-model:visible="open"
     offset-y
     :trigger="['click']"
+    class="!sm:hidden"
     overlay-class-name="nc-dropdown-group-by-menu nc-toolbar-dropdown"
   >
     <div :class="{ 'nc-active-btn': groupedByColumnIds?.length }">

packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue

@@ -76,7 +76,7 @@ const handleChange = () => {
 </script>
 
 <template>
-  <a-dropdown v-if="!IsPublic" v-model:visible="mappedByDropdown" :trigger="['click']">
+  <a-dropdown v-if="!IsPublic" v-model:visible="mappedByDropdown" :trigger="['click']" class="!sm:hidden">
     <div class="nc-map-btn">
       <a-button v-e="['c:map:change-grouping-field']" class="nc-map-stacked-by-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">

packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue

@@ -106,7 +106,12 @@ watch(open, () => {
 </script>
 
 <template>
-  <NcDropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu nc-toolbar-dropdown">
+  <NcDropdown
+    v-model:visible="open"
+    :trigger="['click']"
+    class="!sm:hidden"
+    overlay-class-name="nc-dropdown-sort-menu nc-toolbar-dropdown"
+  >
     <div :class="{ 'nc-active-btn': sorts?.length }">
       <a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-2">

packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue

@@ -110,6 +110,7 @@ const handleChange = () => {
     v-model:visible="open"
     :trigger="['click']"
     overlay-class-name="nc-dropdown-kanban-stacked-by-menu"
+    class="!sm:hidden"
   >
     <div class="nc-kanban-btn">
       <a-button