Add schemaOverrides prop to sheet and use it to customise user table schema

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

@@ -16,6 +16,14 @@
   import SheetRelationshipButton from "components/backend/DataTable/buttons/sheet/SheetRelationshipButton.svelte"
   import SheetEditColumnModal from "components/backend/DataTable/modals/sheet/SheetEditColumnModal.svelte"
 
+  const userSchemaOverrides = {
+    firstName: { name: "First name", disabled: true },
+    lastName: { name: "Last name", disabled: true },
+    email: { name: "Email", disabled: true },
+    roleId: { name: "Role", disabled: true },
+    status: { name: "Status", disabled: true },
+  }
+
   $: id = $tables.selected?._id
   $: isUsersTable = id === TableNames.USERS
   $: isInternal = $tables.selected?.type !== "external"
@@ -27,6 +35,7 @@
     tableId={id}
     allowAddRows={!isUsersTable}
     allowDeleteRows={!isUsersTable}
+    schemaOverrides={isUsersTable ? userSchemaOverrides : null}
     on:updatetable={e => tables.updateTable(e.detail)}
   >
     <svelte:fragment slot="controls">

packages/frontend-core/src/components/sheet/cells/DataCell.svelte

@@ -30,7 +30,7 @@
   // Determine if the cell is editable
   $: readonly =
     column.schema.autocolumn ||
-    column.schema.readonly ||
+    column.schema.disabled ||
     (!$config.allowEditRows && row._id)
 
   // Register this cell API if the row is focused

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

@@ -117,7 +117,7 @@
       color={`var(--spectrum-global-color-gray-600)`}
     />
     <div class="name">
-      {column.name}
+      {column.label}
     </div>
     {#if sortedBy}
       <div class="sort-indicator">
@@ -154,8 +154,10 @@
     <MenuItem
       icon="Edit"
       on:click={editColumn}
-      disabled={!$config.allowEditColumns}>Edit column</MenuItem
+      disabled={!$config.allowEditColumns || column.schema.disabled}
     >
+      Edit column
+    </MenuItem>
     <MenuItem
       icon="Label"
       on:click={makeDisplayColumn}

packages/frontend-core/src/components/sheet/layout/Sheet.svelte

@@ -29,8 +29,9 @@
   import RowHeightButton from "../controls/RowHeightButton.svelte"
   import { fade } from "svelte/transition"
 
-  export let API
-  export let tableId
+  export let API = null
+  export let tableId = null
+  export let schemaOverrides = null
   export let allowAddRows = true
   export let allowAddColumns = true
   export let allowEditColumns = true
@@ -43,6 +44,7 @@
 
   // State stores
   const tableIdStore = writable(tableId)
+  const schemaOverridesStore = writable(schemaOverrides)
   const config = writable({
     allowAddRows,
     allowAddColumns,
@@ -58,6 +60,7 @@
     rand,
     config,
     tableId: tableIdStore,
+    schemaOverrides: schemaOverridesStore,
   }
   context = { ...context, ...createEventManagers() }
   context = attachStores(context)
@@ -75,6 +78,7 @@
 
   // Keep stores up to date
   $: tableIdStore.set(tableId)
+  $: schemaOverridesStore.set(schemaOverrides)
   $: config.set({
     allowAddRows,
     allowAddColumns,

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

@@ -111,28 +111,45 @@ export const deriveStores = context => {
 }
 
 export const initialise = context => {
-  const { table, columns, stickyColumn } = context
+  const { table, columns, stickyColumn, schemaOverrides } = context
+
+  const schema = derived(
+    [table, schemaOverrides],
+    ([$table, $schemaOverrides]) => {
+      let newSchema = $table?.schema
+      if (!newSchema) {
+        return null
+      }
+      Object.keys($schemaOverrides || {}).forEach(field => {
+        if (newSchema[field]) {
+          newSchema[field] = {
+            ...newSchema[field],
+            ...$schemaOverrides[field],
+          }
+        }
+      })
+      return newSchema
+    }
+  )
 
   // Merge new schema fields with existing schema in order to preserve widths
-  table.subscribe($table => {
-    const schema = $table?.schema
-    if (!schema) {
+  schema.subscribe($schema => {
+    if (!$schema) {
       columns.set([])
       stickyColumn.set(null)
       return
     }
-    const currentColumns = get(columns)
-    const currentStickyColumn = get(stickyColumn)
+    const $table = get(table)
 
     // Find primary display
     let primaryDisplay
-    if ($table.primaryDisplay && schema[$table.primaryDisplay]) {
+    if ($table.primaryDisplay && $schema[$table.primaryDisplay]) {
       primaryDisplay = $table.primaryDisplay
     }
 
     // Get field list
     let fields = []
-    Object.keys(schema).forEach(field => {
+    Object.keys($schema).forEach(field => {
       if (field !== primaryDisplay) {
         fields.push(field)
       }
@@ -142,11 +159,12 @@ export const initialise = context => {
     columns.set(
       fields
         .map(field => ({
-          name: schema[field].name || field,
-          schema: schema[field],
-          width: schema[field].width || DefaultColumnWidth,
-          visible: schema[field].visible ?? true,
-          order: schema[field].order,
+          name: field,
+          label: $schema[field].name || field,
+          schema: $schema[field],
+          width: $schema[field].width || DefaultColumnWidth,
+          visible: $schema[field].visible ?? true,
+          order: $schema[field].order,
         }))
         .sort((a, b) => {
           // Sort by order first
@@ -175,19 +193,14 @@ export const initialise = context => {
       stickyColumn.set(null)
       return
     }
-
-    // Check if there is an existing column with this name so we can keep
-    // the width setting
-    let existing = currentColumns.find(x => x.name === primaryDisplay)
-    if (!existing && currentStickyColumn?.name === primaryDisplay) {
-      existing = currentStickyColumn
-    }
     stickyColumn.set({
       name: primaryDisplay,
-      width: schema[primaryDisplay].width || DefaultColumnWidth,
+      label: $schema[primaryDisplay].name || primaryDisplay,
+      schema: $schema[primaryDisplay],
+      width: $schema[primaryDisplay].width || DefaultColumnWidth,
+      visible: true,
+      order: 0,
       left: GutterWidth,
-      schema: schema[primaryDisplay],
-      idx: "sticky",
     })
   })
 }