Some further UI work for auto-columns.

packages/builder/src/components/backend/DataTable/DataTable.svelte

@@ -6,6 +6,7 @@
   import ExportButton from "./buttons/ExportButton.svelte"
   import EditRolesButton from "./buttons/EditRolesButton.svelte"
   import ManageAccessButton from "./buttons/ManageAccessButton.svelte"
+  import HideAutocolumnButton from "./buttons/HideAutocolumnButton.svelte"
   import * as api from "./api"
   import Table from "./Table.svelte"
   import { TableNames } from "constants"
@@ -14,6 +15,7 @@
 
   let data = []
   let loading = false
+  let hideAutocolumns
 
   $: isUsersTable = $backendUiStore.selectedTable?._id === TableNames.USERS
   $: title = $backendUiStore.selectedTable.name
@@ -41,6 +43,7 @@
   tableId={$backendUiStore.selectedTable?._id}
   {data}
   allowEditing={true}
+  bind:hideAutocolumns
   {loading}>
   <CreateColumnButton />
   {#if schema && Object.keys(schema).length > 0}
@@ -50,6 +53,7 @@
     <CreateViewButton />
     <ManageAccessButton resourceId={$backendUiStore.selectedTable?._id} />
     <ExportButton view={tableView} />
+    <HideAutocolumnButton bind:hideAutocolumns />
   {/if}
   {#if isUsersTable}
     <EditRolesButton />

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -24,6 +24,7 @@
   export let allowEditing = false
   export let loading = false
   export let theme = "alpine"
+  export let hideAutocolumns = false
 
   let columnDefs = []
   let selectedRows = []
@@ -85,7 +86,11 @@
       return !(isUsersTable && ["email", "roleId"].includes(key))
     }
 
-    Object.entries(schema || {}).forEach(([key, value]) => {
+    for (let [key, value] of Object.entries(schema || {})) {
+      // skip autocolumns if hiding
+      if (hideAutocolumns && value.autocolumn) {
+        continue
+      }
       result.push({
         headerCheckboxSelection: false,
         headerComponent: TableHeader,
@@ -108,7 +113,7 @@
         resizable: true,
         minWidth: 200,
       })
-    })
+    }
 
     columnDefs = result
   }
@@ -150,6 +155,7 @@
   </div>
 </div>
 <div class="grid-wrapper">
