Table sorting is not working when drag and drop of columns is used

[tusharkotlapure]

TanStack Table version

8.19.2

Framework/Library version

React 18.3.1

Describe the bug and the steps to reproduce it

This is my table component

`import React, { useState } from "react";
import CustomSpinner from "components/Spinner";
import {
flexRender,
useReactTable,
getCoreRowModel,
getSortedRowModel,
getExpandedRowModel,
} from "@tanstack/react-table";

import {
useSensor,
DndContext,
useSensors,
TouchSensor,
MouseSensor,
closestCenter,
KeyboardSensor,
} from "@dnd-kit/core";

import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
import {
arrayMove,
SortableContext,
horizontalListSortingStrategy,
} from "@dnd-kit/sortable";

import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import get from "lodash/get";

const DraggableTableHeader = ({ header }) => {
const { attributes, isDragging, listeners, setNodeRef, transform } =
useSortable({
id: header.column.id,
});

const style = {
opacity: isDragging ? 0.8 : 1,
position: "relative",
transform: CSS.Translate.toString(transform),
transition: "width transform 0.2s ease-in-out",
whiteSpace: "nowrap",
width: header.column.getSize(),
zIndex: isDragging ? 1 : 0,
};

return (

<div
{...attributes}
{...listeners}
className={sort_${header.column.getIsSorted()} ${get( header, "column.columnDef.headerClassName", "" )}}
onClick={header.column.getToggleSortingHandler()}
>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}

<div
{...{
onDoubleClick: () => header.column.resetSize(),
onMouseDown: header.getResizeHandler(),
onTouchStart: header.getResizeHandler(),
className: resizer ltr ${ header.column.getIsResizing() ? "isResizing" : "" },
}}
/>

);
};

const DragAlongCell = ({ cell }) => {
const { isDragging, setNodeRef, transform } = useSortable({
id: cell.column.id,
});

const style = {
opacity: isDragging ? 0.8 : 1,
position: "relative",
transform: CSS.Translate.toString(transform),
transition: "width transform 0.2s ease-in-out",
width: cell.column.getSize(),
zIndex: isDragging ? 1 : 0,
};

return (
<td
style={style}
className={get(cell, "column.columnDef.className", "")}
ref={setNodeRef}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}

);
};

function Table(props) {
const {
data,
sorting,
columns,
isFetching,
hideHeader,
setSorting,
visibleColumns = {},
setVisibleColumns = () => {},
onDraggedColumnChange,
} = props;

const [columnOrder, setColumnOrder] = useState([]);

const table = useReactTable({
data,
state: {
sorting,
columnOrder,
columnVisibility: visibleColumns,
},
columns,
manualSorting: true,
sortDescFirst: true,
getSubRows: (row) => row.subRows,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
columnResizeMode: "onChange",
onSortingChange: setSorting,
onColumnOrderChange: setColumnOrder,
getExpandedRowModel: getExpandedRowModel(),
columnResizeDirection: "ltr",
onColumnVisibilityChange: setVisibleColumns,
});

function handleDragEnd(event) {
const { active, over } = event;
if (active && over && active.id !== over.id) {
setColumnOrder((columnOrder) => {
const oldIndex = columnOrder.indexOf(active.id);
const newIndex = columnOrder.indexOf(over.id);
const newColumnOrder = arrayMove(columnOrder, oldIndex, newIndex);
return newColumnOrder;
});
}
}

const sensors = useSensors(
useSensor(MouseSensor, {}),
useSensor(TouchSensor, {}),
useSensor(KeyboardSensor, {})
);

return (

{!hideHeader ? (

{table.getHeaderGroups().map((headerGroup) => (

{headerGroup.headers.map((header) => (

))}

))}



) : null}

{table.getRowModel().rows.map((row) => (

{row.getVisibleCells().map((cell) => (



))}

))}



{isFetching ? : null}

);
}

export default Table;
`

I want to sort table columns and also drag and drop. Right now drag and drop of columns is working correctly but sorting of column on click of table header is not working.
If I remove {...attributes} {...listeners} form DraggableTableHeader sorting works fine.

Kindly help

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

sample code (https://codesandbox.io/p/devbox/compassionate-fast-jgk6yj?file=%2Fsrc%2Fmain.tsx%3A64%2C24-65%2C23)

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[tusharkotlapure]

@tannerlinsley can you please help?