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)
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
[X] I agree to follow this project's Code of Conduct
[X] 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.
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 (
); };
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}
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 ( <DndContext collisionDetection={closestCenter} modifiers={[restrictToHorizontalAxis]} onDragEnd={handleDragEnd} sensors={sensors}
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