From 6d32a5fbe4e326d3b139d52e93f8374f3beb728a Mon Sep 17 00:00:00 2001
From: Kanav Arora <kanavarora1515@gmail.com>
Date: Sat, 23 Mar 2024 11:53:30 +0530
Subject: [PATCH] initial commit

---
 .../record-table/components/RecordTable.tsx   | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
index 80dbedafd405..b21ccf8ac5ec 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
@@ -12,8 +12,12 @@ import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTabl
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { RGBA } from '@/ui/theme/constants/Rgba';
 import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
+import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
 
-const StyledTable = styled.table<{ freezeFirstColumns?: boolean }>`
+const StyledTable = styled.table<{
+  freezeFirstColumns?: boolean;
+  freezeHeaders?: boolean;
+}>`
   border-radius: ${({ theme }) => theme.border.radius.sm};
   border-spacing: 0;
   margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
@@ -71,6 +75,18 @@ const StyledTable = styled.table<{ freezeFirstColumns?: boolean }>`
   }
 
   // Label identifier column
+  thead th:nth-of-type(1),
+  thead th:nth-of-type(2) {
+    top: 0;
+    z-index: 4;
+  }
+
+  thead th:nth-child(n + 3) {
+    top: 0;
+    z-index: 4;
+    position: sticky;
+  }
+
   thead th:nth-of-type(2),
   tbody td:nth-of-type(2) {
     left: calc(${({ theme }) => theme.table.checkboxColumnWidth} - 2px);
@@ -88,7 +104,6 @@ const StyledTable = styled.table<{ freezeFirstColumns?: boolean }>`
       content: '';
       height: calc(100% + 1px);
       position: absolute;
-      top: 0;
       width: 4px;
       right: -4px;
 
@@ -123,6 +138,7 @@ export const RecordTable = ({
 }: RecordTableProps) => {
   const { scopeId } = useRecordTableStates(recordTableId);
   const scrollLeft = useRecoilValue(scrollLeftState);
+  const scrollTop = useRecoilValue(scrollTopState);
 
   const { objectMetadataItem } = useObjectMetadataItemOnly({
     objectNameSingular,
@@ -141,6 +157,7 @@ export const RecordTable = ({
         >
           <StyledTable
             freezeFirstColumns={scrollLeft > 0}
+            freezeHeaders={scrollTop > 0}
             className="entity-table-cell"
           >
             <RecordTableHeader createRecord={createRecord} />