Skip to content

improvement(tables): show a tooltip on truncated column headers #6371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheodoreSpeaks merged 2 commits into from
Aug 7, 2026
+38 −7
Merged

improvement(tables): show a tooltip on truncated column headers #6371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
054a8e9
improvement(tables): show a tooltip on truncated column headers
TheodoreSpeaks Aug 7, 2026
f98a1cd
chore(tables): use absolute import for HeaderLabel
TheodoreSpeaks Aug 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions ...space/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
import { cn } from '@sim/emcn'
import { ChevronDown } from '@sim/emcn/icons'
import type { WorkflowGroup } from '@/lib/table'
import { HeaderLabel } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/header-label'
import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
import { COL_WIDTH, SELECTION_TINT_BG } from '../constants'
import type { ColumnSourceInfo, DisplayColumn } from '../types'
Expand Down Expand Up @@ -296,9 +297,10 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
blockIconInfo={sourceInfo?.blockIconInfo}
blockMissing={blockMissing}
/>
<span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[var(--text-primary)] text-small'>
{column.workflowGroupId ? column.headerLabel : column.name}
</span>
<HeaderLabel
label={column.workflowGroupId ? column.headerLabel : column.name}
className='ml-1.5 text-[var(--text-primary)] text-small'
/>
</div>
) : (
<div className='flex h-full w-full min-w-0 items-center'>
Expand All @@ -314,9 +316,10 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
blockIconInfo={sourceInfo?.blockIconInfo}
blockMissing={blockMissing}
/>
<span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[var(--text-primary)] text-small'>
{column.workflowGroupId ? column.headerLabel : column.name}
</span>
<HeaderLabel
label={column.workflowGroupId ? column.headerLabel : column.name}
className='ml-1.5 text-[var(--text-primary)] text-small'
/>
</button>
<button
type='button'
Expand Down
27 changes: 27 additions & 0 deletions ...p/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/header-label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
'use client'

import { memo } from 'react'
import { cn, FloatingTooltip, isTextClipped, useFloatingTooltip } from '@sim/emcn'

interface HeaderLabelProps {
label: string
className?: string
}

/**
* Column header text that clips with an ellipsis and reveals its full value in
* a floating tooltip — but only while actually clipped, since an untruncated
* header already says everything the tooltip would.
*/
export const HeaderLabel = memo(function HeaderLabel({ label, className }: HeaderLabelProps) {
const { state, handlers } = useFloatingTooltip(isTextClipped)

return (
<>
<span className={cn('min-w-0 truncate', className)} {...handlers}>
{label}
</span>
<FloatingTooltip label={label} state={state} />
</>
)
})
3 changes: 2 additions & 1 deletion ...[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
} from '@sim/emcn/icons'
import type { RunLimit, RunMode } from '@/lib/api/contracts/tables'
import type { WorkflowGroupType } from '@/lib/table'
import { HeaderLabel } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/header-label'
import { getEnrichment } from '@/enrichments/registry'
import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
import { SELECTION_TINT_BG } from '../constants'
Expand Down Expand Up @@ -439,7 +440,7 @@ export function WorkflowGroupMetaCell({
) : (
<Workflow className='size-[12px] shrink-0 text-[var(--text-icon)]' />
)}
<span className='min-w-0 truncate text-[var(--text-secondary)] text-xs'>{name}</span>
<HeaderLabel label={name} className='text-[var(--text-secondary)] text-xs' />
{onRunColumn && (
<DropdownMenu open={runMenuOpen} onOpenChange={setRunMenuOpen}>
<DropdownMenuTrigger asChild>
Expand Down
Loading