fix/Fixed table column toggle while table creation

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

@@ -106,20 +106,20 @@ onMounted(() => {
                   <template #title>
                     <span>ID column is required, you can rename this later if required.</span>
                   </template>
-                  <a-checkbox v-model:checked="table.columns.id" disabled>ID</a-checkbox>
+                  <a-checkbox v-model:checked="table.columnsToggleInfo.id" disabled>ID</a-checkbox>
                 </a-tooltip>
               </a-col>
 
               <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.title"> title </a-checkbox>
+                <a-checkbox v-model:checked="table.columnsToggleInfo.title"> title </a-checkbox>
               </a-col>
 
               <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.created_at"> created_at </a-checkbox>
+                <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.columns.updated_at"> updated_at </a-checkbox>
+                <a-checkbox v-model:checked="table.columnsToggleInfo.updated_at"> updated_at </a-checkbox>
               </a-col>
             </a-row>
           </div>

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

@@ -7,10 +7,16 @@ import { extractSdkResponseErrorMsg } from '~/utils'
 import { useNuxtApp } from '#app'
 
 export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
-  const table = reactive<{ title: string; table_name: string; columns: string[] }>({
+  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,
+    },
   })
 
   const { $e, $api } = useNuxtApp()
@@ -21,7 +27,9 @@ 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)
@@ -30,6 +38,7 @@ 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,