Skip to content

fix(tables): suppress phantom rows on sort, center gutter numbers, stop select-all viewport jump #4445

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
waleedlatif1 merged 2 commits into from
May 5, 2026
+40 −26
Merged

fix(tables): suppress phantom rows on sort, center gutter numbers, stop select-all viewport jump #4445

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
102ee2f
fix(tables): suppress phantom rows on sort, center gutter numbers, st…
waleedlatif1 May 5, 2026
c9c0c48
fix(tables): suppress scroll on Ctrl+A select-all
waleedlatif1 May 5, 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
66 changes: 40 additions & 26 deletions apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,7 @@ export function Table({
const containerRef = useRef<HTMLDivElement>(null)
const scrollRef = useRef<HTMLDivElement>(null)
const isDraggingRef = useRef(false)
const suppressFocusScrollRef = useRef(false)

const {
tableData,
Expand Down Expand Up @@ -796,6 +797,7 @@ export function Table({
if (rws.length === 0 || currentCols.length === 0) return
setEditingCell(null)
setCheckedRows((prev) => (prev.size === 0 ? prev : EMPTY_CHECKED_ROWS))
suppressFocusScrollRef.current = true
setSelectionAnchor({ rowIndex: 0, colIndex: 0 })
setSelectionFocus({
rowIndex: maxPositionRef.current,
Expand Down Expand Up @@ -1155,6 +1157,10 @@ export function Table({

useEffect(() => {
if (isColumnSelection) return
if (suppressFocusScrollRef.current) {
suppressFocusScrollRef.current = false
return
}
Comment thread
waleedlatif1 marked this conversation as resolved.
const target = selectionFocus ?? selectionAnchor
if (!target) return
const { rowIndex, colIndex } = target
Expand Down Expand Up @@ -1296,6 +1302,7 @@ export function Table({
const rws = rowsRef.current
const currentCols = columnsRef.current
if (rws.length > 0 && currentCols.length > 0) {
suppressFocusScrollRef.current = true
setEditingCell(null)
setCheckedRows((prev) => (prev.size === 0 ? prev : EMPTY_CHECKED_ROWS))
setSelectionAnchor({ rowIndex: 0, colIndex: 0 })
Expand Down Expand Up @@ -2685,7 +2692,10 @@ export function Table({
<>
{rows.map((row, index) => {
const prevPosition = index > 0 ? rows[index - 1].position : -1
const gapCount = queryOptions.filter ? 0 : row.position - prevPosition - 1
const gapCount =
queryOptions.filter || queryOptions.sort
? 0
: row.position - prevPosition - 1
return (
<React.Fragment key={row.id}>
{gapCount > 0 && (
Expand Down Expand Up @@ -2938,7 +2948,7 @@ export function Table({
}

const GAP_ROW_LIMIT = 200
const GAP_CHECKBOX_CLASS = cn(CELL_CHECKBOX, 'group/checkbox cursor-pointer text-center')
const GAP_CHECKBOX_CLASS = cn(CELL_CHECKBOX, 'cursor-pointer')

interface PositionGapRowsProps {
count: number
Expand Down Expand Up @@ -2975,28 +2985,32 @@ const PositionGapRows = React.memo(
const isGapChecked = checkedRows.has(position)
return (
<tr key={`gap-${position}`}>
<td
className={GAP_CHECKBOX_CLASS}
onMouseDown={(e) => {
if (e.button !== 0) return
onRowToggle(position, e.shiftKey)
}}
>
<span
className={cn(
'text-[var(--text-tertiary)] text-xs tabular-nums',
isGapChecked ? 'hidden' : 'block group-hover/checkbox:hidden'
)}
>
{position + 1}
</span>
<div
className={cn(
'items-center justify-center',
isGapChecked ? 'flex' : 'hidden group-hover/checkbox:flex'
)}
>
<Checkbox size='sm' checked={isGapChecked} className='pointer-events-none' />
<td className={GAP_CHECKBOX_CLASS}>
<div className='flex items-center justify-center gap-1'>
<div
className='group/checkbox flex h-[20px] w-[24px] shrink-0 items-center justify-center'
onMouseDown={(e) => {
if (e.button !== 0) return
onRowToggle(position, e.shiftKey)
}}
>
<span
className={cn(
'text-[var(--text-tertiary)] text-xs tabular-nums',
isGapChecked ? 'hidden' : 'block group-hover/checkbox:hidden'
)}
>
{position + 1}
</span>
<div
className={cn(
'items-center justify-center',
isGapChecked ? 'flex' : 'hidden group-hover/checkbox:flex'
)}
>
<Checkbox size='sm' checked={isGapChecked} className='pointer-events-none' />
</div>
</div>
</div>
</td>
{columns.map((col, colIndex) => {
Expand Down Expand Up @@ -3238,7 +3252,7 @@ const DataRow = React.memo(function DataRow({
return (
<tr onContextMenu={(e) => onContextMenu(e, row)}>
<td className={cn(CELL_CHECKBOX, 'cursor-pointer')}>
<div className='flex items-center justify-between gap-1'>
<div className='flex items-center justify-center gap-1'>
<div
className='group/checkbox flex h-[20px] w-[24px] shrink-0 items-center justify-center'
onMouseDown={(e) => {
Expand Down Expand Up @@ -3268,7 +3282,7 @@ const DataRow = React.memo(function DataRow({
type='button'
aria-label={runningCount > 0 ? `Stop ${runningCount} running` : 'Run row'}
title={runningCount > 0 ? `Stop ${runningCount} running` : 'Run row'}
className='flex h-[20px] w-[20px] shrink-0 items-center justify-center rounded text-[var(--text-primary)] transition-colors hover-hover:bg-[var(--surface-2)]'
className='ml-auto flex h-[20px] w-[20px] shrink-0 items-center justify-center rounded text-[var(--text-primary)] transition-colors hover-hover:bg-[var(--surface-2)]'
onClick={() => {
if (runningCount > 0) {
onStopRow(row.id)
Expand Down
Loading