feat: use injection state for use view columns

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

@@ -23,7 +23,7 @@ import {
   useI18n,
   useNuxtApp,
   useRoles,
-  useViewColumns,
+  useViewColumnsOrThrow,
   useViewData,
   watch,
 } from '#imports'
@@ -67,7 +67,7 @@ reloadEventHook.on(async () => {
   setFormData()
 })
 
-const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta, async () => reloadEventHook.trigger())
+const { showAll, hideAll, saveOrUpdate } = useViewColumnsOrThrow(view, meta)
 
 const { syncLTARRefs, row } = useProvideSmartsheetRowStore(
   meta,

packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue

@@ -16,7 +16,7 @@ const activeView = inject(ActiveViewInj, ref())
 
 const reloadDataHook = inject(ReloadViewDataHookInj)!
 
-const { fields, metaColumnById } = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
+const { fields, metaColumnById } = useViewColumnsOrThrow(activeView, meta)
 
 const vModel = useVModel(props, 'modelValue', emit)
 

packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue

@@ -18,7 +18,7 @@ const { t } = useI18n()
 
 const reloadDataHook = inject(ReloadViewDataHookInj)!
 
-const { fields, metaColumnById } = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
+const { fields, metaColumnById } = useViewColumnsOrThrow(activeView, meta)
 
 const vModel = useVModel(props, 'modelValue', emit)
 

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -50,7 +50,7 @@ const {
   toggleFieldVisibility,
   loadViewColumns,
   isViewColumnsLoading,
-} = useViewColumns(view, meta as Ref<TableType | undefined>)
+} = useViewColumnsOrThrow(view, meta as Ref<TableType | undefined>)
 
 const loading = ref(false)
 

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

@@ -123,7 +123,7 @@ const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
 
 const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
 
-const { isViewColumnsLoading } = useViewColumns(view, meta, () => reloadViewDataHook.trigger())
+const { isViewColumnsLoading } = useViewColumnsOrThrow(view, meta)
 
 const { isMobileMode } = useGlobal()
 

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

@@ -21,7 +21,7 @@ const activeView = inject(ActiveViewInj, ref())
 
 const meta = inject(MetaInj, ref())
 
-const { showSystemFields, metaColumnById } = useViewColumns(activeView, meta)
+const { showSystemFields, metaColumnById } = useViewColumnsOrThrow(activeView, meta)
 
 const { sorts } = useViewSorts(activeView)
 

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

@@ -2,7 +2,7 @@
 import type { SelectProps } from 'ant-design-vue'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
