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}
)}