diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContent.tsx index d5dc7425f..4d96d0537 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContent.tsx @@ -5,6 +5,16 @@ import { RecordTableNoRecordGroupBody } from '@/object-record/record-table/recor import { RecordTableRecordGroupsBody } from '@/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody'; import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; +import styled from '@emotion/styled'; +import { useState } from 'react'; + +const StyledTableWithPointerEvents = styled(StyledTable)<{ + isDragging: boolean; +}>` + & > * { + pointer-events: ${({ isDragging }) => (isDragging ? 'none' : 'auto')}; + } +`; export interface RecordTableContentProps { tableBodyRef: React.RefObject; @@ -20,23 +30,37 @@ export const RecordTableContent = ({ handleDragSelectionEnd, setRowSelected, hasRecordGroups, -}: RecordTableContentProps) => ( - <> - - - {hasRecordGroups ? ( - - ) : ( - - )} - - - - - -); +}: RecordTableContentProps) => { + const [isDragging, setIsDragging] = useState(false); + + const handleDragStart = () => { + setIsDragging(true); + handleDragSelectionStart(); + }; + + const handleDragEnd = () => { + setIsDragging(false); + handleDragSelectionEnd(); + }; + + return ( + <> + + + {hasRecordGroups ? ( + + ) : ( + + )} + + + + + + ); +};