Skip to content

Commit 08e4ff7

Browse files
waleedlatif1waleedlatif1
committed
fix(tables): sticky meta-header row for frozen workflow groups, remove dead handleChangeType
1 parent 7c67bcb commit 08e4ff7

2 files changed

Lines changed: 100 additions & 77 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,14 @@ interface WorkflowGroupMetaCellProps {
233233
onDragEnd?: () => void
234234
onDragLeave?: () => void
235235
readOnly?: boolean
236+
/** Left offset in pixels when frozen (drives `position: sticky`). */
237+
stickyLeft?: number
238+
/** Whether this is the rightmost frozen column group (renders a separator shadow). */
239+
isLastFrozen?: boolean
240+
/** Whether this column group is currently frozen (pinned to the left). */
241+
isFrozen?: boolean
242+
/** Toggle the frozen state for this column group. */
243+
onFreezeToggle?: (columnName: string) => void
236244
}
237245

238246
/**
@@ -266,6 +274,10 @@ export function WorkflowGroupMetaCell({
266274
onDragEnd,
267275
onDragLeave,
268276
readOnly,
277+
stickyLeft,
278+
isLastFrozen,
279+
isFrozen,
280+
onFreezeToggle,
269281
}: WorkflowGroupMetaCellProps) {
270282
const isEnrichment = groupType === 'enrichment'
271283
const enrichment = isEnrichment ? getEnrichment(enrichmentId) : undefined
@@ -385,7 +397,12 @@ export function WorkflowGroupMetaCell({
385397
onDragEnd={isDraggable ? handleDragEnd : undefined}
386398
onDragLeave={isDraggable ? handleDragLeave : undefined}
387399
onDrop={isDraggable ? handleDrop : undefined}
388-
className='group relative cursor-pointer border-[var(--border)] border-r border-b bg-[var(--bg)] px-2 py-[5px] text-left align-middle before:pointer-events-none before:absolute before:top-0 before:bottom-0 before:left-[-1px] before:w-px before:bg-[var(--border)] before:content-[""]'
400+
className={cn(
401+
'group relative cursor-pointer border-[var(--border)] border-r border-b bg-[var(--bg)] px-2 py-[5px] text-left align-middle before:pointer-events-none before:absolute before:top-0 before:bottom-0 before:left-[-1px] before:w-px before:bg-[var(--border)] before:content-[""]',
402+
stickyLeft !== undefined && 'z-[11]',
403+
isLastFrozen && '[box-shadow:2px_0_0_0_var(--border)]'
404+
)}
405+
style={stickyLeft !== undefined ? { position: 'sticky', left: stickyLeft } : undefined}
389406
>
390407
<div
391408
className='pointer-events-none absolute inset-0'
@@ -471,6 +488,8 @@ export function WorkflowGroupMetaCell({
471488
onRunColumnSelected={onRunColumn && selectedCount > 0 ? handleRunSelected : undefined}
472489
selectedRowCount={selectedCount}
473490
onViewWorkflow={onViewWorkflow ? () => onViewWorkflow(workflowId) : undefined}
491+
isFrozen={isFrozen}
492+
onFreezeToggle={onFreezeToggle}
474493
/>
475494
)}
476495
</th>

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

Lines changed: 80 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -2601,26 +2601,6 @@ export function TableGrid({
26012601
[]
26022602
)
26032603

2604-
const handleChangeType = useCallback((columnName: string, newType: ColumnDefinition['type']) => {
2605-
const column = columnsRef.current.find((c) => c.name === columnName)
2606-
const previousType = column?.type
2607-
updateColumnMutation.mutate(
2608-
{ columnName, updates: { type: newType } },
2609-
{
2610-
onSuccess: () => {
2611-
if (previousType) {
2612-
pushUndoRef.current({
2613-
type: 'update-column-type',
2614-
columnName,
2615-
previousType,
2616-
newType,
2617-
})
2618-
}
2619-
},
2620-
}
2621-
)
2622-
}, [])
2623-
26242604
const insertColumnInOrder = useCallback(
26252605
(anchorColumn: string, newColumn: string, side: 'left' | 'right') => {
26262606
const order = columnOrderRef.current ?? schemaColumnsRef.current.map((c) => c.name)
@@ -3287,66 +3267,90 @@ export function TableGrid({
32873267
{hasWorkflowGroup && (
32883268
<tr>
32893269
<th className='sticky left-0 z-[12] border-[var(--border)] border-b bg-[var(--bg)] px-1 py-[5px]' />
3290-
{headerGroups.map((g) =>
3291-
g.kind === 'workflow' ? (
3292-
<WorkflowGroupMetaCell
3293-
key={`meta-${g.startColIndex}`}
3294-
workflowId={g.workflowId}
3295-
size={g.size}
3296-
startColIndex={g.startColIndex}
3297-
columnName={displayColumns[g.startColIndex]?.name ?? ''}
3298-
column={displayColumns[g.startColIndex]}
3299-
workflows={workflows}
3300-
isGroupSelected={
3301-
isColumnSelection &&
3302-
normalizedSelection !== null &&
3303-
normalizedSelection.startCol <= g.startColIndex &&
3304-
normalizedSelection.endCol >= g.startColIndex + g.size - 1
3305-
}
3306-
groupId={g.groupId}
3307-
groupType={workflowGroupById.get(g.groupId)?.type}
3308-
enrichmentId={workflowGroupById.get(g.groupId)?.enrichmentId}
3309-
groupName={workflowGroupById.get(g.groupId)?.name}
3310-
onSelectGroup={handleGroupSelect}
3311-
onOpenConfig={() => handleConfigureWorkflowGroup(g.groupId)}
3312-
onRunColumn={userPermissions.canEdit ? handleRunColumn : undefined}
3313-
selectedRowIds={selectedRowIds}
3314-
onInsertLeft={
3315-
userPermissions.canEdit ? handleInsertColumnLeft : undefined
3316-
}
3317-
onInsertRight={
3318-
userPermissions.canEdit ? handleInsertColumnRight : undefined
3319-
}
3320-
onDeleteColumn={
3321-
userPermissions.canEdit ? handleDeleteColumn : undefined
3322-
}
3323-
onDeleteGroup={
3324-
userPermissions.canEdit ? handleDeleteWorkflowGroup : undefined
3325-
}
3326-
onViewWorkflow={
3327-
workflowGroupById.get(g.groupId)?.type === 'enrichment'
3328-
? undefined
3329-
: handleViewWorkflow
3330-
}
3331-
readOnly={!userPermissions.canEdit}
3332-
onDragStart={
3333-
userPermissions.canEdit ? handleColumnDragStart : undefined
3334-
}
3335-
onDragOver={
3336-
userPermissions.canEdit ? handleColumnDragOver : undefined
3337-
}
3338-
onDragEnd={userPermissions.canEdit ? handleColumnDragEnd : undefined}
3339-
onDragLeave={
3340-
userPermissions.canEdit ? handleColumnDragLeave : undefined
3341-
}
3342-
/>
3343-
) : (
3270+
{headerGroups.map((g) => {
3271+
const firstCol = displayColumns[g.startColIndex]
3272+
const stickyLeft = firstCol ? frozenOffsets.get(firstCol.key) : undefined
3273+
if (g.kind === 'workflow') {
3274+
const lastCol = displayColumns[g.startColIndex + g.size - 1]
3275+
return (
3276+
<WorkflowGroupMetaCell
3277+
key={`meta-${g.startColIndex}`}
3278+
workflowId={g.workflowId}
3279+
size={g.size}
3280+
startColIndex={g.startColIndex}
3281+
columnName={firstCol?.name ?? ''}
3282+
column={firstCol}
3283+
workflows={workflows}
3284+
isGroupSelected={
3285+
isColumnSelection &&
3286+
normalizedSelection !== null &&
3287+
normalizedSelection.startCol <= g.startColIndex &&
3288+
normalizedSelection.endCol >= g.startColIndex + g.size - 1
3289+
}
3290+
groupId={g.groupId}
3291+
groupType={workflowGroupById.get(g.groupId)?.type}
3292+
enrichmentId={workflowGroupById.get(g.groupId)?.enrichmentId}
3293+
groupName={workflowGroupById.get(g.groupId)?.name}
3294+
onSelectGroup={handleGroupSelect}
3295+
onOpenConfig={() => handleConfigureWorkflowGroup(g.groupId)}
3296+
onRunColumn={userPermissions.canEdit ? handleRunColumn : undefined}
3297+
selectedRowIds={selectedRowIds}
3298+
onInsertLeft={
3299+
userPermissions.canEdit ? handleInsertColumnLeft : undefined
3300+
}
3301+
onInsertRight={
3302+
userPermissions.canEdit ? handleInsertColumnRight : undefined
3303+
}
3304+
onDeleteColumn={
3305+
userPermissions.canEdit ? handleDeleteColumn : undefined
3306+
}
3307+
onDeleteGroup={
3308+
userPermissions.canEdit ? handleDeleteWorkflowGroup : undefined
3309+
}
3310+
onViewWorkflow={
3311+
workflowGroupById.get(g.groupId)?.type === 'enrichment'
3312+
? undefined
3313+
: handleViewWorkflow
3314+
}
3315+
readOnly={!userPermissions.canEdit}
3316+
onDragStart={
3317+
userPermissions.canEdit ? handleColumnDragStart : undefined
3318+
}
3319+
onDragOver={
3320+
userPermissions.canEdit ? handleColumnDragOver : undefined
3321+
}
3322+
onDragEnd={
3323+
userPermissions.canEdit ? handleColumnDragEnd : undefined
3324+
}
3325+
onDragLeave={
3326+
userPermissions.canEdit ? handleColumnDragLeave : undefined
3327+
}
3328+
isFrozen={firstCol ? frozenColumnSet.has(firstCol.name) : false}
3329+
onFreezeToggle={
3330+
userPermissions.canEdit ? handleFreezeToggle : undefined
3331+
}
3332+
stickyLeft={stickyLeft}
3333+
isLastFrozen={lastCol?.key === lastFrozenColKey}
3334+
/>
3335+
)
3336+
}
3337+
const isLastFrz = firstCol?.key === lastFrozenColKey
3338+
return (
33443339
<th
33453340
key={`meta-${g.startColIndex}`}
3346-
className='border-[var(--border)] border-b bg-[var(--bg)] px-2 py-[5px]'
3341+
className={cn(
3342+
'border-[var(--border)] border-b bg-[var(--bg)] px-2 py-[5px]',
3343+
stickyLeft !== undefined && 'z-[11]',
3344+
isLastFrz && '[box-shadow:2px_0_0_0_var(--border)]'
3345+
)}
3346+
style={
3347+
stickyLeft !== undefined
3348+
? { position: 'sticky', left: stickyLeft }
3349+
: undefined
3350+
}
33473351
/>
33483352
)
3349-
)}
3353+
})}
33503354
{userPermissions.canEdit && (
33513355
<th className='border-[var(--border)] border-b bg-[var(--bg)] px-2 py-[5px]' />
33523356
)}

0 commit comments

Comments
 (0)