initial commit

twentyhq · Mar 23, 2024 · 6d32a5f · 6d32a5f
1 parent e5c1309
commit 6d32a5f
Showing 1 changed file with 19 additions and 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
@@ -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} />