fix(tables): open the add-row form for required columns and gate Save on required fields

- New row, Shift+Enter, and Insert row open the Add Row form at their position when updates are locked or any column is required
- Add Row and Update Row stay disabled until every required field has a value
- Add mode accepts an insert position; Shift+Enter anchors to the neighbor row id

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/context-menu/context-menu.tsx

@@ -65,8 +65,7 @@ interface ContextMenuProps {
   disableInsert?: boolean
   /**
    * Duplicate is a one-shot insert carrying the copied row's data, so it needs
-   * only the insert lock — unlike the blank-row inserts above it, which also
-   * need the update lock to be fillable.
+   * only the insert lock.
    */
   disableDuplicate?: boolean
   disableDelete?: boolean

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.test.tsx

@@ -154,6 +154,75 @@ describe('RowModal add mode', () => {
     act(() => root.unmount())
     container.remove()
   })
+
+  it('inserts the row at the requested position', async () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const props = {
+      mode: 'add' as const,
+      isOpen: true,
+      onClose: vi.fn(),
+      table: {
+        id: 'table-3',
+        name: 'People',
+        schema: {
+          columns: [{ id: 'col_name', name: 'Name', type: 'string' as const, required: true }],
+        },
+      },
+      insertAt: { afterRowId: 'row-1' },
+      onSuccess: vi.fn(),
+    }
+
+    act(() => root.render(createElement(RowModal, props)))
+
+    const nameInput = container.querySelector<HTMLInputElement>('[data-testid="modal-input"]')
+    act(() => changeInput(nameInput as HTMLInputElement, 'Ada'))
+    const submit = container.querySelector<HTMLButtonElement>('[data-testid="submit"]')
+    await act(async () => submit?.click())
+
+    expect(mockCreateRow).toHaveBeenCalledWith({ data: { col_name: 'Ada' }, afterRowId: 'row-1' })
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  it('keeps Add Row disabled until every required field has a value', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const props = {
+      mode: 'add' as const,
+      isOpen: true,
+      onClose: vi.fn(),
+      table: {
+        id: 'table-3',
+        name: 'People',
+        schema: {
+          columns: [
+            { id: 'col_name', name: 'Name', type: 'string' as const, required: true },
+            { id: 'col_notes', name: 'Notes', type: 'string' as const },
+            { id: 'col_active', name: 'Active', type: 'boolean' as const, required: true },
+          ],
+        },
+      },
+      onSuccess: vi.fn(),
+    }
+
+    act(() => root.render(createElement(RowModal, props)))
+
+    const submit = () => container.querySelector<HTMLButtonElement>('[data-testid="submit"]')
+    const nameInput = container.querySelectorAll<HTMLInputElement>('[data-testid="modal-input"]')[0]
+    expect(submit()?.disabled).toBe(true)
+
+    act(() => changeInput(nameInput, 'Ada'))
+    expect(submit()?.disabled).toBe(false)
+
+    act(() => changeInput(nameInput, ''))
+    expect(submit()?.disabled).toBe(true)
+
+    act(() => root.unmount())
+    container.remove()
+  })
 })
 
 describe('RowModal column ids', () => {

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx

@@ -22,8 +22,10 @@ import type { ColumnDefinition, TableInfo, TableRow } from '@/lib/table'
 import { getColumnId } from '@/lib/table/column-keys'
 import { columnTypeOf } from '@/lib/table/column-types'
 import { resolveCurrencyCode } from '@/lib/table/currency'
+import { isEmptyCellValue } from '@/lib/table/deps'
 import { todayAtTtlOffset, ttlValueFromPicker, ttlValueToPickerParts } from '@/lib/table/ttl-values'
 import { getTimezoneEditBlockedMessage } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/timezone-editing'
+import type { RowInsertTarget } from '@/app/workspace/[workspaceId]/tables/[tableId]/types'
 import { type TimezoneState, useTimezoneState } from '@/hooks/queries/general-settings'
 import {
   useCreateTableRow,
@@ -50,6 +52,8 @@ export interface RowModalProps {
   table: TableInfo
   row?: TableRow
   rowIds?: string[]
+  /** Where add mode inserts the row; appends when omitted. */
+  insertAt?: RowInsertTarget
   onSuccess: () => void
 }
 
@@ -87,7 +91,16 @@ function cleanRowData(
  * call-site ever keeps it mounted across target-row changes, it must supply a `key`
  * prop (e.g. the row id) so React remounts with the new row's values.
  */
-export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess }: RowModalProps) {
+export function RowModal({
+  mode,
+  isOpen,
+  onClose,
+  table,
+  row,
+  rowIds,
+  insertAt,
+  onSuccess,
+}: RowModalProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const tableId = table.id
@@ -121,17 +134,25 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
   const hasEditableColumn = columns.some(
     (column) => columnTypeOf(column).editor !== 'date' || dateEditorsReady
   )
+  /** Toggles always save a boolean, so only other required columns can be left empty. */
+  const missingRequiredValue = columns.some(
+    (column) =>
+      column.required &&
+      columnTypeOf(column).editor !== 'toggle' &&
+      isEmptyCellValue(rowData[getColumnId(column)])
+  )
+  const canSubmit = hasEditableColumn && !missingRequiredValue
 
   const handleFormSubmit = async (e?: React.FormEvent) => {
     e?.preventDefault()
     setError(null)
-    if (!hasEditableColumn) return
+    if (!canSubmit) return
 
     try {
       const cleanData = cleanRowData(columns, rowData, timeZone, dateEditorsReady)
 
       if (isAddMode) {
-        await createRowMutation.mutateAsync({ data: cleanData })
+        await createRowMutation.mutateAsync({ data: cleanData, ...insertAt })
       } else if (row) {
         await updateRowMutation.mutateAsync({ rowId: row.id, data: cleanData })
       }
@@ -211,7 +232,7 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
           {isAddMode ? 'Fill in values for' : 'Update values for'} {table?.name ?? 'table'}
         </p>
         <form onSubmit={handleFormSubmit} className='contents'>
-          <button type='submit' hidden disabled={isSubmitting || !hasEditableColumn} />
+          <button type='submit' hidden disabled={isSubmitting || !canSubmit} />
           {columns.map((column) =>
             columnTypeOf(column).editor === 'date' && !dateEditorsReady ? (
               <TimezoneBlockedColumnField
@@ -250,7 +271,7 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
               ? 'Updating...'
               : 'Update Row',
           onClick: () => handleFormSubmit(),
-          disabled: isSubmitting || !hasEditableColumn,
+          disabled: isSubmitting || !canSubmit,
         }}
       />
     </ChipModal>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx

@@ -56,7 +56,7 @@ import { extractCreatedRowId, useTableUndo } from '@/hooks/use-table-undo'
 import type { ChatContext } from '@/stores/panel'
 import type { DeletedRowSnapshot } from '@/stores/table/types'
 import { useContextMenu, useTable } from '../../hooks'
-import type { EditingCell, QueryOptions, SaveReason } from '../../types'
+import type { EditingCell, QueryOptions, RowInsertTarget, SaveReason } from '../../types'
 import { cleanCellValue, generateColumnName as sharedGenerateColumnName } from '../../utils'
 import type { ColumnConfig } from '../column-config-sidebar'
 import { ColumnDropdown } from '../column-dropdown'
@@ -209,8 +209,8 @@ interface TableGridProps {
   onOpenEnrichmentDetails: (rowId: string, groupId: string) => void
   /** Open the row-edit modal for `row`. Wrapper renders the modal. */
   onOpenRowModal: (row: TableRowType) => void
-  /** Opens the add-row form, which inserts a complete row in one request. */
-  onOpenAddRowModal: () => void
+  /** Opens the add-row form, which inserts a complete row at `insertAt` (appends when omitted). */
+  onOpenAddRowModal: (insertAt?: RowInsertTarget) => void
   /** Open the row-delete modal for `snapshots`. Wrapper renders the modal. */
   onRequestDeleteRows: (snapshots: DeletedRowSnapshot[]) => void
   /**
@@ -373,6 +373,15 @@ function writeLoadedRowsWithChip(opts: {
   return true
 }
 
+/**
+ * Whether new rows must go through the add-row form instead of a blank grid row.
+ * A blank row only works when the grid can fill it in afterwards: typing into it
+ * is an update, and the server rejects an empty row when any column is required.
+ */
+function needsAddRowForm(updateLocked: boolean | undefined, columns: ColumnDefinition[]): boolean {
+  return Boolean(updateLocked) || columns.some((column) => column.required)
+}
+
 /**
  * Value-equality for a cell's stored value vs a pending edit. Primitives compare
  * with `===`; arrays/objects (multiselect id arrays, json) compare structurally
@@ -703,15 +712,14 @@ export function TableGrid({
   // requires the delete lock clear too — mirror that here or the affordance
   // stays live on an append-only table and only fails on click.
   const canDestroyColumn = canMutateSchema && !locks?.deleteLocked
-  // Duplicate inserts a full copied row in one shot, so unlike the blank-row
-  // paths it needs the insert lock only — it is valid on an append-only table.
+  /**
+   * Inserts that carry the whole row in one request (Duplicate, paste-append, the
+   * add-row form) need only the insert lock, so they stay valid on an append-only
+   * table. New row, Shift+Enter, and Insert row fall back to that form whenever
+   * `needsAddRowForm` says a blank row can't work.
+   */
   const canInsertFullRow = userPermissions.canEdit && !locks?.insertLocked
-  // Manual grid entry is "add an empty row, then type into its cells" — the
-  // typing is an update. So a *useful* manual add needs BOTH insert and update
-  // unlocked; on an append-only table (update locked) it would leave a blank
-  // row the user can't fill, so New row opens the add-row form instead, which
-  // inserts the complete row in one request. Full-row inserts (the form, CSV
-  // import, API, blocks, Mothership) need only the insert lock off server-side.
+  /** A blank grid row is filled in by typing, which is an update, so it needs both locks off. */
   const canManualAddRow = userPermissions.canEdit && !locks?.insertLocked && !locks?.updateLocked
   const canEditCellRef = useRef(canEditCell)
   canEditCellRef.current = canEditCell
@@ -1623,6 +1631,11 @@ export function TableGrid({
     const anchorId = contextMenu.row.id
     // Fractional ordering: express intent by neighbor id, not integer position.
     const intent = offset === 0 ? { beforeRowId: anchorId } : { afterRowId: anchorId }
+    if (needsAddRowForm(updateLockedRef.current, schemaColumnsRef.current)) {
+      closeContextMenu()
+      onOpenAddRowModalRef.current(intent)
+      return
+    }
     createRef.current(
       { data: {}, ...intent },
       {
@@ -1762,7 +1775,10 @@ export function TableGrid({
   // Stable identity so <AddRowButton>'s React.memo still bails out; lock state
   // is read from refs instead of being closed over.
   const handleAddRowClick = useCallback(() => {
-    if (canInsertFullRowRef.current && updateLockedRef.current) {
+    if (
+      canInsertFullRowRef.current &&
+      needsAddRowForm(updateLockedRef.current, schemaColumnsRef.current)
+    ) {
       onOpenAddRowModalRef.current()
       return
     }
@@ -2977,14 +2993,22 @@ export function TableGrid({
 
       if (e.shiftKey && e.key === 'Enter') {
         if (!canEditRef.current) return
-        // Same manual-add path as the Add row button, so it owes the same
-        // explanation rather than silently doing nothing on a locked table.
+        const row = currentRows[anchor.rowIndex]
+        // Mirrors handleAddRowClick; keep the two new-row paths in sync.
+        if (
+          row &&
+          canInsertFullRowRef.current &&
+          needsAddRowForm(updateLockedRef.current, schemaColumnsRef.current)
+        ) {
+          e.preventDefault()
+          onOpenAddRowModalRef.current({ afterRowId: row.id })
+          return
+        }
         if (!canManualAddRowRef.current) {
           e.preventDefault()
           onBlockedActionRef.current('add-row')
           return
         }
-        const row = currentRows[anchor.rowIndex]
         if (!row) return
         e.preventDefault()
         const position = row.position + 1
@@ -5119,7 +5143,7 @@ export function TableGrid({
         hasWorkflowColumns={hasWorkflowColumns}
         workflowCellScoped={Boolean(contextMenuGroupId)}
         disableEdit={!canEditCell}
-        disableInsert={!canManualAddRow}
+        disableInsert={!canInsertFullRow}
         disableDuplicate={!canInsertFullRow}
         disableDelete={!canDeleteRow}
         onAddToChat={addToChatRowIds.length > 0 ? handleAddSelectionToChat : undefined}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx

@@ -100,7 +100,7 @@ import {
   tableDetailParsers,
   tableDetailUrlKeys,
 } from './search-params'
-import type { QueryOptions } from './types'
+import type { QueryOptions, RowInsertTarget } from './types'
 import { generateColumnName } from './utils'
 
 const logger = createLogger('Table')
@@ -226,7 +226,7 @@ export function Table({
   const blockedToastIdRef = useRef<string | null>(null)
   const [isImportCsvOpen, setIsImportCsvOpen] = useState(false)
   const [editingRow, setEditingRow] = useState<TableRowType | null>(null)
-  const [isAddingRow, setIsAddingRow] = useState(false)
+  const [addRowTarget, setAddRowTarget] = useState<RowInsertTarget | null>(null)
   const [deletingRows, setDeletingRows] = useState<DeletedRowSnapshot[]>([])
   const [deletingAll, setDeletingAll] = useState<{
     excludeRowIds: string[]
@@ -296,7 +296,7 @@ export function Table({
   }, [])
   const onCloseSlideout = () => dispatch({ type: 'CLOSE' })
   const onOpenRowModal = (row: TableRowType) => setEditingRow(row)
-  const onOpenAddRowModal = () => setIsAddingRow(true)
+  const onOpenAddRowModal = (insertAt: RowInsertTarget = {}) => setAddRowTarget(insertAt)
   // useCallback because <Resource.Header> is memo-wrapped — these flow into
   // the breadcrumbs / headerActions memos, whose identity drives that re-render.
   const onRequestDeleteTable = useCallback(() => setShowDeleteTableConfirm(true), [])
@@ -1756,13 +1756,14 @@ export function Table({
           table={tableData}
         />
       )}
-      {isAddingRow && tableData && (
+      {addRowTarget && tableData && (
         <RowModal
           mode='add'
           isOpen={true}
-          onClose={() => setIsAddingRow(false)}
+          onClose={() => setAddRowTarget(null)}
           table={tableData}
-          onSuccess={() => setIsAddingRow(false)}
+          insertAt={addRowTarget}
+          onSuccess={() => setAddRowTarget(null)}
         />
       )}
       {editingRow && tableData && (

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/types.ts

@@ -1,3 +1,4 @@
+import type { InsertTableRowBodyInput } from '@/lib/api/contracts/tables'
 import type { SortSpec, TablePredicate, TableRow } from '@/lib/table'
 
 /**
@@ -36,3 +37,9 @@ export interface EditingCell {
   columnName: string
   columnKey?: string
 }
+
+/** Where a new row goes; an empty target appends it to the end of the table. */
+export type RowInsertTarget = Pick<
+  InsertTableRowBodyInput,
+  'position' | 'afterRowId' | 'beforeRowId'
+>