Prevent hiding required editable columns

frontend/lib/src/components/widgets/DataFrame/hooks/useColumnLoader.test.ts

@@ -359,6 +359,28 @@ describe("useColumnLoader hook", () => {
     }
   })
 
+  it("disallows hidden for editable columns that are required", () => {
+    const element = ArrowProto.create({
+      data: UNICODE,
+      editingMode: ArrowProto.EditingMode.DYNAMIC,
+      columns: JSON.stringify({
+        c1: {
+          required: true,
+          hidden: true,
+        },
+      }),
+    })
+
+    const data = new Quiver(element)
+
+    const { result } = renderHook(() => {
+      return useColumnLoader(element, data, false)
+    })
+
+    expect(result.current.columns[1].isRequired).toBe(true)
+    expect(result.current.columns[1].isHidden).toBe(false)
+  })
+
   it("doesn't configure any icon for non-editable columns", () => {
     const element = ArrowProto.create({
       data: UNICODE,

frontend/lib/src/components/widgets/DataFrame/hooks/useColumnLoader.ts

@@ -262,6 +262,14 @@ function useColumnLoader(
             ...updatedColumn,
             icon: "editable",
           }
+
+          // Make sure that required columns are not hidden:
+          if (updatedColumn.isRequired) {
+            updatedColumn = {
+              ...updatedColumn,
+              isHidden: false,
+            }
+          }
         }
 
         return ColumnType(updatedColumn)