diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx index 43eb8833..ab813275 100644 --- a/src/components/Table/TableHeader.tsx +++ b/src/components/Table/TableHeader.tsx @@ -1,4 +1,4 @@ -import { memo } from "react"; +import { memo, Fragment } from "react"; import { useAtom } from "jotai"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import type { DropResult } from "react-beautiful-dnd"; @@ -57,30 +57,36 @@ export const TableHeader = memo(function TableHeader({ {...provided.droppableProps} ref={provided.innerRef} > - {headerGroup.headers.map((header) => { + {headerGroup.headers.map((header, i) => { const isSelectedCell = (!selectedCell && header.index === 0) || (selectedCell?.path === "_rowy_header" && selectedCell?.columnKey === header.id); + const isLastHeader = i === headerGroup.headers.length - 1; + + // Render later, after the drag & drop placeholder if (header.id === "_rowy_column_actions") return ( - + + {provided.placeholder} + + ); if (!header.column.columnDef.meta) return null; - return ( + const draggableHeader = ( ); + + if (isLastHeader) + return ( + + {draggableHeader} + {provided.placeholder} + + ); + else return draggableHeader; })} - {/* Required by react-beautiful-dnd */} - {provided.placeholder} )}