Add column setting to grid

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

@@ -36,6 +36,7 @@
     allowDeleteRows={!isUsersTable}
     schemaOverrides={isUsersTable ? userSchemaOverrides : null}
     showAvatars={false}
+    columnWhitelist={["email", "firstName", "lastName"]}
     on:updatetable={e => tables.replaceTable(id, e.detail)}
   >
     <svelte:fragment slot="controls">

packages/client/manifest.json

@@ -5227,9 +5227,8 @@
     }
   },
   "gridblock": {
-    "block": true,
     "name": "Grid block",
-    "icon": "Table",
+    "icon": "ViewTable",
     "styles": ["size"],
     "size": {
       "width": 600,
@@ -5244,10 +5243,11 @@
         "required": true
       },
       {
-        "type": "columns",
+        "type": "multifield",
         "label": "Columns",
-        "key": "columns",
+        "key": "columnWhitelist",
-        "dependsOn": "table"
+        "dependsOn": "table",
+        "placeholder": "All columns"
       },
       {
         "type": "filter",

packages/client/src/components/app/GridBlock.svelte

@@ -13,6 +13,7 @@
   export let initialSortColumn = null
   export let initialSortOrder = null
   export let initialRowHeight = null
+  export let columnWhitelist = null
 
   const component = getContext("component")
   const { styleable, API, builderStore } = getContext("sdk")
@@ -33,6 +34,7 @@
     {initialSortColumn}
     {initialSortOrder}
     {initialRowHeight}
+    {columnWhitelist}
     showControls={false}
     allowExpandRows={false}
     allowSchemaChanges={false}

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -197,10 +197,12 @@
       Move right
     </MenuItem>
     <MenuItem
-      disabled={idx === "sticky"}
+      disabled={idx === "sticky" || !$config.showControls}
       icon="VisibilityOff"
-      on:click={hideColumn}>Hide column</MenuItem
+      on:click={hideColumn}
     >
+      Hide column
+    </MenuItem>
   </Menu>
 </Popover>
 

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -33,6 +33,7 @@
   export let API = null
   export let tableId = null
   export let schemaOverrides = null
+  export let columnWhitelist = null
   export let allowAddRows = true
   export let allowExpandRows = true
   export let allowEditRows = true
@@ -76,6 +77,7 @@
   $: config.set({
     tableId,
     schemaOverrides,
+    columnWhitelist,
     allowAddRows,
     allowExpandRows,
     allowEditRows,

packages/frontend-core/src/components/grid/stores/columns.js

@@ -131,11 +131,12 @@ export const deriveStores = context => {
 }
 
 export const initialise = context => {
-  const { table, columns, stickyColumn, schemaOverrides } = context
+  const { table, columns, stickyColumn, schemaOverrides, columnWhitelist } =
+    context
 
   const schema = derived(
-    [table, schemaOverrides],
+    [table, schemaOverrides, columnWhitelist],
-    ([$table, $schemaOverrides]) => {
+    ([$table, $schemaOverrides, $columnWhitelist]) => {
       if (!$table?.schema) {
         return null
       }
@@ -162,6 +163,16 @@ export const initialise = context => {
           }
         }
       })
+
+      // Apply whitelist if specified
+      if ($columnWhitelist?.length) {
+        Object.keys(newSchema).forEach(key => {
+          if (!$columnWhitelist.includes(key)) {
+            delete newSchema[key]
+          }
+        })
+      }
+
       return newSchema
     }
   )
@@ -229,7 +240,7 @@ export const initialise = context => {
     }
     stickyColumn.set({
       name: primaryDisplay,
-      label: $schema[primaryDisplay].name || primaryDisplay,
+      label: $schema[primaryDisplay].displayName || primaryDisplay,
       schema: $schema[primaryDisplay],
       width: $schema[primaryDisplay].width || DefaultColumnWidth,
       visible: true,

packages/frontend-core/src/components/grid/stores/config.js

@@ -11,6 +11,8 @@ export const createStores = context => {
   const initialSortOrder = getProp("initialSortOrder")
   const initialFilter = getProp("initialFilter")
   const initialRowHeight = getProp("initialRowHeight")
+  const schemaOverrides = getProp("schemaOverrides")
+  const columnWhitelist = getProp("columnWhitelist")
 
   return {
     config,
@@ -19,5 +21,7 @@ export const createStores = context => {
     initialSortOrder,
     initialFilter,
     initialRowHeight,
+    schemaOverrides,
+    columnWhitelist,
   }
 }