+  {#key columnDefs.length}
     <AgGrid
       {theme}
       {options}
@@ -157,6 +163,7 @@
       {columnDefs}
       {loading}
       on:select={({ detail }) => (selectedRows = detail)} />
+  {/key}
 </div>
 
 <style>

packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { TextButton } from "@budibase/bbui"
+
+  export let hideAutocolumns = true
+
+  let anchor
+  let dropdown
+
+  function hideOrUnhide() {
+    hideAutocolumns = !hideAutocolumns
+  }
+</script>
+
+<div bind:this={anchor}>
+  <TextButton text small on:click={hideOrUnhide}>
+    <i class="ri-magic-fill"></i>
+    {#if hideAutocolumns}
+      Show Auto Columns
+    {:else}
+      Hide Auto Columns
+    {/if}
+  </TextButton>
+</div>
+
+<style>
+  i {
+    margin-right: 4px;
+  }
+</style>

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -12,10 +12,12 @@
   import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
   import {
     FIELDS,
-    getAutoColumnInformation,
-    buildAutoColumn,
     AUTO_COLUMN_SUB_TYPES,
   } from "constants/backend"
+  import {
+    getAutoColumnInformation,
+    buildAutoColumn,
+  } from "utilities/backend"
   import { notifier } from "builderStore/store/notifications"
   import ValuesList from "components/common/ValuesList.svelte"
   import DatePicker from "components/common/DatePicker.svelte"

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -9,7 +9,7 @@
   import { NEW_ROW_TEMPLATE } from "builderStore/store/screenTemplates/newRowScreen"
   import { ROW_DETAIL_TEMPLATE } from "builderStore/store/screenTemplates/rowDetailScreen"
   import { ROW_LIST_TEMPLATE } from "builderStore/store/screenTemplates/rowListScreen"
-  import { buildAutoColumn, getAutoColumnInformation } from "constants/backend"
+  import { buildAutoColumn, getAutoColumnInformation } from "utilities/backend"
 
   const defaultScreens = [
     NEW_ROW_TEMPLATE,

packages/builder/src/constants/backend/index.js

@@ -125,46 +125,3 @@ export function isAutoColumnUserRelationship(subtype) {
     subtype === AUTO_COLUMN_SUB_TYPES.UPDATED_BY
   )
 }
-
-export function getAutoColumnInformation(enabled = true) {
-  let info = {}
-  for (let [key, subtype] of Object.entries(AUTO_COLUMN_SUB_TYPES)) {
-    info[subtype] = { enabled, name: AUTO_COLUMN_DISPLAY_NAMES[key] }
-  }
-  return info
-}
-
-export function buildAutoColumn(tableName, name, subtype) {
-  let type, constraints
-  switch (subtype) {
-    case AUTO_COLUMN_SUB_TYPES.UPDATED_BY:
-    case AUTO_COLUMN_SUB_TYPES.CREATED_BY:
-      type = FIELDS.LINK.type
-      constraints = FIELDS.LINK.constraints
-      break
-    case AUTO_COLUMN_SUB_TYPES.AUTO_ID:
-      type = FIELDS.NUMBER.type
-      constraints = FIELDS.NUMBER.constraints
-      break
-    default:
-      type = FIELDS.STRING.type
-      constraints = FIELDS.STRING.constraints
-      break
-  }
-  if (Object.values(AUTO_COLUMN_SUB_TYPES).indexOf(subtype) === -1) {
-    throw "Cannot build auto column with supplied subtype"
-  }
-  const base = {
-    name,
-    type,
-    subtype,
-    icon: "ri-magic-line",
-    autocolumn: true,
-    constraints,
-  }
-  if (isAutoColumnUserRelationship(subtype)) {
-    base.tableId = TableNames.USERS
-    base.fieldName = `${tableName}-${name}`
-  }
-  return base
-}

packages/builder/src/utilities/backend/index.js

@@ -0,0 +1,55 @@
+import { TableNames } from "../../constants"
+import {
+  AUTO_COLUMN_DISPLAY_NAMES,
+  AUTO_COLUMN_SUB_TYPES,
+  FIELDS,
+  isAutoColumnUserRelationship
+} from "../../constants/backend"
+
+export function getAutoColumnInformation(enabled = true) {
+  let info = {}
+  for (let [key, subtype] of Object.entries(AUTO_COLUMN_SUB_TYPES)) {
+    info[subtype] = { enabled, name: AUTO_COLUMN_DISPLAY_NAMES[key] }
+  }
+  return info
+}
+
+export function buildAutoColumn(tableName, name, subtype) {
+  let type, constraints
+  switch (subtype) {
+    case AUTO_COLUMN_SUB_TYPES.UPDATED_BY:
+    case AUTO_COLUMN_SUB_TYPES.CREATED_BY:
+      type = FIELDS.LINK.type
+      constraints = FIELDS.LINK.constraints
+      break
+    case AUTO_COLUMN_SUB_TYPES.AUTO_ID:
+      type = FIELDS.NUMBER.type
+      constraints = FIELDS.NUMBER.constraints
+      break
+    case AUTO_COLUMN_SUB_TYPES.UPDATED_AT:
+    case AUTO_COLUMN_SUB_TYPES.CREATED_AT:
+      type = FIELDS.DATETIME.type
+      constraints = FIELDS.DATETIME.constraints
+      break
+    default:
+      type = FIELDS.STRING.type
+      constraints = FIELDS.STRING.constraints
+      break
+  }
+  if (Object.values(AUTO_COLUMN_SUB_TYPES).indexOf(subtype) === -1) {
+    throw "Cannot build auto column with supplied subtype"
+  }
+  const base = {
+    name,
+    type,
+    subtype,
+    icon: "ri-magic-line",
+    autocolumn: true,
+    constraints,
+  }
+  if (isAutoColumnUserRelationship(subtype)) {
+    base.tableId = TableNames.USERS
+    base.fieldName = `${tableName}-${name}`
+  }
+  return base
+}

packages/server/src/utilities/rowProcessor.js

@@ -101,9 +101,11 @@ async function processAutoColumn(user, table, row) {
         row[key] = now
         break
       case AutoFieldSubTypes.AUTO_ID:
+        if (creating) {
           schema.lastID = !schema.lastID ? BASE_AUTO_ID : schema.lastID + 1
           row[key] = schema.lastID
           tableUpdated = true
+        }
         break
     }
   }