diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
index e803ca21cf..9549041a18 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
@@ -40,7 +40,7 @@
   $: tableOptions = $backendUiStore.tables.filter(
     table => table._id !== $backendUiStore.draftTable._id
   )
-  $: required = !!field?.constraints?.presence
+  $: required = !!field?.constraints?.presence || primaryDisplay
 
   async function saveColumn() {
     backendUiStore.update(state => {
@@ -67,6 +67,14 @@
     field.constraints.presence = req ? { allowEmpty: false } : false
     required = req
   }
+
+  function onChangePrimaryDisplay(e) {
+    const isPrimary = e.target.checked
+    // primary display is always required
+    if (isPrimary) {
+      field.constraints.presence = { allowEmpty: false }
+    }
+  }
 </script>
 
 <div class="actions">
@@ -88,6 +96,7 @@
     <Toggle
       checked={required}
       on:change={onChangeRequired}
+      disabled={primaryDisplay}
       thin
       text="Required" />
   {/if}
@@ -95,6 +104,7 @@
   {#if field.type !== 'link'}
     <Toggle
       bind:checked={primaryDisplay}
+      on:change={onChangePrimaryDisplay}
       thin
       text="Use as table display column" />
   {/if}