fix/Fixed table column toggle while table creation

packages/nc-gui-v2/components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
     ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']

packages/nc-gui-v2/components/dlg/TableCreate.vue

@@ -45,6 +45,11 @@ const validators = computed(() => {
 })
 const { validateInfos } = useForm(table, validators)
 
+const systemColumnsCheckboxInfo = SYSTEM_COLUMNS.map((c, index) => ({
+  value: c,
+  disabled: index === 0,
+}))
+
 onMounted(() => {
   generateUniqueTitle()
 
@@ -78,8 +83,8 @@ onMounted(() => {
           />
         </a-form-item>
 
-        <div class="flex justify-end">
-          <div class="pointer" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
+        <div class="flex justify-end items-center">
+          <div class="pointer flex flex-row items-center gap-x-1" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
             {{ isAdvanceOptVisible ? 'Hide' : 'Show' }} more
 
             <MdiMinusCircleOutline v-if="isAdvanceOptVisible" class="text-gray-500" />
@@ -95,32 +100,29 @@ onMounted(() => {
           </a-form-item>
 
           <div>
-            <div class="mb-5">
+            <div class="mb-1">
               <!-- Add Default Columns -->
               {{ $t('msg.info.addDefaultColumns') }}
             </div>
 
             <a-row>
-              <a-col :span="6">
-                <a-tooltip placement="top">
+              <a-checkbox-group
+                v-model:value="table.columns"
+                :options="systemColumnsCheckboxInfo"
+                class="!flex flex-row justify-between w-full"
+              >
+                <template #label="{ value }">
+                  <a-tooltip v-if="value === 'id'" placement="top" class="!flex">
                     <template #title>
                       <span>ID column is required, you can rename this later if required.</span>
                     </template>
-                  <a-checkbox v-model:checked="table.columnsToggleInfo.id" disabled>ID</a-checkbox>
+                    ID
                   </a-tooltip>
-              </a-col>
-
-              <a-col :span="6">
-                <a-checkbox v-model:checked="table.columnsToggleInfo.title"> title </a-checkbox>
-              </a-col>
-
-              <a-col :span="6">
-                <a-checkbox v-model:checked="table.columnsToggleInfo.created_at"> created_at </a-checkbox>
-              </a-col>
-
-              <a-col :span="6">
-                <a-checkbox v-model:checked="table.columnsToggleInfo.updated_at"> updated_at </a-checkbox>
-              </a-col>
+                  <div v-else class="flex">
+                    {{ value }}
+                  </div>
+                </template>
+              </a-checkbox-group>
             </a-row>
           </div>
         </div>

packages/nc-gui-v2/composables/useTable.ts

@@ -1,22 +1,15 @@
 import { Modal, message } from 'ant-design-vue'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import { useProject } from './useProject'
-import { TabType } from '~/composables/useTabs'
-import { extractSdkResponseErrorMsg } from '~/utils'
 import { useNuxtApp } from '#app'
+import { TabType } from '~/composables/useTabs'
+import { SYSTEM_COLUMNS, extractSdkResponseErrorMsg, useProject } from '#imports'
 
 export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   const table = reactive<{ title: string; table_name: string; columns: string[]; columnsToggleInfo: Record<string, boolean> }>({
     title: '',
     table_name: '',
-    columns: ['id', 'title', 'created_at', 'updated_at'],
-    columnsToggleInfo: {
-      id: true,
-      title: true,
-      created_at: true,
-      updated_at: true,
-    },
+    columns: [...SYSTEM_COLUMNS],
   })
 
   const { $e, $api } = useNuxtApp()
@@ -27,9 +20,7 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
 
   const createTable = async () => {
     if (!sqlUi?.value) return
-    const columns = sqlUi?.value
-      ?.getNewTableColumns()
-      .filter((col) => {
+    const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
       if (col.column_name === 'id' && table.columns.includes('id_ag')) {
         Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
         col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
@@ -38,7 +29,6 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
       }
       return table.columns.includes(col.column_name)
     })
-      .filter((col) => table.columnsToggleInfo[col.column_name])
 
     const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
       ...table,

packages/nc-gui-v2/lib/constants.ts

@@ -1,2 +1,3 @@
 export const NOCO = 'noco'
 export const USER_PROJECT_ROLES = 'user_project_roles'
+export const SYSTEM_COLUMNS = ['id', 'title', 'created_at', 'updated_at']