fix: keep primary grid field visible (baserow#5289)

Author: silvestrid

changelog/entries/unreleased/bug/5288_fix_hidden_primary_field_in_grid_view.json

@@ -0,0 +1,9 @@
+{
+    "type": "bug",
+    "message": "Fixed a bug where changing the primary field to a hidden field could keep it hidden in the grid view.",
+    "issue_origin": "github",
+    "issue_number": 5288,
+    "domain": "database",
+    "bullet_points": [],
+    "created_at": "2026-04-30"
+}

web-frontend/modules/database/components/view/grid/GridView.vue

@@ -455,11 +455,8 @@ import GridViewFreezeHandle from '@baserow/modules/database/components/view/grid
 import GridViewRowDragging from '@baserow/modules/database/components/view/grid/GridViewRowDragging'
 import RowEditModal from '@baserow/modules/database/components/row/RowEditModal'
 import gridViewHelpers from '@baserow/modules/database/mixins/gridViewHelpers'
-import {
-  filterHiddenFieldsFunction,
-  filterVisibleFieldsFunction,
-  sortFieldsByOrderAndIdFunction,
-} from '@baserow/modules/database/utils/view'
+import { sortFieldsByOrderAndIdFunction } from '@baserow/modules/database/utils/view'
+import { filterGridViewVisibleFieldsFunction } from '@baserow/modules/database/components/view/grid/utils'
 import viewHelpers from '@baserow/modules/database/mixins/viewHelpers'
 import { isElement } from '@baserow/modules/core/utils/dom'
 import viewDecoration from '@baserow/modules/database/mixins/viewDecoration'
@@ -548,16 +545,17 @@ export default {
     rightVisibleFields() {
       const fieldOptions = this.fieldOptions
       return this.rightFields
-        .filter(filterVisibleFieldsFunction(fieldOptions))
+        .filter(filterGridViewVisibleFieldsFunction(fieldOptions))
         .sort(sortFieldsByOrderAndIdFunction(fieldOptions, true))
     },
     /**
      * Returns only the hidden fields in the correct order.
      */
     hiddenFields() {
       const fieldOptions = this.fieldOptions
+      const isFieldVisible = filterGridViewVisibleFieldsFunction(fieldOptions)
       return this.rightFields
-        .filter(filterHiddenFieldsFunction(fieldOptions))
+        .filter((field) => !isFieldVisible(field))
         .sort(sortFieldsByOrderAndIdFunction(fieldOptions))
     },
     viewHasGroupBys() {
@@ -585,7 +583,8 @@ export default {
     },
     /**
      * Returns the fields that should be displayed in the frozen left section.
-     * Takes the first N *visible* fields in sort order (primary always first).
+     * Takes the first N fields visible in the grid in sort order. The primary
+     * field is always included, even if its field options mark it as hidden.
      */
     leftFields() {
       if (!this.hasFrozenColumns) {
@@ -594,7 +593,7 @@ export default {
       const fieldOptions = this.fieldOptions
       const sorted = this.fields
         .slice()
-        .filter(filterVisibleFieldsFunction(fieldOptions))
+        .filter(filterGridViewVisibleFieldsFunction(fieldOptions))
         .sort(sortFieldsByOrderAndIdFunction(fieldOptions, true))
       return sorted.slice(0, this.frozenColumnCount)
     },
@@ -1790,7 +1789,7 @@ export default {
       const fieldOptions = this.fieldOptions
       const sorted = this.fields
         .slice()
-        .filter(filterVisibleFieldsFunction(fieldOptions))
+        .filter(filterGridViewVisibleFieldsFunction(fieldOptions))
         .sort(sortFieldsByOrderAndIdFunction(fieldOptions, true))
       const frozenWidth = sorted
         .slice(0, this.frozenColumnCount)

web-frontend/modules/database/components/view/grid/GridViewFreezeHandle.vue

@@ -32,10 +32,8 @@
 
 <script>
 import { notifyIf } from '@baserow/modules/core/utils/error'
-import {
-  filterVisibleFieldsFunction,
-  sortFieldsByOrderAndIdFunction,
-} from '@baserow/modules/database/utils/view'
+import { sortFieldsByOrderAndIdFunction } from '@baserow/modules/database/utils/view'
+import { filterGridViewVisibleFieldsFunction } from '@baserow/modules/database/components/view/grid/utils'
 
 const MAX_FROZEN_COLUMNS = 4
 const HANDLE_PADDING = 20
@@ -104,7 +102,7 @@ export default {
     sortedFields() {
       return this.fields
         .slice()
-        .filter(filterVisibleFieldsFunction(this.fieldOptions))
+        .filter(filterGridViewVisibleFieldsFunction(this.fieldOptions))
         .sort(sortFieldsByOrderAndIdFunction(this.fieldOptions, true))
     },
     maxFrozenColumns() {

web-frontend/modules/database/components/view/grid/utils.js

@@ -0,0 +1,10 @@
+import { filterVisibleFieldsFunction } from '@baserow/modules/database/utils/view'
+
+/**
+ * In the grid view, the primary field is always rendered even when its field
+ * options mark it as hidden.
+ */
+export function filterGridViewVisibleFieldsFunction(fieldOptions) {
+  const isFieldVisible = filterVisibleFieldsFunction(fieldOptions)
+  return (field) => field.primary || isFieldVisible(field)
+}

web-frontend/test/unit/database/components/view/grid/gridView.spec.js

@@ -0,0 +1,53 @@
+import GridView from '@baserow/modules/database/components/view/grid/GridView'
+import GridViewFreezeHandle from '@baserow/modules/database/components/view/grid/GridViewFreezeHandle'
+
+describe('GridView component', () => {
+  const fields = [
+    { id: 1, name: 'Primary', primary: true },
+    { id: 2, name: 'Hidden', primary: false },
+    { id: 3, name: 'Visible', primary: false },
+  ]
+  const fieldOptions = {
+    1: { order: 0, hidden: true },
+    2: { order: 1, hidden: true },
+    3: { order: 2, hidden: false },
+  }
+
+  test('leftFields includes the primary field when it is hidden', () => {
+    const leftFields = GridView.computed.leftFields.call({
+      fields,
+      fieldOptions,
+      frozenColumnCount: 2,
+      hasFrozenColumns: true,
+    })
+
+    expect(leftFields.map((field) => field.id)).toEqual([1, 3])
+  })
+
+  test('rightVisibleFields includes the primary field when frozen columns are disabled', () => {
+    const rightVisibleFields = GridView.computed.rightVisibleFields.call({
+      rightFields: fields,
+      fieldOptions,
+    })
+
+    expect(rightVisibleFields.map((field) => field.id)).toEqual([1, 3])
+  })
+
+  test('hiddenFields excludes the primary field when it is hidden', () => {
+    const hiddenFields = GridView.computed.hiddenFields.call({
+      rightFields: fields,
+      fieldOptions,
+    })
+
+    expect(hiddenFields.map((field) => field.id)).toEqual([2])
+  })
+
+  test('freeze handle sortedFields includes the primary field when it is hidden', () => {
+    const sortedFields = GridViewFreezeHandle.computed.sortedFields.call({
+      fields,
+      fieldOptions,
+    })
+
+    expect(sortedFields.map((field) => field.id)).toEqual([1, 3])
+  })
+})