-import { ActiveViewInj, MetaInj, computed, inject, ref, resolveComponent, useViewColumns } from '#imports'
+import { ActiveViewInj, MetaInj, computed, inject, ref, resolveComponent, useViewColumnsOrThrow } from '#imports'
 
 const { modelValue, isSort, allowEmpty, ...restProps } = defineProps<{
   modelValue?: string
@@ -24,7 +24,7 @@ const localValue = computed({
 
 const activeView = inject(ActiveViewInj, ref())
 
-const { showSystemFields, metaColumnById } = useViewColumns(activeView, meta)
+const { showSystemFields, metaColumnById } = useViewColumnsOrThrow(activeView, meta)
 
 const options = computed<SelectProps['options']>(() =>
   (

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

@@ -21,7 +21,7 @@ import {
   useNuxtApp,
   useSmartsheetStoreOrThrow,
   useUndoRedo,
-  useViewColumns,
+  useViewColumnsOrThrow,
   watch,
 } from '#imports'
 
@@ -55,7 +55,7 @@ const {
   metaColumnById,
   loadViewColumns,
   toggleFieldVisibility,
-} = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
+} = useViewColumnsOrThrow(activeView, meta)
 
 const { eventBus } = useSmartsheetStoreOrThrow()
 

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

@@ -12,7 +12,7 @@ import {
   iconMap,
   inject,
   ref,
-  useViewColumns,
+  useViewColumnsOrThrow,
   watch,
 } from '#imports'
 
@@ -28,7 +28,7 @@ const isLocked = inject(IsLockedInj, ref(false))
 
 const IsPublic = inject(IsPublicInj, ref(false))
 
-const { fields, loadViewColumns, metaColumnById } = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
+const { fields, loadViewColumns, metaColumnById } = useViewColumnsOrThrow(activeView, meta)
 
 const { loadMapData, loadMapMeta, updateMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow()
 

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

@@ -28,7 +28,7 @@ const { eventBus } = useSmartsheetStoreOrThrow()
 
 const { sorts, saveOrUpdate, loadSorts, addSort: _addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
 
-const { showSystemFields, metaColumnById } = useViewColumns(view, meta)
+const { showSystemFields, metaColumnById } = useViewColumnsOrThrow(view, meta)
 
 const showCreateSort = ref(false)
 

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

@@ -14,7 +14,7 @@ import {
   useKanbanViewStoreOrThrow,
   useMenuCloseOnEsc,
   useUndoRedo,
-  useViewColumns,
+  useViewColumnsOrThrow,
   watch,
 } from '#imports'
 
@@ -30,7 +30,7 @@ const reloadDataHook = inject(ReloadViewDataHookInj)!
 
 const isLocked = inject(IsLockedInj, ref(false))
 
-const { fields, loadViewColumns, metaColumnById } = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
+const { fields, loadViewColumns, metaColumnById } = useViewColumnsOrThrow(activeView, meta)
 
 const { kanbanMetaData, loadKanbanMeta, loadKanbanData, updateKanbanMeta, groupingField, groupingFieldColumn } =
   useKanbanViewStoreOrThrow()

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -80,6 +80,8 @@ provide(
   computed(() => !isUIAllowed('dataEdit')),
 )
 
+useProvideViewColumns(activeView, meta, () => reloadEventHook?.trigger())
+
 const grid = ref()
 
 const onDrop = async (event: DragEvent) => {

packages/nc-gui/composables/useViewColumns.ts

@@ -4,293 +4,304 @@ import type { ComputedRef, Ref } from 'vue'
 import { IsPublicInj, computed, inject, ref, storeToRefs, useBase, useNuxtApp, useRoles, useUndoRedo, watch } from '#imports'
 import type { Field } from '#imports'
 
-export function useViewColumns(
+const [useProvideViewColumns, useViewColumns] = useInjectionState(
-  view: Ref<ViewType | undefined>,
+  (
-  meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
+    view: Ref<ViewType | undefined>,
-  reloadData?: () => void,
+    meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
-) {
+    reloadData?: () => void,
-  const isPublic = inject(IsPublicInj, ref(false))
+  ) => {
+    const isPublic = inject(IsPublicInj, ref(false))
 
-  const fields = ref<Field[]>()
+    const fields = ref<Field[]>()
 
-  const filterQuery = ref('')
+    const filterQuery = ref('')
 
-  const { $api, $e } = useNuxtApp()
+    const { $api, $e } = useNuxtApp()
 
-  const { isUIAllowed } = useRoles()
+    const { isUIAllowed } = useRoles()
 
-  const { isSharedBase } = storeToRefs(useBase())
+    const { isSharedBase } = storeToRefs(useBase())
 
-  const isViewColumnsLoading = ref(false)
+    const isViewColumnsLoading = ref(false)
 
-  const { addUndo, defineViewScope } = useUndoRedo()
+    const { addUndo, defineViewScope } = useUndoRedo()
 
-  const isLocalMode = computed(
+    const isLocalMode = computed(
-    () => isPublic.value || !isUIAllowed('viewFieldEdit') || !isUIAllowed('viewFieldEdit') || isSharedBase.value,
+      () => isPublic.value || !isUIAllowed('viewFieldEdit') || !isUIAllowed('viewFieldEdit') || isSharedBase.value,
-  )
+    )
-
-  const localChanges = ref<Field[]>([])
-
-  const isColumnViewEssential = (column: ColumnType) => {
-    // TODO: consider at some point ti delegate this via a cleaner design pattern to view specific check logic
-    // which could be inside of a view specific helper class (and generalized via an interface)
-    // (on the other hand, the logic complexity is still very low atm - might be overkill)
-    return view.value?.type === ViewTypes.MAP && (view.value?.view as MapType)?.fk_geo_data_col_id === column.id
-  }
 
-  const metaColumnById = computed<Record<string, ColumnType>>(() => {
+    const localChanges = ref<Field[]>([])
-    if (!meta.value?.columns) return {}
 
-    return (meta.value.columns as ColumnType[]).reduce(
+    const isColumnViewEssential = (column: ColumnType) => {
-      (acc, curr) => ({
+      // TODO: consider at some point ti delegate this via a cleaner design pattern to view specific check logic
-        ...acc,
+      // which could be inside of a view specific helper class (and generalized via an interface)
-        [curr.id!]: curr,
+      // (on the other hand, the logic complexity is still very low atm - might be overkill)
-      }),
+      return view.value?.type === ViewTypes.MAP && (view.value?.view as MapType)?.fk_geo_data_col_id === column.id
-      {},
+    }
-    ) as Record<string, ColumnType>
-  })
 
-  const loadViewColumns = async () => {
+    const metaColumnById = computed<Record<string, ColumnType>>(() => {
-    if (!meta || !view) return
+      if (!meta.value?.columns) return {}
 
-    let order = 1
+      return (meta.value.columns as ColumnType[]).reduce(
+        (acc, curr) => ({
+          ...acc,
+          [curr.id!]: curr,
+        }),
+        {},
+      ) as Record<string, ColumnType>
+    })
 
-    if (view.value?.id) {
+    const loadViewColumns = async () => {
-      const data = (isPublic.value ? meta.value?.columns : (await $api.dbViewColumn.list(view.value.id)).list) as any[]
+      if (!meta || !view) return
 
-      const fieldById = data.reduce<Record<string, any>>((acc, curr) => {
+      let order = 1
-        curr.show = !!curr.show
 
-        return {
+      if (view.value?.id) {
-          ...acc,
+        const data = (isPublic.value ? meta.value?.columns : (await $api.dbViewColumn.list(view.value.id)).list) as any[]
-          [curr.fk_column_id]: curr,
-        }
-      }, {})
 
-      fields.value = meta.value?.columns
+        const fieldById = data.reduce<Record<string, any>>((acc, curr) => {
-        ?.map((column: ColumnType) => {
+          curr.show = !!curr.show
-          const currentColumnField = fieldById[column.id!] || {}
 
           return {
-            title: column.title,
+            ...acc,
-            fk_column_id: column.id,
+            [curr.fk_column_id]: curr,
-            ...currentColumnField,
-            show: currentColumnField.show || isColumnViewEssential(currentColumnField),
-            order: currentColumnField.order || order++,
-            system: isSystemColumn(metaColumnById?.value?.[currentColumnField.fk_column_id!]),
-            isViewEssentialField: isColumnViewEssential(column),
           }
-        })
+        }, {})
-        .sort((a: Field, b: Field) => a.order - b.order)
+
-
+        fields.value = meta.value?.columns
-      if (isLocalMode.value && fields.value) {
+          ?.map((column: ColumnType) => {
-        for (const field of localChanges.value) {
+            const currentColumnField = fieldById[column.id!] || {}
-          const fieldIndex = fields.value.findIndex((f) => f.fk_column_id === field.fk_column_id)
+
-          if (fieldIndex !== undefined && fieldIndex > -1) {
+            return {
-            fields.value[fieldIndex] = field
+              title: column.title,
-            fields.value = fields.value.sort((a: Field, b: Field) => a.order - b.order)
+              fk_column_id: column.id,
+              ...currentColumnField,
+              show: currentColumnField.show || isColumnViewEssential(currentColumnField),
+              order: currentColumnField.order || order++,
+              system: isSystemColumn(metaColumnById?.value?.[currentColumnField.fk_column_id!]),
+              isViewEssentialField: isColumnViewEssential(column),
+            }
+          })
+          .sort((a: Field, b: Field) => a.order - b.order)
+
+        if (isLocalMode.value && fields.value) {
+          for (const field of localChanges.value) {
+            const fieldIndex = fields.value.findIndex((f) => f.fk_column_id === field.fk_column_id)
+            if (fieldIndex !== undefined && fieldIndex > -1) {
+              fields.value[fieldIndex] = field
+              fields.value = fields.value.sort((a: Field, b: Field) => a.order - b.order)
+            }
           }
         }
       }
     }
-  }
-
-  const showAll = async (ignoreIds?: any) => {
-    if (isLocalMode.value) {
-      fields.value = fields.value?.map((field: Field) => ({
-        ...field,
-        show: true,
-      }))
-      reloadData?.()
-      return
-    }
 
-    if (view?.value?.id) {
+    const showAll = async (ignoreIds?: any) => {
-      if (ignoreIds) {
+      if (isLocalMode.value) {
-        await $api.dbView.showAllColumn(view.value.id, {
+        fields.value = fields.value?.map((field: Field) => ({
-          ignoreIds,
+          ...field,
-        })
+          show: true,
-      } else {
+        }))
-        await $api.dbView.showAllColumn(view.value.id)
+        reloadData?.()
+        return
+      }
+
+      if (view?.value?.id) {
+        if (ignoreIds) {
+          await $api.dbView.showAllColumn(view.value.id, {
+            ignoreIds,
+          })
+        } else {
+          await $api.dbView.showAllColumn(view.value.id)
+        }
       }
+
+      await loadViewColumns()
+      reloadData?.()
+      $e('a:fields:show-all')
     }
+    const hideAll = async (ignoreIds?: any) => {
+      if (isLocalMode.value) {
+        fields.value = fields.value?.map((field: Field) => ({
+          ...field,
+          show: !!field.isViewEssentialField,
+        }))
+        reloadData?.()
+        return
+      }
+      if (view?.value?.id) {
+        if (ignoreIds) {
+          await $api.dbView.hideAllColumn(view.value.id, {
+            ignoreIds,
+          })
+        } else {
+          await $api.dbView.hideAllColumn(view.value.id)
+        }
+      }
 
-    await loadViewColumns()
+      await loadViewColumns()
-    reloadData?.()
-    $e('a:fields:show-all')
-  }
-  const hideAll = async (ignoreIds?: any) => {
-    if (isLocalMode.value) {
-      fields.value = fields.value?.map((field: Field) => ({
-        ...field,
-        show: !!field.isViewEssentialField,
-      }))
       reloadData?.()
-      return
+      $e('a:fields:show-all')
     }
-    if (view?.value?.id) {
+
-      if (ignoreIds) {
+    const saveOrUpdate = async (field: any, index: number) => {
-        await $api.dbView.hideAllColumn(view.value.id, {
+      if (isLocalMode.value && fields.value) {
-          ignoreIds,
+        fields.value[index] = field
+        meta.value!.columns = meta.value!.columns?.map((column: ColumnType) => {
+          if (column.id === field.fk_column_id) {
+            return {
+              ...column,
+              ...field,
+              id: field.fk_column_id,
+            }
+          }
+          return column
         })
-      } else {
+
-        await $api.dbView.hideAllColumn(view.value.id)
+        localChanges.value.push(field)
       }
-    }
 
-    await loadViewColumns()
+      if (isUIAllowed('viewFieldEdit')) {
-    reloadData?.()
+        if (field.id && view?.value?.id) {
-    $e('a:fields:show-all')
+          await $api.dbViewColumn.update(view.value.id, field.id, field)
-  }
+        } else if (view.value?.id) {
+          const insertedField = (await $api.dbViewColumn.create(view.value.id, field)) as any
 
-  const saveOrUpdate = async (field: any, index: number) => {
+          /** update the field in fields if defined */
-    if (isLocalMode.value && fields.value) {
+          if (fields.value) fields.value[index] = insertedField
-      fields.value[index] = field
+
-      meta.value!.columns = meta.value!.columns?.map((column: ColumnType) => {
+          return insertedField
-        if (column.id === field.fk_column_id) {
-          return {
-            ...column,
-            ...field,
-            id: field.fk_column_id,
-          }
         }
-        return column
+      }
-      })
 
-      localChanges.value.push(field)
+      await loadViewColumns()
+      reloadData?.()
     }
 
-    if (isUIAllowed('viewFieldEdit')) {
+    const showSystemFields = computed({
-      if (field.id && view?.value?.id) {
+      get() {
-        await $api.dbViewColumn.update(view.value.id, field.id, field)
+        return (view.value?.show_system_fields as boolean) || false
-      } else if (view.value?.id) {
+      },
-        const insertedField = (await $api.dbViewColumn.create(view.value.id, field)) as any
+      set(v: boolean) {
+        if (view?.value?.id) {
+          if (!isLocalMode.value) {
+            $api.dbView
+              .update(view.value.id, {
+                show_system_fields: v,
+              })
+              .finally(() => {
+                loadViewColumns()
+                reloadData?.()
+              })
+          }
+          view.value.show_system_fields = v
+        }
+        $e('a:fields:system-fields')
+      },
+    })
 
-        /** update the field in fields if defined */
+    const filteredFieldList = computed(() => {
-        if (fields.value) fields.value[index] = insertedField
+      return (
+        fields.value?.filter((field: Field) => {
+          if (metaColumnById?.value?.[field.fk_column_id!]?.pv) return true
 
-        return insertedField
+          // hide system columns if not enabled
-      }
+          if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) {
-    }
+            return false
+          }
 
-    await loadViewColumns()
+          if (filterQuery.value === '') {
-    reloadData?.()
+            return true
-  }
+          } else {
+            return field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
+          }
+        }) || []
+      )
+    })
 
-  const showSystemFields = computed({
+    const sortedAndFilteredFields = computed<ColumnType[]>(() => {
-    get() {
+      return (fields?.value
-      return (view.value?.show_system_fields as boolean) || false
+        ?.filter((field: Field) => {
-    },
+          // hide system columns if not enabled
-    set(v: boolean) {
+          if (
-      if (view?.value?.id) {
+            !showSystemFields.value &&
-        if (!isLocalMode.value) {
+            metaColumnById.value &&
-          $api.dbView
+            metaColumnById?.value?.[field.fk_column_id!] &&
-            .update(view.value.id, {
+            isSystemColumn(metaColumnById.value?.[field.fk_column_id!]) &&
-              show_system_fields: v,
+            !metaColumnById.value?.[field.fk_column_id!]?.pv
-            })
+          ) {
-            .finally(() => {
+            return false
-              loadViewColumns()
+          }
-              reloadData?.()
+          return field.show && metaColumnById?.value?.[field.fk_column_id!]
-            })
+        })
-        }
+        ?.sort((a: Field, b: Field) => a.order - b.order)
-        view.value.show_system_fields = v
+        ?.map((field: Field) => metaColumnById?.value?.[field.fk_column_id!]) || []) as ColumnType[]
-      }
+    })
-      $e('a:fields:system-fields')
-    },
-  })
-
-  const filteredFieldList = computed(() => {
-    return (
-      fields.value?.filter((field: Field) => {
-        if (metaColumnById?.value?.[field.fk_column_id!]?.pv) return true
-
-        // hide system columns if not enabled
-        if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) {
-          return false
-        }
 
-        if (filterQuery.value === '') {
+    const toggleFieldVisibility = (checked: boolean, field: any) => {
-          return true
+      const fieldIndex = fields.value?.findIndex((f) => f.fk_column_id === field.fk_column_id)
-        } else {
+      if (!fieldIndex && fieldIndex !== 0) return
-          return field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
+      addUndo({
-        }
+        undo: {
-      }) || []
+          fn: (v: boolean) => {
-    )
+            field.show = !v
-  })
+            saveOrUpdate(field, fieldIndex)
-
+          },
-  const sortedAndFilteredFields = computed<ColumnType[]>(() => {
+          args: [checked],
-    return (fields?.value
-      ?.filter((field: Field) => {
-        // hide system columns if not enabled
-        if (
-          !showSystemFields.value &&
-          metaColumnById.value &&
-          metaColumnById?.value?.[field.fk_column_id!] &&
-          isSystemColumn(metaColumnById.value?.[field.fk_column_id!]) &&
-          !metaColumnById.value?.[field.fk_column_id!]?.pv
-        ) {
-          return false
-        }
-        return field.show && metaColumnById?.value?.[field.fk_column_id!]
-      })
-      ?.sort((a: Field, b: Field) => a.order - b.order)
-      ?.map((field: Field) => metaColumnById?.value?.[field.fk_column_id!]) || []) as ColumnType[]
-  })
-
-  const toggleFieldVisibility = (checked: boolean, field: any) => {
-    const fieldIndex = fields.value?.findIndex((f) => f.fk_column_id === field.fk_column_id)
-    if (!fieldIndex && fieldIndex !== 0) return
-    addUndo({
-      undo: {
-        fn: (v: boolean) => {
-          field.show = !v
-          saveOrUpdate(field, fieldIndex)
         },
-        args: [checked],
+        redo: {
-      },
+          fn: (v: boolean) => {
-      redo: {
+            field.show = v
-        fn: (v: boolean) => {
+            saveOrUpdate(field, fieldIndex)
-          field.show = v
+          },
-          saveOrUpdate(field, fieldIndex)
+          args: [checked],
         },
-        args: [checked],
+        scope: defineViewScope({ view: view.value }),
-      },
+      })
-      scope: defineViewScope({ view: view.value }),
+      saveOrUpdate(field, fieldIndex)
-    })
+    }
-    saveOrUpdate(field, fieldIndex)
+
-  }
+    // reload view columns when active view changes
-
+    // or when columns count changes(delete/add)
-  // reload view columns when active view changes
+    watch(
-  // or when columns count changes(delete/add)
+      [() => view?.value?.id, () => meta.value?.columns?.length],
-  watch(
+      async ([newViewId]) => {
-    [() => view?.value?.id, () => meta.value?.columns?.length],
+        // reload only if view belongs to current table
-    async ([newViewId]) => {
+        if (newViewId && view.value?.fk_model_id === meta.value?.id) {
-      // reload only if view belongs to current table
+          isViewColumnsLoading.value = true
-      if (newViewId && view.value?.fk_model_id === meta.value?.id) {
+          try {
-        isViewColumnsLoading.value = true
+            await loadViewColumns()
-        try {
+          } catch (e) {
-          await loadViewColumns()
+            console.error(e)
-        } catch (e) {
+          }
-          console.error(e)
+          isViewColumnsLoading.value = false
         }
-        isViewColumnsLoading.value = false
+      },
-      }
+      { immediate: true },
-    },
+    )
-    { immediate: true },
+
-  )
+    return {
-
+      fields,
-  return {
+      loadViewColumns,
-    fields,
+      filteredFieldList,
-    loadViewColumns,
+      filterQuery,
-    filteredFieldList,
+      showAll,
-    filterQuery,
+      hideAll,
-    showAll,
+      saveOrUpdate,
-    hideAll,
+      sortedAndFilteredFields,
-    saveOrUpdate,
+      showSystemFields,
-    sortedAndFilteredFields,
+      metaColumnById,
-    showSystemFields,
+      toggleFieldVisibility,
-    metaColumnById,
+      isViewColumnsLoading,
-    toggleFieldVisibility,
+    }
-    isViewColumnsLoading,
+  },
-  }
+  'useViewColumnsOrThrow',
+)
+
+export { useProvideViewColumns }
+
+export function useViewColumnsOrThrow() {
+  const viewColumns = useViewColumns()
+  if (viewColumns == null) throw new Error('Please call `useProvideViewColumns` on the appropriate parent component')
+  return viewColumns
 }

packages/nc-gui/composables/useViewFilters.ts

@@ -81,7 +81,7 @@ export function useViewFilters(
 
   const activeView = inject(ActiveViewInj, ref())
 
-  const { showSystemFields, metaColumnById } = useViewColumns(activeView, meta)
+  const { showSystemFields, metaColumnById } = useViewColumnsOrThrow(activeView, meta)
 
   const options = computed<SelectProps['options']>(() =>
     meta.value?.columns?.filter((c: ColumnType) => {