Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

over target in header

This commit is contained in:
Nate Kelley 2025-04-11 13:03:48 -06:00
parent 61c6236da3
commit 47e8d55954
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/ui/table/AppDataGrid/TanStackDataGrid/DataGridHeader.tsx
View File

@ -43,7 +43,7 @@ const DraggableHeader: React.FC<DraggableHeaderProps> = ({
position: 'relative', position: 'relative',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
width: header.column.getSize(), width: header.column.getSize(),
opacity: isDragging ? 0.65 : 1, opacity: isDragging ? 0.95 : 1,
transition: 'none', // Prevent any transitions for snappy changes transition: 'none', // Prevent any transitions for snappy changes
height: `${HEADER_HEIGHT}px` // Set fixed header height height: `${HEADER_HEIGHT}px` // Set fixed header height
}; };
@ -116,6 +116,8 @@ interface DataGridHeaderProps {
rowVirtualizer: Virtualizer<HTMLDivElement, Element>; rowVirtualizer: Virtualizer<HTMLDivElement, Element>;
} }
const HEADER_DROP_TARGET_ID = 'buster-base-header-container';
export const DataGridHeader: React.FC<DataGridHeaderProps> = ({ export const DataGridHeader: React.FC<DataGridHeaderProps> = ({
rowVirtualizer, rowVirtualizer,
table, table,
@ -127,13 +129,20 @@ export const DataGridHeader: React.FC<DataGridHeaderProps> = ({
const showScrollShadow = (rowVirtualizer?.scrollOffset || 0) > 10; const showScrollShadow = (rowVirtualizer?.scrollOffset || 0) > 10;
const { setNodeRef: setDropNodeRef } = useDroppable({
id: HEADER_DROP_TARGET_ID
});
const isOverHeaderDropTarget = overTargetId === HEADER_DROP_TARGET_ID;
return ( return (
<> <>
<thead className="bg-background sticky top-0 z-10 w-full" suppressHydrationWarning> <thead className="bg-background sticky top-0 z-10 w-full" suppressHydrationWarning>
<tr <tr
ref={setDropNodeRef}
className={cn( className={cn(
'flex border-b transition-all duration-200', 'data-grid-header flex border-b transition-all duration-200',
showScrollShadow && 'shadow-sm' showScrollShadow && 'shadow-sm',
isOverHeaderDropTarget && 'bg-primary/10'
)}> )}>
{table {table
.getHeaderGroups()[0] .getHeaderGroups()[0]