When scrolling horizontally, table header goes behind the first frozen column

[Weiko]

Bug Description

When scrolling horizontally, table header goes behind the first frozen column and becomes visible again when we scroll too much.
See video below

Screen.Recording.2024-07-17.at.11.16.34.mov

Expected behavior

I should not see table header of other columns

[Weiko]

FYI @charlesBochet @lucasbordeau

[greptile-apps]

To fix the issue where the table header goes behind the first frozen column when scrolling horizontally, follow these steps:

1. Update RecordTable.tsx: Ensure the StyledTable component has proper z-index handling for the header.

const StyledTable = styled.table`
  border-radius: ${({ theme }) => theme.border.radius.sm};
  border-spacing: 0;
  margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
  table-layout: fixed;
  width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2);
  thead {
    position: sticky;
    top: 0;
    z-index: 2; // Ensure header is above other elements
  }
`;

2. Update RecordTableTd.tsx: Ensure the first column has a higher z-index when frozen.

const StyledTd = styled.td<{
  zIndex?: number;
  backgroundColor: string;
  borderColor: string;
  isDragging?: boolean;
  fontColor: string;
  sticky?: boolean;
  freezeFirstColumns?: boolean;
  left?: number;
  hasRightBorder?: boolean;
  hasBottomBorder?: boolean;
}>`
  // existing styles
  ${({ sticky }) =>
    sticky
      ? `
      position: sticky;
      left: 0;
      z-index: 3; // Ensure frozen column is above other elements
    `
      : ''}
`;

3. Update RecordTableFirstColumnScrollObserver.tsx: Ensure the class toggling for the frozen column shadow is correct.

useEffect(() => {
  const element = recordTableRef.current;
  if (element) {
    if (scrollLeft > 0) {
      element.classList.add('freeze-first-columns-shadow');
    } else {
      element.classList.remove('freeze-first-columns-shadow');
    }
  }
}, [scrollLeft, recordTableRef]);

These changes should ensure that the table header remains above the first frozen column when scrolling horizontally.

References

/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx
/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableFirstColumnScrollObserver.tsx

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[Antardas]

@Weiko , @Bonapara .
Hello, I have created a PR on this issue.
#6315

[lucasbordeau]

FIxed by #6315